🏃🏻‍♂️ 우아한테크코스 기록

Level 1: JavaScript / TypeScript

학습 목표

• 작은 규모의 어플리케이션들을 만들어보면서 JavaScript/TypeScript 언어의 주요 문법들을 학습한다.
• 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
• E2E 테스트와 단위 테스트 코드를 작성해보고, 이를 기반으로 리팩터링하며 테스트 코드의 필요성을 경험해본다.
• 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.

미션

Project	Period	Repository	1단계 PR	2단계 PR
자동차 경주	2023-02-07 ~ 2023-02-13	Repository	1단계 PR	2단계 PR
로또	2023-02-14 ~ 2023-02-27	Repository	1단계 PR	2단계 PR
점심 뭐 먹지	2023-02-28 ~ 2023-03-13	Repository	1단계 PR	2단계 PR
영화 리뷰	2023-03-14 ~ 2023-03-27	Repository	1단계 PR	2단계 PR

학습로그

• package.json , package-lock.json
• DOM 조작, 그리고 렌더링
• 타입 표명(Type Assertion)
• 무한스크롤 맨땅 구현기
  

Level 2: React / TypeScript / Recoil

학습 목표

• 레벨1보다 복잡한 규모의 어플리케이션을 React와 TypeScript를 이용해 만들어본다.
• 스토리북을 통하여, 컴포넌트 단위로 피드백을 받기 위한 테스트의 필요성을 경험해본다.
• 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
• 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.

미션

Project	Period	Repository	1단계 PR	2단계 PR	3단계 PR
점심 메뉴	2023-04-11 ~ 2023-04-17	Repository	1단계 PR	2단계 PR	x
페이먼츠	2023-04-18 ~ 2023-05-08	Repository	1단계 PR	2단계 PR	3단계 PR
장바구니	2023-05-09 ~ 2023-05-22	Repository	1단계 PR	2단계 PR	x
장바구니(협업)	2023-05-23 ~ 2023-06-05	Repository	1단계 PR	2단계 PR	x

학습로그

• 나만의 Form Input 관리법
• type vs interface
  

Level 3: Team Project

기간

• 2023-06-27 ~ 2023-08-18

프로젝트

간단 소개

개인 카페에서 모으는 쿠폰들을 어플리케이션을 통해 관리할 수 있는 서비스

성과

실제 카페 유치 1곳 (성수 파일론), 약 50명 고객 적립

담당작업 & 경험

• 플랫폼을 직접 사용하는 대상인 실제 카페를 방문해 고객(사장)이 필요한 부분을 파악했던 경험
• 실제 사용자를 유치하고 피드백을 받아 지속적으로 어플리케이션을 유지보수한 경험
  • 엑세스 토큰으로만 하던 로그인 방식을 리프레시 토큰 도입을 통해 개선
• HTTP 응답 크기 개선
  • 번들링 사이즈가 큰 것을 파악하고 트리쉐이킹이 안되는 모듈을 찾고 이를 개선(882kb->250kb)
  • 보내는 정적 객체들을(폰트, static 이미지 파일, js) nginx gzip 압축 설정으로 개선
• Jenkins 와 nginx 를 사용하여 배포 파이프라인 구축을 통해 개발 프로세스 생산성 향상
• 개발 도구 설정을 개선해 개발자 경험 향상
  • 사용하지 않는 의존성이나 중복되는 설정 제거
  • 느렸던 소스맵을 개선하기 위해 프로젝트에 맞는 소스맵 재설정

Project	Repository	Website
개인 카페 쿠폰 관리 플랫폼	stampcrush	사이트

Level 4: In-Depth Web Programming, Team Project

학습 목표

• 프론트엔드 성능을 측정, 분석하고 개선해본다.
• 재사용 가능한 레이아웃 컴포넌트를 개발하고 활용해본다.
• Next.js를 이용한 팀 서비스 페이지 클론코딩을 통해 프론트엔드의 렌더링 방식을 이해한다.

미션

Project	Period	Repository	1단계 PR	2단계 PR
프론트엔드 성능 베이스캠프	2023-08-31 ~ 2023-09-12	Repository	1단계 PR	x
레이아웃 컴포넌트	2023-09-13 ~ 2023-10-03	Repository	1단계 PR	2단계 PR
프론트엔드 렌더링 방식	2023-10-04 ~ 2023-10-23	Repository	1단계 PR	2단계 PR

Writing: 글쓰기 미션

Level	Topic	Content
1	우아한테크코스 한달 생활기	본문
2	자유주제(에코노베이션 동아리 활동을 돌아보며)	본문
3	서비스 소개글(팀 미션)	본문
4	내가 꿈꾸는 프로그래머로서의 삶	본문

테코톡: 학습한 내용 말하기로 공유하기

유튜브 링크

• [10분 테코톡] 아커, 윤생의 프론트엔드에서 서버 API mocking

---

template by @yeopto