✨ 우아한테크코스 6기 활동 기록
📆 2024.02.13 ~ 2024.11.29
- 작은 규모의 어플리케이션들을 만들어보면서 JavaScript/TypeScript 언어의 주요 문법들을 깊이 있게 학습한다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- E2E 테스트와 단위 테스트 코드를 작성해보고, 이를 기반으로 리팩터링하며 테스트 코드의 필요성을 경험해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
| 단계 | Repository | PR | Blog | 키워드 (Blog 링크) |
|---|---|---|---|---|
| 🚗자동차 경주 1단계 | javascript-racingcar | Step 1 | 블로그 | 좋은 코드, 단위 테스트 |
| 🚗자동차 경주 2단계 | javascript-racingcar | Step 2 | 블로그 | Data Types, Scope, Object, Prototype |
| 🎫로또 1단계 | javascript-lotto | Step 1 | 블로그 | TDD, 객체, 함수 |
| 🎫로또 2단계 | javascript-lotto | Step 2 | 블로그 | DOM, BOM, Event |
| 🍴점심 뭐 먹지 1단계 | javascript-lunch | Step 1 | 블로그 | 컴포넌트, Typescript, E2E 테스트 |
| 🍴점심 뭐 먹지 2단계 | javascript-lunch | Step 2 | 블로그 | SPA |
| 🎥영화 리뷰 1단계 | javascript-movie-review | Step 1 | 블로그 | 웹의 동작, AJAX&JSON, RESTful API, Promise&async/await |
| 🎥영화 리뷰 2단계 | javascript-movie-review | Step 2 | 블로그 | debounce, throttle, loading&Skeleton UI, lazy loading |
- 매일 알고리즘 문제를 한 문제씩 풀면서 문제 풀이 습관을 이어나가는 스터디 (레벨1 ~ 레벨3)
- 활동 기록: solved.ac 프로필
- 레벨1보다 복잡한 규모의 어플리케이션을 React와 TypeScript를 이용해 만들어본다.
- 스토리북을 통하여, 컴포넌트 단위로 피드백을 받기 위한 테스트의 필요성을 경험해본다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
| 단계 | Repository | PR | 키워드 |
|---|---|---|---|
| 💳페이먼츠 1단계 | react-payments | Step 1 | Component, Storybook |
| 💳페이먼츠 2단계 | react-payments | Step 2 | Controlled & Uncontrolled Components, Hooks API, Router |
| 🧩모듈 1단계 | react-modules | Step 1 | Module, npm 배포, 컴포넌트, 커스텀 훅 |
| 🧩모듈 2단계 | react-modules | Step 2 | Refactoring |
| 🧺장바구니 1단계 | react-shopping-cart | Step 1 | Recoil, RTL |
| 🧺장바구니 2단계 | react-shopping-cart | Step 2 | Recoil, RTL |
| 📦상품 목록 1단계 | react-shopping-products | Step 1 | 커스텀 훅, Context API, 무한 스크롤 |
| 📦상품 목록 2단계 | react-shopping-products | Step 2 | Tanstack Query, MSW |
- 매주 주제를 한 가지 선정하고 학습한 뒤, 월요일마다 발표하는 스터디
- 활동 기록: notion 바로가기
- 개발 프로세스 기반으로 프로젝트를 진행, 협업하는 경험을 한다.
- 서비스를 기획, 구현, 배포해 실 사용자가 사용하도록 개발하는 경험을 한다.
- 코드 리뷰 매칭 플랫폼 CoReA로 완성하는 개발 성장의 퍼즐: 코드, 리뷰, 그리고 당신
- 🔥 우테코 6, 7기 대상으로 운영, 사용자 수 약 310명
[우테코] Level3 React 초기 세팅
[우테코] Level3 AWS로 프론트 서버 배포하기
[우테코] Level3 storybook에 theme, 절대경로, createPortal 적용하기
[우테코] Level3 createPortal
[우테코] Level3 styled-components 반응형 모듈화
[우테코] Level3 Github 로그인
[우테코] Level3 Refresh Token
- 레벨 3에서 진행한 프로젝트를 유지 보수하고 기술적으로 고도화한다.
- 기술을 사용해서 사용자 경험을 한 단계 더 개선하는 방법을 학습한다.
- ‘사용자 경험’을 기준으로 문제를 정의하고 정의한 문제에 맞는 해결책을 새롭게 학습하고 도입할 수 있는 나만의 학습 지도를 만든다.
미션 목표
- 서비스의 성능 개선이 필요할 때, 직접 문제를 정의하고 정의한 문제에 맞는 해결책을 도입할 수 있다.
- (도구 사용법) 현재 우리 서비스의 성능 수준을 측정할 수 있다.
- (문제 정의) 성능 개선 작업이 필요하다면 어떤 영역에서 필요한 지 측정 결과를 분석해 문제를 정의할 수 있다.
- (문제 해결을 위한 학습) 정의한 문제를 해결하기 위해 시도해볼 수 있는 방법들을 스스로 학습해나갈 수 있는 키워드 수준의 지식을 가지고 있다.
- (경험치) 스스로 성능 문제를 정의하고, 정의한 문제에 맞는 해결책을 적용해 성능 수치를 개선해본 경험이 있다.
| 미션 | Repository | PR & Reviews |
|---|---|---|
| 개인 미션 - memegle 프로젝트 성능 개선 | perf-basecamp | 개인 미션 PR |
| 팀 미션 - 프로젝트 성능 개선 | 코레아 성능 개선 리포트 |
미션 목표
- 서비스의 접근성 개선이 필요할 때, 직접 문제를 정의하고 정의한 문제에 맞는 해결책을 도입할 수 있다.
- (도구 사용법) 스크린 리더를 사용해 기본적인 기능을 테스트할 수 있다.
- (문제 정의) 서비스의 현재 접근성 준수 여부를 측정하고 어떤 접근성 이슈가 있는지 파악할 수 있다.
- (문제 해결을 위한 학습) 접근성 이슈를 이해하고 해결 방법을 찾기 위한 기본적인 개념과 기술 키워드를 알고 있다. 혹은 필요할 때 어떤 경로로 추가로 학습할 지 알고 있다.
- (경험치) 접근성을 준수하는 React Component를 직접 작성해본 경험이 있다.
| 미션 | Repository | PR & Reviews |
|---|---|---|
| 개인 미션 - 컴포넌트 접근성 높이기 | a11y-airline | 개인 미션 PR |
| 팀 미션 - 서비스 접근성 개선 | 코레아 접근성 개선 리포트 |
미션 목표
- CSR과 SSR 렌더링 방식의 특징을 이해하고, 주어진 상황에 적합한 렌더링 방식을 선택할 수 있다. 또한, 이를 리액트 앱과 함께 적용할 수 있다.
| 미션 | Repository | PR & Reviews |
|---|---|---|
| 영화 목록 페이지 | react-ssr | Step 1 - SSR 기반 영화 목록 페이지 Step 2 - 유니버셜 렌더링 |
- 테크 컨퍼런스 영상을 함께 시청하고 토론하는 스터디
- 활동 기록: notion 바로가기
[우테코] Level4 로딩, 렌더링 성능 개선이란?
[우테코] Level4 1 요청 크기 줄이기
[우테코] Level4 2 필요한 것만 요청하기
[우테코] Level4 3 같은 건 매번 새로 요청하지 않기
[우테코] Level4 4 최소한의 변경만 일으키기
- 레벨 3, 4에서 진행한 프로젝트를 유지 보수하고 기술적으로 고도화한다.
- 팀 목표: 운영 후 사용자 피드백을 반영하며 서비스를 점차 안정적으로 개선해 나간다.
[우테코] Level5 onKeyDown 이벤트가 두 번 발생하는 이유
[우테코] Level5 Github OAuth 소유권 이전
[우테코] Level5 지역 Suspense & 지역 ErrorBoundary
[우테코] Level5 네트워크 에러 잡기
[우테코] Level5 ErrorBoundary 전략 세우기
| 제목 | 본문 |
|---|---|
| 레벨 1 | 역시 성과보단 성장이지, 다양한 의견을 수용하자 |
| 레벨 2 | 자투리 시간도 흘러간다. |
| 레벨 3 | 할 일이 남아 있다면 밤을 새워서라도 끝내기 + 변명하지 말기 + 코드 리뷰에 최선을 다하기 |
OAuth 로그인 - Github OAuth로 연습하기