- 2024.02.17 ~ 2024.04.05
- 작은 규모의 어플리케이션들을 만들어보면서 JavaScript/TypeScript 언어의 주요 문법들을 깊이 있게 학습한다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- E2E 테스트와 단위 테스트 코드를 작성해보고, 이를 기반으로 리팩터링하며 테스트 코드의 필요성을 경험해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
- '경쟁'과 '비교'가 아니라 → ‘함께 자라기’ 위한 방법을 고민하며, ‘스스로의 성장’에 집중한다.
- 페어 프로그래밍으로 피드백 주기를 줄이고 코드 리뷰를 통해 소통하며 코드 품질을 높이는 경험을 쌓는다.
| step | name | repository | PR | 학습 목표 | pair |
|---|---|---|---|---|---|
| 1-1 | 자동차 경주(1) | 자동차 경주 - step 1 | step 1 | - Github에서 실제 코드 리뷰를 진행하는 방법을 학습한다. - 일관된 코딩 스타일을 유지하며 코딩 컨벤션을 준수하기 위한 습관을 만든다. - 기능이 정상적으로 작동하는지 검증하기 위한 테스트 코드를 작성하는 방법을 배운다. - 큰 함수를 작은 단위로 나누어 가독성과 유지보수성을 향상시키는 방법을 배운다. |
프룬 |
| 1-2 | 자동차 경주(2) | 자동차 경주 - step 2 | step 2 | ||
| 2-1 | 로또 게임(1) | 로또 - step 1 | step 1 | - UI와 도메인 영역을 분리할 수 있는 설계를 고민해보고, 목적에 맞게 객체와 함수를 활용한다. - 단위 테스트를 기반으로 점진적으로 리팩터링 한다. |
토다리 |
| 2-2 | 로또 게임(2) | 로또 - step 2 | step 2 | ||
| 3-1 | 점심 뭐먹지(1) | 점심 뭐 먹지 - step 1 | step 1 | - 어플리케이션을 컴포넌트 단위로 모듈화하여 개발한다. - TypeScript의 기본 문법을 익히며 필요성을 경험한다. |
올리 |
| 3-2 | 점심 뭐먹지(2) | 점심 뭐 먹지 - step 2 | step 2 | - 사용자 관점에서 중요하다고 생각하는 기능을 스스로 정의하고 E2E 테스트로 검증해본다. | |
| 4-1 | 영화 리뷰(1) | 영화 리뷰 - step 1 | step 1 | - API 연동을 위한 테스트 환경을 경험한다. - 실제 동작하는 API를 통한 비동기 통신을 경험한다. - UX 경험 개선을 위한 더 보기(페이징)를 구현한다. |
파슬리 |
| 4-2 | 영화 리뷰(2) | 영화 리뷰 - step 2 | step 2 |
- [우아한테크코스] - 자동차 경주 미션 step1 회고
- [우아한테크코스] - 자동차 경주 미션 step2 회고
- [우아한테크코스] - 로또 미션 step1 회고
- [우아한테크코스] - 로또 미션 step2 회고
- [우아한테크코스] - 점심 뭐 먹지 회고
- [우아한테크코스] - lv1 회고
- 2024.04.16 ~ 2024.06.14
효과적인 프로그래밍 학습 방법에 대해 고민해보고 개발 과정에서의 재미와 성취감을 경험하기
- 레벨1보다 복잡한 규모의 어플리케이션을 React와 TypeScript를 이용해 만들어본다.
- 스토리북을 통하여, 컴포넌트 단위로 피드백을 받기 위한 테스트의 필요성을 경험해본다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
| step | name | repository | PR | 학습 목표 | pair |
|---|---|---|---|---|---|
| 1-1 | 페이먼츠(1) | 페이먼츠 - step 1 | step 1 | - 재사용 가능한 Input Component를 개발한다. - Storybook을 통해 컴포넌트의 상태들을 시각적으로 테스트한다. - 카드 정보를 효과적으로 렌더링 하기 위한 상태 관리를 경험한다. |
월하 |
| 1-2 | 페이먼츠(2) | 페이먼츠 - step 2 | step 2 | - 다양한 Form 구성 요소들간의 상태를 효율적으로 관리한다. - hooks API를 이용하여 상태 관리 로직을 구현한다. - 커스텀 훅을 통해 Form 로직을 컴포넌트에서 분리 후 재사용한다. - Controlled & Uncontrolled 개념을 활용해 Form을 다룬다. |
|
| 2-1 | 페이먼츠 모듈(1) | 페이먼츠 모듈 - step 1 | step 1 | - 재사용 가능한 모듈(모달, 커스텀 훅)을 만들어 npm에 배포한다. - Storybook과 RTL을 활용해 컴포넌트 및 훅을 테스트 한다. |
마스터위 |
| 2-2 | 페이먼츠 모듈(2) | 페이먼츠 모듈 - step 2 | step 2 | - 모듈화된 컴포넌트의 재사용성 및 확장성을 경험한다. - 실제 프로젝트에서의 컴포넌트를 통합 및 활용하는 경험을 해본다. - 요구사항 변경에 따라 컴포넌트를 개선하는 경험을 해본다. |
|
| 3-1 | 장바구니(1) | 장바구니 - step 1 | step 1 | - Recoil을 사용하여 클라이언트 상태를 관리할 수 있다. - RTL을 활용하여 주요 기능에 대한 테스트를 작성할 수 있다. |
바다 |
| 3-2 | 장바구니(2) | 장바구니 - step 2 | step 2 | - 복잡한 '파생' 상태를 관리한다. - RTL 테스트를 고도화한다. |
|
| 4-1 | 상품 목록(1) | 상품 목록 - step 1 | step 1 | - MSW를 사용하여 API 요청을 모킹하고 개발할 수 있다. - 비동기 작업(API 요청)의 상태를 관리하고, 비동기 요청 상태에 따라 적절한 UI를 보여줄 수 있다. - RTL을 사용하여 비동기 작업에 대한 테스트를 작성할 수 있다. |
소파 |
| 4-2 | 상품 목록(2) | 상품 목록 - step 2 | step 2 | - React Query를 사용하여 서버 상태를 관리할 수 있다. - API 연동 과정에서 발생하는 다양한 에러 상황에 대응하고 사용자에게 피드백을 제공할 수 있다. |