search

CodeSoom / project-react-3-Najeong-Kim

2 stars 2 forks source link

반응형 웹을 만드는 법 #78

Open moonkii opened 3 years ago

moonkii commented 3 years ago

지금도 그런지 모르겠지만 네이버같은 사이트에 모바일로 접속하시면 m.naver.com 이런식으로 모바일 화면이 데스크탑 화면과 다른 경우를 보셨을 거에요. 이런 경우 아예 데스크탑과 모바일 웹을 별개의 프로젝트로 만든거에요. 하지만 이렇게 되면 시간과 비용이 2배로 들어가겠죠?

요새는 모바일 first 라고 해서 기본 디자인을 모바일 웹에 맞추고 데스크탑에 맞추는 형태로 많이 해요. 모바일 사용자가 압도적으로 많기 때문이죠. 이때는 미디어 쿼리를 사용해서 화면 크기에 따라 CSS 속성을 조정해서 화면을 다르게 보여줘요.

반응형 웹으로 만드는게 쉽지는 않아요. 만약 시간이 부족하시다면 저는 모바일 디자인을 먼저 맞추고 인스타그램처럼 데스크탑에서도 모바일 처럼 너비를 고정해놓고 보여줘도 괜찮을 것 같아요.

Najeong-Kim commented 3 years ago

허어어어얼 그렇군요 ㅠㅠㅠ 저의 프로젝트는 어떻게 해야할까요..? 반응형으로 만들긴했는데 컴포넌트를 두개로 나눠서 넣었어요

Najeong-Kim commented 3 years ago

https://velog.io/@pyo-sh/React-Responsive 이 글을 참고해서 만들었어요! 아래 글을 보시면 컴포넌트를 나눠서만들어서 저도 그렇게했거든요 ㅠ-ㅠ

image

moonkii commented 3 years ago

문제를 해결하는 방법은 다양해요. 블로거들도 대부분 그냥 공부하시는 분들이에요. 뭔가 더 자세히 알고 잘 알아서 포스팅을 하는게 아니에요. 항상 블로그를 참고하실 때 '이 방법이 맞을까?', '왜 이렇게 했을까?' 를 고민하셔야해요.

예를들어 서울에서 부산으로 이동하는 방법은 도보, 스케이트 보드, 자전거, 오토바이, 자동차, 비행기 다양하죠. 누군가 스케이트 보드를 타고 갔다고해서 굳이 따라할 필요가 있을까요? 그 사람은 스케이트 보드를 엄청 잘 타고 싶거나 비용이 없어서 그랬을 수 있죠. 항상 더 나은 코드, 더 좋은 방법을 스스로 생각하는 연습을 하시면 좋아요.

반응형으로 보이는게 우선 순위가 높다면 하나라도 제대로 작업하고 넘어가는게 좋아요. 이후에 추가로 페이지나 컴포넌트를 반응형으로 만드실 때는 컴포넌트를 2개로 만드는 방법으로 하시지 마시고, 컴포넌트 스타일 잡아 줄 때 내부에 CSS 로 구분해서 처리해주세요.

Najeong-Kim commented 3 years ago

네!! 감사합니다!