레벨 3에서 만든 프로젝트의 성능 개선과 접근성 개선을 달성합니다.
2024.09.03 - 2024.10.25
| 스프린트 | 공통 요구사항 | 학습 키워드 |
|---|---|---|
| 5️⃣ 🏃 |
- 성능 리포트 작성 및 성능 최적화 작업 진행 |
- LightHouse - 가변 다이나믹 서브셋(웹폰트) - 로딩 최적화: gzip, brotli, uglify, minify, webp, webm, cache, tree shaking - 렌더링 최적화: reflow, repaint, memoization |
| 6️⃣ 🏃 |
- 접근성 개선 계획 수립 후 개선 작업 진행 |
- ARIA |
2주 단위의 스프린트를 총 4회 진행하며 공통 요구사항을 수행하고,
스스로 정의한 문제를 팀원과 함께 해결해 나갑니다.
2024.07.03 - 2024.08.23
| 기능 | 설명 |
|---|---|
| 공고 생성 및 수정 |
- 공고 상세 정보와 지원자에게 받을 지원서 양식을 작성하여 공고를 생성할 수 있습니다. - 생성된 공고는 퍼블릭 URL로 게시되어 누구나 접근할 수 있습니다. |
| 지원자 관리 |
- 이름 검색, 정렬, 필터링 기능을 통해 원하는 지원자를 빠르게 찾을 수 있습니다. - 각 지원자에 대해 모집 단계 변경, 불합격 처리, 이메일 전송 등의 기능을 제공하며, 다중 선택 작업도 지원합니다. |
| 지원자 상세 정보 모달 |
- 지원자가 제출한 지원서(자기소개서)를 검토하고 평가를 작성할 수 있는 창입니다. - 이 모달에서 모집 단계를 변경하거나 불합격 처리를 진행할 수 있으며, 이는 칸반 보드와 동일한 방식으로 동작합니다. |
| 공고 및 지원서 보기 | - 지원자는 리크루터가 생성한 공고의 상세 정보를 확인하고 필요한 정보를 입력하여 지원할 수 있습니다. |
| 스프린트 | 공통 요구사항 | 기술 스택 |
|---|---|---|
| 1️⃣ 🏃 |
- Webpack 기반의 React & TypeScript 환경 세팅 - 개발(코드 컨벤션 등) 문서 만들기 - 스타일링 방법 선택 및 이유 정리 |
- Webpack + React + TS - Emotion - Tanstack Query |
| 2️⃣ 🏃 |
- AWS에서 프론트엔드 리소스 빌드 및 배포 환경 구축 - 테스트 전략 수립 및 CI 프로세스 정립 |
- CloudFront + S3 - GitHub Action - Storybook |
| 3️⃣ 🏃 |
- 모니터링 및 디버깅할 수 있는 환경 구축 |
- Sentry |
| 4️⃣ 🏃 |
- 운영 개발 서버 빌드 및 배포 환경 구분 - 시맨틱 버저닝 적용, 사용자가 가장 최신 배포 버전을 항상 바라볼 수 있도록 세팅 |
- Webpack `contenthash` - CloudFront `cache invalidation` |
레벨 1과 레벨 2에서는 하나의 미션을 2단계로 진행하며
페어 프로그래밍으로 피드백 주기를 줄이고, (step 1)
코드 리뷰를 통해 소통하며 코드 품질을 높이는 경험을 쌓습니다. (step 2)
2024.02.13 - 2024.04.01
| 미션 | 저장소 | PR(코드리뷰) | 학습 키워드 |
|---|---|---|---|
| 👟 상품 목록 | repo | step1 step2 |
- react query - msw mocking - 사용하는 라이브러리가 바뀌어도 변경이 적은 구조 고민하기 |
| 🛒 장바구니 | repo | step1 step2 |
- recoil - 전역 상태와 파생 상태 구분하기 |
| 💳 페이먼츠 모듈 | repo | step1 step2 |
- 컴포넌트와 훅 로직을 npm에 배포하기 - 어떤 props를 만들어야 할지 DX 측면에서 고려하기 - 복잡한 카드 브랜드 검사 로직 객체로 추상화 하기 |
| 💳 페이먼츠 | repo | step1 step2 |
- Storybook을 사용한 컴포넌트 테스트 - Form의 기능을 커스텀 훅으로 관리하기 |
| 개발 밖의 '나'를 계발해야 하는 이유 | link | - | - |
2024.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 | - | - |