레벨 1과 레벨 2에서는 하나의 미션을 2단계로 진행하며
페어 프로그래밍으로 피드백 주기를 줄이고, (step 1)
코드 리뷰를 통해 소통하며 코드 품질을 높이는 경험을 쌓습니다. (step 2)
2023.04.16 - 2024.06.14
- 레벨1보다 복잡한 규모의 어플리케이션을 React와 TypeScript를 이용해 만들어본다.
- 스토리북을 통하여, 컴포넌트 단위로 피드백을 받기 위한 테스트의 필요성을 경험해본다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
| 미션 | 저장소 | PR(코드리뷰) | 학습 키워드 |
|---|---|---|---|
| 👟 상품 목록 | repo | step1 step2 |
- react query - msw mocking - 사용하는 라이브러리가 바뀌어도 변경이 적은 구조 고민하기 |
| 🛒 장바구니 | repo | step1 step2 |
- recoil - 전역 상태와 파생 상태 구분하기 |
| 💳 페이먼츠 모듈 | repo | step1 step2 |
- 컴포넌트와 훅 로직을 npm에 배포하기 - 어떤 props를 만들어야 할지 DX 측면에서 고려하기 - 복잡한 카드 브랜드 검사 로직 객체로 추상화 하기 |
| 💳 페이먼츠 | repo | step1 step2 |
- Storybook을 사용한 컴포넌트 테스트 - Form의 기능을 커스텀 훅으로 관리하기 |
| 개발 밖의 '나'를 계발해야 하는 이유 | link | - | - |
2023.02.13 - 2024.04.01
- 작은 규모의 어플리케이션을 만들어 보며 JS/TS 주요 문법을 학습한다.
- 웹 표준을 준수하는 UI를 구현하고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
- E2E 테스트와 단위 테스트 코드를 작성해보고, 이를 기반으로 리팩터링하며 테스트 코드의 필요성을 경험해본다.
| 미션 | 저장소 | PR(코드리뷰) | 학습 키워드 |
|---|---|---|---|
| 🎬 영화 리뷰 | repo | step1 step2 |
- 반응형 웹 구현하기 - 프론트엔드에서의 비동기 처리 - API 통신 시 발생 가능한 다양한 문제에 대응하기 |
| 🍴 점심 뭐 먹지 | repo | step1 step2 |
- 재사용할 수 있는 컴포넌트 - typescript - cypress를 활용한 E2E 테스트 |
| 💸 로또 | repo | step1 step2 |
- UI와 도메인 영역을 분리할 수 있는 설계 - 웹 컴포넌트 API - 웹 뷰에서 UI 고려하기 |
| 🚗 자동차 경주 | repo | step1 step2 |
- eslint - 단위 테스트(테스트하기 좋은 코드란?) - domain 로직과 view 로직 분리하기 |
| ✒️ 완벽주의에 대한 문제 인식하기 | link | - | - |