참여자: 김나영 멘토님 외 [프2팀] 4명

일시: 8월 8일

📷 인증사진

📚 JIRA

현재 JIRA를 프론트/백엔드가 같이 사용하는데 이 때문에 백로그 구분이 잘 안 되는 것 같습니다. 현업에서 이 문제를 어떻게 해결하나요?

• 두 도메인에서 같은 에픽을 사용하고 스토리 단위에서 백로그 제목에 [Web], [Backend] 등을 붙여서 구분한다.
• 현재 JIRA 백로그 구조가 잘 나뉘어졌지만, 네이밍만 기능 외 작업 등으로 바꿔보는게 좋을 것 같다.
• 추가사항:
  • 이슈연결을 잘 활용하면 현재 진행도 확인이 용이해진다.
  • is blocked by, blocked를 표시하면 어떤 작업이 다른 작업의 선결조건인지 알기 쉽다.

⚛️ ATOMIC DESIGN

1. 초기에 산출한 컴포넌트들은 어디에 정리를 할까요? (컴포넌트 문서화)
   • Source of Truth 라는 문서에 주로 정리를 한다.
   • 주로 피그마가 Source of Truth 이 된다
2. 규모는 atom 단위지만 재사용성이 낮은 컴포넌트들까지도 컴포넌트화해야될까요?
   • atom은 기왕이면 도메인에 대한 의존성이 없도록 설계하는 것이 좋다.
   • 따라서 도메인에 묶인 규모가 작은 컴포넌트들은 molecule이나 organism 컴포넌트 폴더에 두면 좋다.
   • 추가사항:
     • 현재 몇 군데에서 기준에 혼란이 온 것 같은데, 리팩토링을 하면서 atomic 구조를 바꿔보는 것도 좋을 것 같다.

🎨 FIGMA

1. Figma에 추가로 기재할 사항이 있는지 궁금합니다.

   • 컴포넌트 명세와 대응되는 Figma 컴포넌트들

   • 인터렉티브 스타일에 관한 것도 명세하면 좋을 것 같다.

     disabled 되었을 때 버튼의 스타일 등등

   • 컴포넌트 스토리에 관한 것도 상세하게 적어주면 좋을 것 같다.

     이미지가 로드되기 전까지 skeleton이 나타난다. 버튼을 클릭하면 loading 상태가 되면서 disabled 된다.

   • 이 외에도 edge-case 들도 정리해두면 좋다.

🖥️ 활용 가능한 기술들

1. 현재 access token 을 로컬 스토리지에 저장 중인데, access token을 local storage 에 저장하는 것이 올바른 사용법인가요?
   • 현업에서는 Local Storage와 Cookie 모두 쓴다.
   • 혹시 탈취 때문에 걱정 중이라면 암호화 모듈을 한번 거쳐서 local storage에 저장하면 된다.
   • Next.js 의 경우 세션에 저장하거나, 서버 사이드 랜더링에서는 getServerSideProps를 활용하기도 한다.
2. Next.js 와 함께 쓸 수 있는 좋은 전역상태 Tool이 뭐가 있을까요?
   1. Recoil과 React querry를 많이 쓴다!
   2. Recoil 은 코드양이 적어 쓰기 편하다.
      • Recoil 은 서버사이드 렌더링에서 계속 error 가 나는데, 이 부분은 어떻게 해결할까요? ⇒ 그냥 쓴다!
   3. React querry는 라이브러리 자체가 가벼워 쓰기 좋다
3. 이미지 캐싱을 해볼 유용한 라이브러리가 있을까요?
   • service worker: 유용하지만 학습이 좀 필요한 기능이다.
   • 일단은 lazy load 를 도입해보는게 좋을 것 같다.
     • prefetch: 리소스를 사전에 fetching을 하는 방법
     • intersection observable: skeleton 사용시 유용

➕추가 보완사항

1. Readme 정리하기
2. 컴포넌트 Interaction 구현
3. util 코드들 테스트 코드화
4. 유저스토리 edge-case 기재하기
5. 리팩토링 할만한 부분들 리스트업 해두기 (TODO 주석도 좋아요)
6. 코드만으로 이해하기 어려운 부분은 주석으로 설명을 달아두기
7. 체험형 msw 로 api mocking 모듈 써보기