5주차 멘토링

💡 Q&A

• 프론트엔드 최적화 하려면 어떤걸 해야하나?
  • network에서 유난히 용량이 많이 먹는 것을 찾는다.
• 폰트 새로고침시 캐시날아가면 적용안됨
• 프론트엔드 테스트
  • jest 사용
  • useAutoComplete 단위 테스트 해보면 좋을 것 같다, useDebounce도 10번 호출하면 1번만 가는지 테스트
  • e2e 테스트 -> playwright test
  • 테스트는 외부모듈이 들어오면 어려워짐. jest의 경우 모킹이 중요하다

🔥 피드백

• 점수 산정 공식 넣어주는게 좋다
• 왜 선택했는지 다른 것과 비교해서 써라 ⇒ 꼭 물어본다 왜 이거안쓰고 이거 썻나요?
• 썸네일 큐브 색깔 넣으면 좋을 것 같다
• css filter grayscale , drop-shadow 이용해서 큐브 그림자 처럼 보이게 하고 둥둥 떠다니게 ㄱㄱ
• lighthouse 100점, seo 최적화 자랑해도 된다. seo 국제화 자랑해도 된다.
• 사용자에 따라 og이미지 다르게 하면 좋을 것 같다. dynamic open graph 이미지
• next router에 event를 캐치할 수 있다. routeChangeStart 하면 로딩 start routeChangeEnd 로딩 end
• 정보를 가져올 수 없는 유저의 경우 백엔드에서 err 메세지 받아서 표시해 줘야함
• 소개 메인페이지 gif 업데이트 필요

⌨️ 코드리뷰

• ul 안에 div를 빼야한다. contribution history
  • key로 idx 쓰지 말기
  • 테마에 따라 레벨을 만들면 안좋음
  • prop로 예측할 수 없는 값만큼 클래스가 생김 ⇒ 스타일 컴포넌트 주의사항 ⇒ 대안 vanilla-extract ⇒ 똑같이 props를 받지만 클래스를 만드는 것이 아닌 css 변수를 인라인으로 넘겨줌
    • inline 스타일로 하는게 하는게 좋음
    • styled-component는 실행할때마다 클래스를 만들지만 vanillar-extract는 미리 style 시트를 만들어 놓은 다음에 css 변수를 inline으로 넘겨주는 것 같다