1️⃣ 면담 일지
참여자: 김나영 멘토님 외 [프2팀] 4명
일시: 8월 8일
📷 인증사진
📚 JIRA
현재 JIRA를 프론트/백엔드가 같이 사용하는데 이 때문에 백로그 구분이 잘 안 되는 것 같습니다. 현업에서 이 문제를 어떻게 해결하나요?
- 두 도메인에서 같은 에픽을 사용하고 스토리 단위에서 백로그 제목에 [Web], [Backend] 등을 붙여서 구분한다.
- 현재 JIRA 백로그 구조가 잘 나뉘어졌지만, 네이밍만
기능 외 작업등으로 바꿔보는게 좋을 것 같다.
- 추가사항:
- 이슈연결을 잘 활용하면 현재 진행도 확인이 용이해진다.
is blocked by,blocked를 표시하면 어떤 작업이 다른 작업의 선결조건인지 알기 쉽다.
⚛️ ATOMIC DESIGN
- 초기에 산출한 컴포넌트들은 어디에 정리를 할까요? (컴포넌트 문서화)
Source of Truth라는 문서에 주로 정리를 한다.- 주로 피그마가
Source of Truth이 된다
- 규모는 atom 단위지만 재사용성이 낮은 컴포넌트들까지도 컴포넌트화해야될까요?
- atom은 기왕이면 도메인에 대한 의존성이 없도록 설계하는 것이 좋다.
- 따라서 도메인에 묶인 규모가 작은 컴포넌트들은 molecule이나 organism 컴포넌트 폴더에 두면 좋다.
- 추가사항:
- 현재 몇 군데에서 기준에 혼란이 온 것 같은데, 리팩토링을 하면서 atomic 구조를 바꿔보는 것도 좋을 것 같다.
🎨 FIGMA
- Figma에 추가로 기재할 사항이 있는지 궁금합니다.
- 컴포넌트 명세와 대응되는 Figma 컴포넌트들
- 인터렉티브 스타일에 관한 것도 명세하면 좋을 것 같다.
- 컴포넌트 스토리에 관한 것도 상세하게 적어주면 좋을 것 같다.
- 이 외에도 edge-case 들도 정리해두면 좋다.
disabled 되었을 때 버튼의 스타일 등등
이미지가 로드되기 전까지 skeleton이 나타난다. 버튼을 클릭하면 loading 상태가 되면서 disabled 된다.
🖥️ 활용 가능한 기술들
- 현재 access token 을 로컬 스토리지에 저장 중인데, access token을 local storage 에 저장하는 것이 올바른 사용법인가요?
- 현업에서는 Local Storage와 Cookie 모두 쓴다.
- 혹시 탈취 때문에 걱정 중이라면 암호화 모듈을 한번 거쳐서 local storage에 저장하면 된다.
- Next.js 의 경우 세션에 저장하거나, 서버 사이드 랜더링에서는 getServerSideProps를 활용하기도 한다.
- Next.js 와 함께 쓸 수 있는 좋은 전역상태 Tool이 뭐가 있을까요?
- Recoil과 React querry를 많이 쓴다!
- Recoil 은 코드양이 적어 쓰기 편하다.
- Recoil 은 서버사이드 렌더링에서 계속 error 가 나는데, 이 부분은 어떻게 해결할까요? ⇒ 그냥 쓴다!
- React querry는 라이브러리 자체가 가벼워 쓰기 좋다
- 이미지 캐싱을 해볼 유용한 라이브러리가 있을까요?
- service worker: 유용하지만 학습이 좀 필요한 기능이다.
- 일단은 lazy load 를 도입해보는게 좋을 것 같다.
- prefetch: 리소스를 사전에 fetching을 하는 방법
- intersection observable: skeleton 사용시 유용
➕추가 보완사항
- Readme 정리하기
- 컴포넌트 Interaction 구현
- util 코드들 테스트 코드화
- 유저스토리 edge-case 기재하기
- 리팩토링 할만한 부분들 리스트업 해두기 (TODO 주석도 좋아요)
- 코드만으로 이해하기 어려운 부분은 주석으로 설명을 달아두기
- 체험형 msw 로 api mocking 모듈 써보기