2023.02 ~ 2023.11
5기 프론트엔드 쿠마(박영진)의 우아한테크코스 기록입니다.
레벨1 - JavaScript, Typescript, 테스트
레벨1 미션 목표
- Github 기반으로 온라인 코드 리뷰코딩 컨벤션을 준수하며 개발단위 테스트를 작성하며 개발함수(또는 메서드)를 분리하는 리팩터링
- UI와 도메인 영역을 분리할 수 있는 설계를 고민해보고, 목적에 맞게 객체와 함수를 활용단위 테스트 기반으로 점진적인 리팩터링기본적인 웹 표준을 준수하는 웹 UI 개발
- TDD
- 객체
- 함수
- OOP 기초
- HTML/CSS 기초
- 브라우저 이벤트 기초
- 어플리케이션을 컴포넌트 단위로 모듈화하여 개발TypeScript의 기본 문법을 익히며 필요성을 경험UI 환경에서의 테스트
- Component
- SPA
- TypeScript 기초
- E2E 테스트 기초
- 자바스크립트 언어의 비동기 개념 이해 및 활용API 통신을 처리할 때 기술적, UX적으로 고려해야 하는 케이스를 고민하고 개선TypeScript에 익숙해지며 보다 적극적으로 활용테스트 더블의 필요성 경험 및 적용
- HTTP 기초
- RESTful API
- TypeScript 심화
레벨2 미션 목표
- 레벨1에서 구현하고 사용해본 점심 메뉴 애플리케이션을 React로 구현
- React 공식 문서를 단순히 학습이 아닌 구현 목적을 가지고 활용하고 공식 문서를 활용한 본인만의 접근 방식 만들기
- JS로 구현해본 컴포넌트를 React 컴포넌트로 작성
[2~4주 차] 페이먼츠 - 컴포넌트 주도 개발(CDD)
- 재사용 가능한 단위의 컴포넌트에 대한 기준 정의
- 스토리북을 이용해 컴포넌트 단위가 가지는 스토리에 대해 문서화하여 표현
- 컴포넌트 단위로, 어떤 스토리가 가능한지 이야기하기
- TDD
- CDD
- Component
- Storybook
- Custom hook
[5~6주 차] 장바구니 - 복잡한 상태 관리, 라우팅
- 상태 관리 라이브러리를 사용하여 상태 관리를 구현할 수 있으며, 이를 통해 애플리케이션의 안정성과 유지 보수성 향상
- 다양한 테스트 도구를 스스로 비교 분석하고, 자신에게 가장 적합한 도구를 선정하여 활용
- MSW를 이용한 mocking을 통해 서버와의 연결전 준비
- 네트워크와 비동기 처리
- 타입스크립트를 이용한 데이터 포맷 설정
- 프론트엔드 배포
- 네트워크 상황, 비동기 처리에 따른 UI/UX 설계
레벨4 - 웹 프로그래밍 심화, 팀 프로젝트 유지보수
레벨4 목표
1. 프론트엔드 성능을 측정, 분석하고 개선해본다.
성능 개선과 관련된 네트워크 키워드, 브라우저 렌더링 과정에 대한 이해도를 높인다.
2. 재사용 가능한 레이아웃 컴포넌트를 개발하고 활용해본다.
사용자 경험을 향상시키는 CSS 레이아웃 구축 역량을 개발한다.
3. 프론트엔드의 다양한 렌더링 방식에 대해 학습하고 적용해본다.
팀 서비스 페이지 클론코딩을 통해 프론트엔드의 렌더링 방식을 이해한다.