1. 상품 목록 미션
1.1. PR 링크
상품 목록 미션 1단계 PR 링크: https://github.com/woowacourse/react-shopping-products/pull/109
1.2. 회고
이번 페어는 전, 현 데일리 미팅조이자 연극조인 크루와 함께 했다. 함께 리액트 딥다이브, PR 리뷰 스터디를 하는 크루이기도 해서 함께 코드를 작성하며 미션을 해보는 게 재밌고 흥미로웠던 주간이다.
미션 시작 날, 오전 수업이 끝나고 점심을 먹고 난 뒤 공원의 <페어프로그래밍 20분 아이스브레이킹 같이 해보기> 수업이 무중력 광장에서 진행됐다.
30분 정도 페어와 함께 설문을 작성하며 스타일을 먼저 파악하고 맞춰보는 시간이었다.
작성한 설문이다. 스타일 궁합이 완전히 정반대가 나오는 게 시작도 전에 좀 웃겼다 ㅋㅋ
그렇게 아이스 브레이킹 수업이 끝난 뒤 바로 노션에 페어 프로그래밍 계획표를 정리했다. 그 중에 일부를 가져와봤다.
페어 룰
우선 순위
학습
- 공통: 리액트에서 API 비동기 요청 처리
- 재오: 타입스크립트로 최대한 타입을 빈틈없이 좁히기
- 카멜: 상태 책임 분리에 대한 스스로의 기준을 정립
협업
- 공통: 비판적으로 받아들이기
- 재오: 중간중간 의논한 내용 문서화
코드 작성 사이클: 일단 기능 구현 후 리팩토링
고민 최대 시간: 1시간
고민 최대 시간 초과 시 결단 방법: 가위바위보
논의점 정리
논점 1. cartItems 의 상태를 어떻게 관리할까?
사고 흐름: cartItems의 상태를 어떻게 관리할까? → 어디서나 유지되고 조회되는 값이 있다 → context로 관리! → cartId가 POST된 시점에 알 수 없다 → refetch 함수 작성
야그니 결단: context 로 관리하고 refetch 함수 작성
논점 2. 에러의 상태를 어떻게 관리할까?
사고 흐름: 한 페이지 내에서 여러 컴포넌트가 비동기적으로 에러를 던질 수 있다 → 에러 토스트 메세지는 ProductList 내에 띄워져야한다 → 어디서든 조회하고 에러를 던질 수 있게 전역으로 관리해야할 것 같다 → 에러 바운더리도 생각을 했으나 개짜침 → 그래서 선택하지 않고, 차선책으로 loading 상태를 만들어 렌더링을 일으켜볼 생각 → ErrorToast 는 내부에서 setTimeout과 컴포넌트 or null을 반환하는 함수로 구성되어 있다 → 마운트된 시점에 컴포넌트를 렌더링하고 3초 뒤 null 을 반환함 →
의심되는 점:
- 전역 상태의 에러가 최선일까?
- 에러가 사라지지 않았는데 ErrorToastMessage 컴포넌트가 사라질 때 Error 객체의 isError 상태를 false로 바꿔주는 것이 괜찮은가?
try:
- loading 상태를 만들기
- 에러 상태 만들기
야그니 결단: ErrorToastMessage 컴포넌트가 닫힐 때 Error 객체의 isError 상태를 false로 바꿔준다
학습 키워드
- emotion - theme
- 리액트 비동기 API 요청
-
basicAuth(http, Basic). API 토큰 요청 - contextAPI
- createContext 의 초기값을 null 로 줘야한다.
1.3. 수업 메모
첫 번째 수업 메모 링크: https://fantasy-pirate-bd2.notion.site/0513-1f291b23402b80e9884ff62051ec5777?pvs=4
두 번째 수업 메모 링크: https://fantasy-pirate-bd2.notion.site/SSoT-1f591b23402b80acbe3cc2bd09a6550d?pvs=4
대략 이렇게 문서화를 하면서 페어를 진행했더니 확실히 짚고 넘어갈 수 있고 학습 포인트를 놓치지 않을 수 있으면서, 컨벤션과 약속을 의식적으로 유지할 수 있어서 좋았다.
1.4. KTP 회고
이번 미션은 참 재밌게 진행할 수 있었지만, 한 가지 아쉬웠던 점은 학습 우선 순위였던 '비동기 API' 에 대해 생각보다 깊게 학습할 시간이 없었다는 것이다.
UI를 만들고 기능을 구현하고 비동기 요청 테스트 코드를 작성하는데만 해도 시간이 꽤 걸려서 학습 부채를 많이 남기고 '야그니!' 를 많이 외쳤던 것 같다.
그래서 느꼈던 점을 KTP로 짧게 회고해보자면 아래와 같다.
Keep
- 페어와 매일 회고하고 논의점과 사고흐름을 그때그때 정리하며 문서화를 잘 해두었던 점이 좋았다.
- 전역 css의 관리와 스타일 컴포넌트의 컨벤션을 세워가며 작성했던 점
- 드라이버와 네비게이터의 역할을 충실히 수행했다. 논의는 코드 작성 전에 충분히 하고, 코드 작성에 들어가면 드라이버의 자아를 없애는 것으로 정해두었고 잘 지켜졌다.
Try
-
비동기 API 학습 시간을 일정에 명확히 반영하여, 기능 구현 시간뿐만 아니라 학습 시간도 확보할 수 있도록 계획을 개선해보자.
-
Todo List 작성 시, 기능 구현뿐만 아니라 학습할 내용과 예상 학습 시간도 함께 기록하여, 학습 시간도 확보해보도록 시도해보자.
-
테스트 코드 작성 시간을 좀 더 널널하게 확보해야겠다.
Problem
- Todo List 로 할 일을 작성하고 타임라인을 구성하는 데에 있어서, 실제 걸리는 시간을 현실적으로 잡지 못했던 것 같다.
- 학습 목표로 세웠던 것들이 여전히 학습 부채로 남아있게 되었다.
2. 스터디
2.1. three.js 스터디 (5/12)
이번 three.js 스터디의 학습 과제는 라이팅이었다.
• Light 종류 이해하기 (Ambient, Directional, Point Light)
• 빛과 그림자의 관계
• "Directional Light를 사용해 입체감을 준 씬 만들기"
가 학습 키워드였는데, 라이팅을 적용하기 전 제대로된 모델을 띄워놓고 학습해보고 싶었다. 그래야 light의 실제 적용과 사용의 감각을 익힐 수 있을 것 같았기 때문이다.
그렇게 찾아보고 사용하게된 vrin. image to 3d modeling을 해주는 AI 인데, 재작년? 작년? 쯤에 써봤을 때와 달리 엄청 발전한 것 같다.
1차 gpt 생성 이미지
2차 포토샵 가공 이미지
결과물
👇
three.js 렌더링 영상: https://youtu.be/7d6yhFUCzKI
추천 AI 3D 모델링 사이트 : https://vrin.co.kr/
이렇게 만족스러운 모델을 띄워놓고 DirectionalLight 를 중점적으로 공부하니 c4d 공부할 때 생각도 나고 재밌었다.
2.2. PR 리뷰 스터디(5/12)
리액트 첫 미션인 페이먼츠의 PR 리뷰 스터디를 진행했다.
크루들의 리뷰어 피드백에서 공통적으로 나왔던 내용들을 추출해보면 막상 Javascript 미션 때와 비슷했던 것 같다.
공통 피드백
- input, label, for, aria-label,role 등 잘 활용하기
- 시맨틱 태그 적절하게 잘 활용하기 (form, button)
- 라우터 종류에 대해 학습하기
- styled component 의 구분 (ex. S. 네임스페이스 사용)
- 마르코의 colocation 방식의 디렉터리 구조 제안
- 파생 상태는 상태가 아닌 반환값으로 처리
- useEffect 사용 최소화
참고 문서
- 리뷰어 - 리액트 라우터 문서 공유 BrowserRouter 외에도 react-router에서 제공하는 다른 라우터 방식이 있는데, 각 차이점과 선택 기준에 대해서 정리해보시면 좋을 것 같아요. https://reactrouter.com/api/declarative-routers/Router
- 다른 크루의 퍼널 구현을 보고 따로 찾아본 퍼널 자료 토스 SLASH23 의 useFunnel 영상: https://youtu.be/NwLWX2RNVcw npm 주소 : https://www.npmjs.com/package/@use-funnel/react-router
2.1. 모던 리액트 딥다이브 스터디(5/17)
(작성 시점 기준 아직 스터디를 안함...스터디 끝나고 추가 예정)
카레
멜론