README.md

🚀 우아한테크코스 아카이브

2023.02 ~ 2023.11

5기 프론트엔드 쿠마(박영진)의 우아한테크코스 기록입니다.

레벨1 - JavaScript, Typescript, 테스트

레벨1 미션 목표

[1주 차] 자동차 경주 - 온보딩, 테스트

목표 경험

• Github 기반으로 온라인 코드 리뷰코딩 컨벤션을 준수하며 개발단위 테스트를 작성하며 개발함수(또는 메서드)를 분리하는 리팩터링

학습 키워드

• 단위 테스트
• JS 기초

[2~3주 차] 로또 - TDD와 리팩터링

목표 경험

• UI와 도메인 영역을 분리할 수 있는 설계를 고민해보고, 목적에 맞게 객체와 함수를 활용단위 테스트 기반으로 점진적인 리팩터링기본적인 웹 표준을 준수하는 웹 UI 개발

학습 키워드

• TDD
• 객체
• 함수
• OOP 기초
• HTML/CSS 기초
• 브라우저 이벤트 기초

[4~5주 차] 점심 뭐 먹지 - 컴포넌트

목표 경험

• 어플리케이션을 컴포넌트 단위로 모듈화하여 개발TypeScript의 기본 문법을 익히며 필요성을 경험UI 환경에서의 테스트

학습 키워드

• Component
• SPA
• TypeScript 기초
• E2E 테스트 기초

[6~8주 차] 영화 리뷰 - 웹앱

목표 경험

• 자바스크립트 언어의 비동기 개념 이해 및 활용API 통신을 처리할 때 기술적, UX적으로 고려해야 하는 케이스를 고민하고 개선TypeScript에 익숙해지며 보다 적극적으로 활용테스트 더블의 필요성 경험 및 적용

학습 키워드

• HTTP 기초
• RESTful API
• TypeScript 심화

NO.	PROJECT	REPOSITORY	PR	PAIR
1	자동차 경주 게임	javascript-racingcar-step1	PR	세인(이세민)
		javascript-racingcar-step2	PR
2	행운의 로또	javascript-lotto-step1	PR	야미(이다인)
		javascript-lotto-step2	PR
3	점심 뭐 먹지	javascript-lunch-step1	PR	타미(김태은)
		javascript-lunch-step2	PR
4	영화 리뷰	javascript-movie-review-step1	PR	코난(윤정민)
		javascript-movie-review-step2	PR

레벨2 - React, 상태관리, CDD

레벨2 미션 목표

[1주 차] 점심 뭐 먹지 - 리액트 온보딩

목표 경험

• 레벨1에서 구현하고 사용해본 점심 메뉴 애플리케이션을 React로 구현
• React 공식 문서를 단순히 학습이 아닌 구현 목적을 가지고 활용하고 공식 문서를 활용한 본인만의 접근 방식 만들기
• JS로 구현해본 컴포넌트를 React 컴포넌트로 작성

학습 키워드

• React 기초
• TDD

[2~4주 차] 페이먼츠 - 컴포넌트 주도 개발(CDD)

목표 경험

• 재사용 가능한 단위의 컴포넌트에 대한 기준 정의
• 스토리북을 이용해 컴포넌트 단위가 가지는 스토리에 대해 문서화하여 표현
• 컴포넌트 단위로, 어떤 스토리가 가능한지 이야기하기

학습 키워드

• TDD
• CDD
• Component
• Storybook
• Custom hook

[5~6주 차] 장바구니 - 복잡한 상태 관리, 라우팅

목표 경험

• 상태 관리 라이브러리를 사용하여 상태 관리를 구현할 수 있으며, 이를 통해 애플리케이션의 안정성과 유지 보수성 향상
• 다양한 테스트 도구를 스스로 비교 분석하고, 자신에게 가장 적합한 도구를 선정하여 활용
• MSW를 이용한 mocking을 통해 서버와의 연결전 준비

학습 키워드

• TDD
• State
• SPA

[7~9주 차] 장바구니 - 협업 미션

목표 경험

• 네트워크와 비동기 처리
• 타입스크립트를 이용한 데이터 포맷 설정
• 프론트엔드 배포
• 네트워크 상황, 비동기 처리에 따른 UI/UX 설계

학습 키워드

• MSW
• TypeScript
• 배포

NO.	PROJECT	REPOSITORY	PR	PAIR
1	다시, 점심 뭐 먹지	react-lunch-step1	PR	제로(강인영)
		react-lunch-step2	PR
2	페이먼츠	react-payments-step1	PR	레고(박정규)
		react-payments-step2	PR
		react-payments-step3	PR
3	장바구니	react-shopping-cart-step1	PR	도밥(이도현)
		react-shopping-cart-step2	PR
4	쇼핑 주문 (협업)	react-shopping-cart-prod-step1	PR	애슐리(허서영)
		react-shopping-cart-prod-step2	PR

레벨3 - 팀 프로젝트

PROJECT	REPOSITORY	WEBSITE
동글	https://github.com/woowacourse-teams/2023-dong-gle	https://donggle.blog/

PROJECT	REPOSITORY
웹 접근성 개선	a11y-airline

레벨4 - 웹 프로그래밍 심화, 팀 프로젝트 유지보수

레벨4 목표

1. 프론트엔드 성능을 측정, 분석하고 개선해본다.

성능 개선과 관련된 네트워크 키워드, 브라우저 렌더링 과정에 대한 이해도를 높인다.

2. 재사용 가능한 레이아웃 컴포넌트를 개발하고 활용해본다.

사용자 경험을 향상시키는 CSS 레이아웃 구축 역량을 개발한다.

3. 프론트엔드의 다양한 렌더링 방식에 대해 학습하고 적용해본다.

팀 서비스 페이지 클론코딩을 통해 프론트엔드의 렌더링 방식을 이해한다.

NO.	PROJECT	REPOSITORY	PR
1	성능 베이스캠프	perf-basecamp	PR
2	레이아웃 컴포넌트	layout-component-step1	PR
	고급 레이아웃 컴포넌트	layout-component-step2	PR
3	팀 서비스 클론 코딩	frontend-rendering-step1	PR
	렌더링 방식의 분석	frontend-rendering-step2	PR

글쓰기 미션

NO.	PROJECT
1	우아한테크코스 한 달 생활기
2	나의 몰입 경험들
3	내가 꿈꾸는 프로그래머로서의 삶