💫우아한테크코스 6기 미션 아카이빙

Index

• 레벨1
  • 🚗자동차 경주 미션
  • 🎫로또 미션
  • 🍱점심 뭐먹지 미션
  • 🍿영화 리뷰 미션
• 레벨2
  • 💳페이먼츠 미션
  • 👛페이먼츠 모듈 미션
  • 🛒장바구니 미션
  • 🛍️상품 목록 미션
• 레벨3~4 팀프로젝트
  • 🔍리뷰미 프로젝트
• 레벨4
  • ⚡성능 최적화 미션
  • 😄웹 접근성 미션
  • 🎀SSR 미션

---

레벨1

🚗자동차 경주 미션

미션 소개

바닐라 js로 구현 하는 콘솔 기반 자동차 경주 게임을 구현한다.

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🐋1단계 미션 pr 바로가기
• 🌊 2단계 미션 pr 바로가기

🎫로또 미션

미션 소개

1단계에서는 TDD를 적용한 콘솔 기반 로또 게임을 구현한다. 2단계에서는 1단계를 리팩토링한, ui와 도메인이 분리된 웹 기반 로또 게임을 구현한다.

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋1단계 미션 pr 바로가기
• 🌊 2단계 미션 pr 바로가기
• 🦭블로그 바로가기

🍱점심 뭐먹지 미션

미션 소개

바닐라 js,ts를 사용헤 캠퍼스 주변의 점심 식사 스팟 목록을 관리하는 앱을 구현한다.(바닐라 js로 컴포넌트를 만든다.)

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋1단계 미션 pr 바로가기
• 🌊 2단계 미션 pr 바로가기

🍿영화 리뷰 미션

미션 소개

REST API 를 이용하여 영화 목록 조회, 검색 기능을 가지며 네트워크 오류 과정을 다루는 영화 페이지를 구현한다.

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋1단계 미션 pr 바로가기
• 🌊 2단계 미션 pr 바로가기
• 🦭블로그 바로가기

레벨2

• 레벨2 미션 회고 블로그 바로가기

💳페이먼츠 미션

미션 소개

재사용 가능한 컴포넌트,훅을 사용해 동적 입력이 가능한 페이먼츠 앱을 구현한다.storybook을 사용한 컴포넌트의 다양한 상태 테스트를 진행한다.

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋1단계 미션 pr 바로가기
• 🌊 2단계 미션 pr 바로가기

👛페이먼츠 모듈 미션

미션 소개

재사용 가능한 모듈화된 컴포넌트와 커스텀 훅을 개발하고, npm에 배포한다. Storybook, RTL을 활용해 컴포넌트 문서화와 테스트 시나리오를 작성한다.

• Modal 구현 모습

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🤓Hooks npm 패키지 바로가기
• 🤓Modal npm 패키지 바로가기
• 🖱️Modal Storybook 보러가기
• 🐋1단계 미션pr 바로가기
• 🌊 2단계 미션 pr 바로가기

🛒장바구니 미션

미션 소개

API를 호출해 장바구니 미션에 필요한 데이터를 가져오고,Recoil를 사용한 장바구니 상태와 적용된 쿠폰 상태 관리를 진행해 장바구니 앱을 구현한다. RTL을 활용해 주요 기능에 대한 테스트를 작성한다.

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋1단계 미션pr 바로가기
• 🌊 2단계 미션 pr 바로가기

🛍️상품 목록 미션

미션 소개

React Query를 사용해 서버 상태를 관리한다. 상품 조회,상품 정렬 및 필터링, 장바구님 담기, 상품 담기 버튼을 통한 장바구니 수량 조절 기능을 만든다. 이때 상품 목록을 무한 스크롤 방식으로 동작한다. MSW를 사용해 API 요청을 모킹하고 RTL을 사용해 비동기 작업에 대한 테스트 코드를 작성한다.

미션 관련 아카이빙

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋1단계 미션pr 바로가기
• 🌊 2단계 미션 pr 바로가기

레벨3~4 팀프로젝트

리뷰미 프로젝트 사이트 및 저장소

• 🥳리뷰미 배포 페이지 바로가기
• 🤗리뷰미 저장소 바로가기
• 🥰리뷰미 팀 블로그 가기

리뷰미 프로젝트 활동 내역

• 2024.07~08 리뷰미 서비스 기획 및 핵심 기능 구현
• 2024.08.21 리뷰미 서비스 version 1.0.0 배포
• 2024.09~ 런칭 시 사용자 피드백 반영한 수정 및 성능 개선
• 반응형 추가, 비밀번호 토큰 사용, 성능 개선
• 2024.10 성능 최적화 및 웹 접근성 개선, 모아보기 페이지 기능 추가(차트,형광펜 기능 추가)

블로그

• CSS-in-JS 속성 정렬 자동화: Stylelint 설정 및 문제 해결 방법
• 우테코 6기- 팀프로젝트 회고1 : 첫 만남보다 기획이 더 어려워
• 우테코6기 '리뷰미'팀의 작은 실험들
• Webpack,jest에서 MSW 적용하기
• AWS CodePipeline으로 CD 구축
• 리뷰미 프로젝트 기획 및 리뷰미 version 1.0.0 소개
• 프론트 엔드의 에러 핸들링 전략
• 우테코 레벨3 방학- 리팩토링 몰입 후기
• 프론트 엔드의 성능 최적화
• 웹/모바일에서 형광펜 기능 구현하기

레벨4

⚡성능 최적화 미션

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋미션pr 바로가기

😄웹 접근성 미션

• 🗂️깃허브 저장소 바로가기
• 🌟 미션 배포 페이지 바로가기
• 🐋미션pr 바로가기

🎀SSR 미션

• 🗂️깃허브 저장소 바로가기
• 🐋1단계 미션pr 바로가기
• 🐳2단계 미션pr 바로가기