1차멘토링(8월23일)

멘토링 Q&A

⚙️ 개발환경

• 현재 설정한 Primary color가 진해서 header와 footer를 모두 Primary color로 설정하면 페이지가 답답해보이는 느낌이 듭니다.
  footer를 어떻게 수정하면 좋을까요 ?

  • Primary color가 진해서 많이 사용할 경우 시각적 무게가 과도해 질 수 있을 것 같음
  • 버튼 등 페이지 내부요소에 강조하는 색으로 Primary color를 사용하고 second Primary color를 조금 더 연하게 만들어서 사용하는 것도 추천
  • header와 footer의 경우 배경색과 header/footer 색을 통일하고 라인으로 구분하면 답답함이 해소될 수 있을 것 같음

• 커뮤니티에 글을 작성하고 내가 작성한 글을 모아서 마이페이지에서 썸네일처럼 보여주려고 하는데 마이페이지에서 바로 커뮤니티 글을 수정/삭제할 수 있도록 하는 것이 좋을까요 ?

  • 삭제는 마이페이지에서 해도 괜찮을 것 같음
  • 수정은 커뮤니티 글에서 하는 것이 좋을 것 같음

• 메인페이지에서 스크롤을 내릴때마다 header가 불려오는 방식을 사용합니다. 메인페이지 화면 중 배경이 sticky인 상태로 컨텐츠 내 아이템만 스크롤 가능하도록 구현예정인 페이지가 있는데 이 부분에서 헤더를 어떻게 처리하는 것이 자연스러울지 잘 모르겠습니다

  • 컨텐츠 내 아이템에 집중하는 것이 중요하다고 생각
  • 해당 섹션에서 헤더를 숨기고 다른 섹션으로 이동하면 다시 헤더가 보이도록 구현하는 것도 좋을 것 같음

• 스크롤 관련 애니메이션을 붙이면 position 속성이 적용이 안되는 경우가 있는데 혹시 해결방법이 있나 궁금합니다

  • transform이 상위에 붙으면 position 속성이 적용되지 않는 경우가 있음
  • transform을 사용하지 않고 opacity나 translate를 사용하여 애니메이션 구현하기
  • 스와이퍼를 적용하고 페이지네이션을 커스텀 스타일링하는 것도 문제를 방지할 수 있는 방법

• 와인 프로필 페이지에 필터가 많은데 현재 화면구성이 사용자에게 부담스러울까요 ?

  • 처음부터 다 보여지면 부담스러울 수 있지만 현재 접힌 상태로 보여졌다가 펼쳐지기 때문에 괜찮을 것 같음
  • 필터 중 필수로 선택해야 하는 필터와 필수가 아닌 필터를 구분하여 사용자에게 시각적으로 보여주기
  • 접혔을 때 필수 필터들만 보이도록 구현하는 것도 좋을 것 같음

• 커뮤니티 페이지에서 글 작성 시 이미지 업로드를 하면 대표 이미지를 선택하는 기능 vs 첫번째 업로드 이미지를 자동으로 대표이미지로 지정하는 것 중 어떤 방법이 더 자연스러울까요 ?

  • 첫번째 업로드 이미지를 대표이미지로 지정하는 방식 추천 : 가장 일반적으로 사용하는 케이스
  • 수정할 때 대표이미지를 변경할 수 있도록 한다던지 하는 것이 좋을듯
  • 아니면 이미지를 쭉 올리고 대표이미지를 선택할 수 있게 하는 기능으로 구현

• 여러장의 이미지를 업로드했을때 프리뷰는 어디까지 보여주는 것이 적절할까요 ?

  • 캐러셀로 보여준다면 고민했던 문제가 해결될 것 같음

• 개인적인 생각으로는 글 작성 시 본문이 길어지면 스크롤이 불편하다고 느낄 것 같은데 프리뷰 버튼을 추가해서 따로 창을 보여주는 것이 좋을까요 ?

  • 글 같은 경우에는 그냥 스크롤 되도록 구현해도 괜찮을 것 같음
  • 어짜피 글이 길어지면 더보기를 눌렀을 때 스크롤을 해야하니까 처음부터 스크롤으로 구현하는 것이 좋을 것 같음

🚀 개발

• 만약 특정 페이지에서 footer를 보이지 않게 하려면 react-router에서 어떤 형태로 구조를 잡아야하나요 ? 필요한 페이지마다 footer를 불러오는 방식인가요 ?

  • react-router에서도 route로 레이아웃을 잡아줄 수 있음
  • 레이아웃에서 footer가 있는 페이지와 없는 페이지로 분리해주면 됨
  • 참고자료 : ReactRouter에서 공통된 layout을 표현하고싶다

• Zustand를 통해 관리할 상태를 정하는 기준이 있을까요 ? 한 컴포넌트에서만 사용하는 상태는 useState도 병행해서 사용하나요 ? Zustand 잘 쓰는 팁이 있다면 알려주세요!

  • 한 컴포넌트에서만 사용한다면 useState를 사용
  • 단순 props로 내려줄 수 없는 경우나 상태가 겹치는 컴포넌트가 많을 때 사용하면됨(모달 등에 많이 사용됨)
  • 슬라이스를 잘 분리해서 무엇을 위한 store인를 잘 분리하는 것이 중요함
  • useSelector를 사용해서 전체를 불러오지말고 필요한 데이터만 불러오는 것이 중요함
  • 로컬스토리지랑 연동 시 persist 사용하기 -> 로컬이랑 동기화

• 특정 조건에 부합하면(게시글 10회 이상 작성 등) 사용자에게 뱃지를 부여하려고 하는데 기준에 만족했는지에 대한 처리를 어떤 식으로 하는 것이 좋을까요 ?

  • 서버에서 판단해주는 것이 좋음 : 일반적인 방법
    • 서버에서 판단해서 유저 뱃지 정보를 배열로 넘겨주는 방식
  • 서버에서 판단하도록 만들기 어렵다면 클라이언트 쪽에서 특정 조건에 부합하는지 검사해야하는데 어려움
  • 기준 정보를 테이블로 추가해서 예를 들면 게시물의 총 count를 가지고 있는다던지 하는 방법도 있음

• Tailwind CSS를 사용하면서 스켈레톤 UI를 적용하려고 하는데 스켈레톤 UI로 만든 컴포넌트와 사용자에게 보이는 컴포넌트를 따로 만들어서 조건부렌더링 처리를 해야 할 지 아니면 className 안에서 조건부처리를 해야할지 감이 안 옵니다. 혹은 이외에 다른 방법이 있을까요 ?

  • 페이지 스켈레톤은 별도로 스켈레톤을 만드는 것이 좋을 것 같음
  • 간단한 버튼 스켈레톤 같은 경우에는 하나의 파일에서 스켈레톤과 실제 컴포넌트를 만들고 조건부처리 할 수도 있기는 함
  • 스켈레톤 컴포넌트를 만들어서 fallback에 넣는 방법이 좋음

👥 협업/기타

• 현업에서는 Zustand랑 Redux + Context 방식 중에 어떤 방식을 주로 사용하거나 선호하시나요 ?

  • 요즘은 Zustand랑 tanstackQuery를 많이 사용함
  • Zustand : 소-중규모 / Redux : 대규모
  • 프로젝트의 규모가 커지면 RTK를 적용하는 회사가 많은듯
  • Context는 거의 사용하지 않고 다크모드 적용 등에 사용할 수 있지만 Zustand가 있어서 많이 사용하지는 않음

• 라이브러리를 배우다보니 현재 최신버전의 라이브러리를 공부하고 있는데 실무를 생각하면 새로운 버전보다는 레거시 코드를 볼 가능성이 높을 것 같습니다. 최신 업데이트에 맞춰서 공부를 하는 것이 좋을까요 ? 아니면 초기부터 존재했던 부분을 중심으로 공부하는 것이 좋을까요 ?

  • http, 상태관리원칙, 렌더링, 리액트렌더링 등과 같은 웹 개발 근본을 먼저 공부하기
  • 모든 라이브러리는 근본 원리를 이용한 것이기 때문에 웹 개발 근본에 대한 공부가 중요함
  • 최신 업데이트에 대해서는 사용법만 알고 한 번 사용해보는 정도면 좋을 것 같음
  • 현재 실무에서 많이 쓰는 버전은 작년 기준 버전을 많이 사용하는 것 같음

🗣️ 멘토님 추가 말씀

• react-router-dom을 사용하지 않고 react-router를 선택한 이유가 있는지 -> 보통 react-router-dom을 많이 사용
• vercel 배포 미리 하는 것 추천함
• 기획 좋고 랜딩페이지가 잘 나온다면 예쁠 것 같음
• 프로젝트 기록 잘 해두기
  • 다음주 멘토링 때 기록 템플릿 공유해주실 예정
  • 작성할 때 10분 이상 투자하지 말기, 필터링 하지 말고 그대로 적기
  • 수치적인 부분 : 스크린샷 활용하기
  • 관련 문서를 찾아봤으면 링크 넣고 gpt한테 질문했으면 gpt랑 대화한거 붙여넣는 방식으로 작성