[Team-21] RaQQoon Sidedish

[juddroid]

진행상황

Dropdown 메뉴 구현

• 헤더 메뉴에 마우스 호버시 드롭다운 표시

TabUI 구현

• 각 탭에 따른 itemList 로딩
• 선택된 탭 활성화

Carousel 구현

• 더보기 버튼 클릭시 새로운 캐러셀 출력
• API를 이용해 UI 구성

현재 뷰!

궁금한점

1. 단순한 궁금점입니다. css module을 사용하는게 더 성능면에서 좋다고 들었습니다. 현재 styled-components를 활용하여 개발을 진행하고 있습니다. 너무 많은 styled components를 만드는게 아닌가? 그런 생각이 계속 드네요. 아직 잘 활용을 못하기도 하고, css를 import해서 사용하던게 익숙해서 그런지 아직까지 css in js가 어렵게 느껴집니다. 현업에서는 어떤 방식을 더 많이 사용하는지 궁금합니다.

2. useState의 초기값으로 null값이나 []을 사용하고 있는데, 최초 렌더링시 에러처리를

const Component = () => {

    const [data, setData] = useState(null);

    if (!data) return null;
    
    return <OtherComponent data={data} />
 
 }

이런 형태로 하는게 괜찮은지 궁금합니다.

3. .env 파일을 생성해서 path alias 를 했을 때, vsCode에서 컴포넌트를 auto import 할 때, 여전히 상대경로로 import가 되고 있는데 다른 설정이 필요한지 궁금합니다. 그리고 command 키를 이용해서 컴포넌트 내부로 들어갈 수 있어서 편리했는데, 설정을 하고나니 이걸 사용할 수 없게 되어 불편했습니다. 어떤식으로 검색해서 방법을 찾으면 좋을지 모르겠습니다.

[snowjang24]

안녕하세요 리뷰를 맡은 스노우입니다. ☃️

전체적으로 컴포넌트 나누기나, 로직 분리가 너무 잘되어 있어 코드 읽는데 불편함 없이 너무 편하게 봤네요, 저보다 더 잘하시는거같아요! 👏👏👏

남은 진행사항들 완성하면 다시 한 번 코드를 구경하러 오고 싶군요 😃

[snowjang24]

폰트 로드 방법 및 최적화에 대해 한번 공부해보면 좋을 것 같습니다.
preload와 font-display: swap; 와 같이 웹 폰트를 불러 오거나, 로컬 폰트를 로드하는 다양하고 적절한 방법에 대해 공부해보시기를 권장드립니다.

• 웹 폰트 사용과 최적화의 최근 동향
• Ensure text remains visible during webfont load

[snowjang24]

👀 uuid! 까지!

[snowjang24]

컴포넌트 구성과 로직분리가 깔끔하여 보기 좋습니다 👍

이미지 컨테이너와 이미지 모두 사이즈를 지정하고 있는데 혹시 이유가 있을까요 ?
만약 이런 경우, 이미지의 사이즈가 불규칙적인 경우에 대해 한 번 고민해보실 필요가 있을 것 같습니다.

width 혹은 height 100%, overflow: hidden을 활용해보세요!

[snowjang24]

만약 이런 케이스별 색을 자주 쓰는경우 객체를 통해 관리해도 좋을것 같습니다 👍
지금도 👍 입니다

[snowjang24]

이런 경우, Fetch 실패시에도 로딩중으로 떠 사용자 경험에 좋지 않을 것 같습니다.
loading 상태를 추가하여 pending(loading), fulfilled, rejected의 케이스로 구분하는 것이 좋을 것 같습니다!

[snowjang24]

loading, error state 추가에 대해 고려해주세요!

[snowjang24]

try catch!

[snowjang24]

변수 관리 너무 좋습니다!
객체형태로 관리해도 괜찮을 것 같아요!

[snowjang24]

activeTab으로 index를 기억하는 방식은 어떨까요 ?
Tab이면 TabItem중에 하나만 Active 한 상태를 가질 것 같아서요!

[snowjang24]

자주 쓰는 텍스트의 폰트 스타일을 빼줘서 쓰는것도 좋은 방법일 것 같습니다 !

[snowjang24]

paths 라는 단어보다 categories 같은 단어는 어떨까요 ? paths라고 하니 뭔가 한번에 이해가 안되는거 같아요!

[somedaycode]

categories가 이상하다는 생각에 path로 바꾸었는데 잘못 바꾸었네요 ㅎㅎㅎ 고치도록 하겠습니다!

[snowjang24]

질문에 대해 답변 드리자면,

1. 단순한 궁금점입니다. css module을 사용하는게 더 성능면에서 좋다고 들었습니다. 현재 styled-components를 활용하여 개발을 진행하고 있습니다. 너무 많은 styled components를 만드는게 아닌가? 그런 생각이 계속 드네요. 아직 잘 활용을 못하기도 하고, css를 import해서 사용하던게 익숙해서 그런지 아직까지 css in js가 어렵게 느껴집니다. 현업에서는 어떤 방식을 더 많이 사용하는지 궁금합니다.

   • 이 래딧 포스트가 도움이 될 것 같습니다.
   • 개인적인 소견으로는, 성능 차이를 겪을 만큼의 문제를 아직 겪지 못했고, 생산성 측면에서 월등히 높은 스타일 컴포넌트 방식을 선호합니다.
     • 우선 개발 빠른 개발 이후 성능 이슈를 겪는다면 해당 부분에 대해서만 CSS Modules를 도입하는 등 여러 방식으로 개선할 수 있기 때문에 저는 생산성에서 월등한 styled-components를 사용합니다.,
   • 만약 styled방식이 불편하면 Emotion 방식의 inline css-in-js 스타일도 괜찮은 대안이 될 수 있으니 세 방법 중에 편한 걸 선택하시면 됩니다.
     • 참고로 styled-component 또한 emotion 처럼 css메서드를 제공합니다!
     • 저는 주로 styled-component라이브러리를 쓰며, 두 styled와 css 메서드를 함께 사용하고 있습니다.

2. useState의 초기값으로 null값이나 []을 사용하고 있는데, 최초 렌더링시 에러처리를 이런 형태로 하는게 괜찮은지 궁금합니다.

   const Component = () => {
       const [data, setData] = useState(null);
       if (!data) return null; 
       return <OtherComponent data={data} />
   
    }

   • 코드 중간에 리뷰해드리기는 했지만, 데이터를 fetching 할때, 상태를 세 가지(pending, fulfilled, rejected)와 같이 나누는 것이 좋습니다.
   • 위의 상태에 따른 Loading component를 리턴하거나, error 문구 출력 등으로 최초 랜더링 시 문제도 자연스럽게 처리될 것으로 보입니다.

3. .env 파일을 생성해서 path alias 를 했을 때, vsCode에서 컴포넌트를 auto import 할 때, 여전히 상대경로로 import가 되고 있는데 다른 설정이 필요한지 궁금합니다. 그리고 command 키를 이용해서 컴포넌트 내부로 들어갈 수 있어서 편리했는데, 설정을 하고나니 이걸 사용할 수 없게 되어 불편했습니다. 어떤식으로 검색해서 방법을 찾으면 좋을지 모르겠습니다.

• 보통은 vscode가 프로젝트 파일 내에 jsconfig 파일을 탐색하고 이를 기준으로 eslint나 prettier를 설정하는데, 문제가 있는 것 같군요 혹시 아래의 설정도 안될까요 ?

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "*": ["src/*"]
     }
   }
 }

[somedaycode]

안녕하세요 리뷰를 맡은 스노우입니다. ☃️

전체적으로 컴포넌트 나누기나, 로직 분리가 너무 잘되어 있어 코드 읽는데 불편함 없이 너무 편하게 봤네요, 저보다 더 잘하시는거같아요! 👏👏👏

남은 진행사항들 완성하면 다시 한 번 코드를 구경하러 오고 싶군요 😃

안녕하세요.
정말 상세한 답변 감사드립니다. 항상 감사하게 생각하고 있어요.

웹폰트 로딩방법이나 에러처리 부분들을 더 공부하고 중복을 최대한 줄여야겠다는 생각이 드네요

또, 아직 부족하지만 칭찬해주시니 더 열심히 해야겠다는 생각도 드네요 ㅎㅎ

다음 PR에 말씀해주신 부분들 수정해서 올리겠습니다!