총 10개월 (2022년 2월 8일 ~ 11월) 동안 진행된 우아한테크코스 4기 프론트엔드 과정을 정리합니다.
- 본격적인 교육에 앞서 필요한 것들을 준비합니다.
| 프로젝트 | PR |
|---|---|
| 숫자 야구 게임 | PR |
| 자동차 경주 게임 | PR |
| 자판기 | PR |
| 크루 관리 & 팀 매칭 | PR |
- 프론트엔드의 기본이 되는 HTML, CSS, JavaScript에 대한 기본 문법을 익혀 프로그래밍을 합니다.
- 구현한 코드에 대해 E2E 테스트, 유닛 테스트를 작성하고 읽기 좋은 코드로 리팩터링합니다.
| 프로젝트 | 페어 | 1단계 | 2단계 | 리뷰어님 |
|---|---|---|---|---|
| 계산기 | @compy-ryu | PR | - | - |
| 자동차 경주 | @compy-ryu | PR | PR | @EungyuCho |
| 행운의 로또 | @juunzzi | PR | PR | @roy-jung |
| 나만의 유튜브 강의실 | @kkojae91 | PR | PR | @EungyuCho |
| 자판기 | @intae92 | PR | PR | @VallistA |
- Cypress로 E2E 테스트 시작하기
- 함수와 바인딩, this
- 함수의 호출을 간격을 제한하는 쓰로틀(Throttle)
- Webpack 빠르게 흝어보기
- 자바스크립트의 Array
- JS에서 날짜를 보여주기 전 고려해야 할 것들
- innerHTML과 insertAdjacentHTML
- React 기반의 프론트엔드 웹 애플리케이션을 제작합니다.
- 재사용 가능한 컴포넌트를 고민하고 설계합니다.
- 상태 관리 라이브러리를 활용하며 상태 관리의 필요성에 대해 이해합니다.
- 프론트엔드 웹 애플리케이션에서 고려해야할 테스트 범위와 종류에 대해 학습합니다.
| 프로젝트 | 페어 | 1단계 | 2단계 | 3단계 | 리뷰어님 |
|---|---|---|---|---|---|
| 리액트 계산기 | @InKyoJeong | PR | PR | - | @hyoungnam |
| 리액트 페이먼츠 | @kwannee | PR | PR | PR | @austinpark420 |
| 리액트 장바구니 | @compy-ryu | PR | PR | - | @EungyuCho |
| 리액트 장바구니 협업 | @liswktjs | PR | PR | - | @HyeonaKwon |
- 리액트 컴포넌트 생명주기 (React Component Life Cycle)
- 클래스 컴포넌트와 함수 컴포넌트 (Class Component / Functional Component)
- 리액트의 기본 훅 (React Basic Hooks)
- 리액트의 에러 경계 (React Error Boundaries)
- 2022년의 절반을 돌아보며
- React.Memo 사용하기
- JSX 알아보기
- 개발 프로세스 기반으로 프로젝트를 진행, 협업하는 경험을 합니다.
- 서비스를 기획, 구현, 배포해 실 사용자가 사용하도록 개발하는 경험을 합니다.
| 1차 데모데이 | 2차 데모데이 | 3차 데모데이 | 4차 데모데이 | 5차 데모데이 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Backend | Backend | Backend | Backend | Frontend | Frontend |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| 렉스 📚 Blog |
이프 📚 Blog |
라쿤 📚 Blog |
유콩 📚 Blog |
하리 📚 Blog |
유세지 📚 Blog |
- 팀 프로젝트로 진행한 결과물을 유지 보수하며 서비스를 운영하는 경험을 합니다.
- 레거시 코드를 점진적으로 리팩토링하고 애플리케이션 설계 역량을 높입니다.
- 브라우저의 동작 원리와 네트워크에 대해 이해하고 프론트엔드 웹 애플리케이션의 성능을 최적화합니다.
- 웹 표준과 웹 접근성을 준수하고 시맨틱 마크업을 위해 중요한 요소들을 이해하고 구현합니다.
- 프론트엔드 웹 애플리케이션의 유형에 따른 배포 전략을 이해합니다.
- 웹 페이지 최적화하기 - 1
- 웹 페이지 최적화하기 - 2
- 웹 페이지 최적화하기 - 3
- 매일 쓰는 babel-loader에 질렸다면 (ts-loader, esbuild-loader)
- 우아한테크코스 레벨 4 절반 회고
- 모임 서비스를 개발하며 (모두 모여라 개발기)
- Recoil + React-query 삽질기
- 바로가기
- 매주 정해진 주제에 대해 학습하고, 서로 궁금했던 내용에 대해 질문하며 자바스크립트의 기본기를 다지는 스터디
- 바로가기
- 함께 그림으로 배우는 HTTP & Network Basic 책을 읽으며 네트워크의 기본 지식을 나누는 스터디
- Node.js란 무엇이고, 어떻게 등장했을까?
- Javascript는 single thread인데, Node.js는 어떻게 여러가지 동작을 비동기로 처리할 수 있을까?