/woowacourse-frontend-4th

우아한 테크코스 4기에서의 활동들을 정리한 공간입니다 🖋

woowacourse-frontend-4th

우아한 테크코스 4기에서의 활동 (2022.02 ~ 2022.11) 들을 정리한 공간입니다 🖋

Level 1 🌱

📍 학습 목표

✅ 프론트엔드의 기본이 되는 HTML, CSS, JavaScript에 대한 기본 문법을 익혀 프로그래밍을 합니다.

✅ 구현한 코드에 대해 E2E 테스트, 유닛 테스트를 작성하고 읽기 좋은 코드로 리팩터링합니다.

세부 목표

HTML/CSS

주어진 디자인을 웹 표준을 준수하는 UI로 옮길 수 있다.

JavaScript

프레임워크 없이 JS만으로 작은 웹 어플리케이션들을 만들어보면서 언어의 주요 문법들을 깊이 있게 학습하며, 이를 바탕으로 클린 코드에 대해 고민하는 연습을 한다. 런타임 환경으로서 브라우저의 기본 동작 원리를 함께 학습한다.

테스트

E2E 테스트와 유닛 테스트 코드를 작성하면서 개발하고 리팩토링하며 테스트 코드의 필요성을 경험해본다.

TypeScript

TypeScript의 기본 문법을 익히며 TypeScript의 필요성을 이해한다. 이를 객체지향적으로 활용하는 방법을 고민한다.

미션 🚀

미션 PR 블로그
자동차 경주 1차
2차 자동차 경주 미션 피드백 정리
행운의 로또 1차 this 정리하기
2차 addEventListener와 bind, 웹팩 사용하기
나만의 유튜브 강의실 1차 나만의 유튜브 강의 미션 - 1단계 피드백 정리
2차 나만의 유튜브 강의 미션 - 2단계 피드백 정리
자판기 1차 자판기 미션 - 1단계 피드백 정리
2차 자판기 미션 - 2단계 피드백 정리

레벨 1 전체 회고 💫

우아한 테크코스 한 달 생활기

Level 2 ☘️

📍 학습 목표

✅ 모던 SPA 웹 애플리케이션을 온전히 개발한다. (React 생태계)

✅ 직접 Boilerplate를 만들거나 CRA 등의 도구를 활용하여 NPM 생태계를 본격적으로 활용해본다.

세부 목표

HTML & CSS

웹 표준과 웹 접근성의 중요성을 깨우친다. 의미론적인 HTML에 대해 고민하며 다양한 CSS 방법론을 경험한다. React에서 CSS를 다루는 방법에 대해 고민해본다. 타 서비스의 마크업 페이지를 클론하거나 시안을 직접 구현해본다.

React

Angular & React & Vue 같은 SPA 라이브러리와 프레임워크가 등장한 맥락을 파악한다. Virtual DOM & JSX 의 원천을 이해한다. Class Component => Hooks API 변화와 차이점을 겪어본다.

Component

현대 웹 애플리케이션에서 컴포넌트가 가지는 의미를 고민한다. 컴포넌트 단위의 설계를 해보거나 직접 작성한 컴포넌트를 재활용해보며 컴포넌트 디자인 시스템에 도전한다.

State

현대 웹 애플리케이션에서 상태가 가지는 의미를 파악한다. 단방향 데이터 흐름과 데이터 바인딩을 겪어본다. 상태 관리 라이브러리의 필요성을 느끼고 Flux Architecture 기반의 Redux를 통해 직접 설계를 해본다.

Test

미션별 상이한 테스트를 두어 조금 더 구체적으로 테스트에 대해 고민한다

미션 🚀

미션 PR 블로그
페이먼츠 1차 페이먼츠 미션 - 1단계 피드백 정리
2차 페이먼츠 미션 - 2단계 피드백 정리
장바구니 1차 장바구니 미션 - 1단계 피드백 정리
2차 장바구니 미션 - 2단계 피드백 정리
장바구니 협업미션 1차 장바구니 협업 미션 - 1단계 정리
2차 장바구니 협업 미션 - 2단계 정리

레벨 2 전체 회고 💫

우테코에서 찾은 나만의 효과적인 공부법

Level 3 ~ 4 🍀

📍 팀 프로젝트

공식 레포 바로가기

  • 프론트 : 샐리 , 자스민
  • 백엔드 : 주디, 기론, 레넌, 슬로

스프린트

데모 데이 영상 정리
1차 1차 데모 영상 우테코 Lv.3 - 1주차 , 우테코 Lv.3 - 2주차
2차 2차 데모 영상 우테코 Lv.3 - 3 ~ 4주차
3차 3차 데모 영상 스프린트 3
4차 4차 데모영상 스프린트 4
5차 5차 데모영상 레벨 4 1주차, 레벨 4 2주차, 레벨 4 3주차, 레벨 4 4주차
6차 게더 데모데이 발표 레벨 4 5주차, 레벨 4 6주차, 레벨 4 7주차, 레벨 4 8주차, 레벨 4 9주차

관련 글

미션 🚀

미션 PR
성능 최적화 최종 PR
타입 스크립트 공식 타입 npm 배포
웹 접근성 최종 PR

레벨 3 , 4 전체 회고 💫

팀 프로젝트가 나에게 남긴 것

Level 5

회고 링크
1주차 회고 1주차 회고
2주차 회고 2주차 회고
3주차 회고 3주차 회고
마지막 회고 마지막 회고

테코톡 👩‍🏫

var let const 비교

스터디 👨‍👧‍👧

이름 링크 기간
노포스팅유다이 깃허브 주소 레벨 1 ~ 레벨 2
peep peep 스터디 깃허브 주소 레벨 3 ~
노포스팅유페이 레벨 4 ~

토이 프로젝트 🤡

MAT.ZIP

우테코 크루들의 메뉴 선택을 위한 맛집 모음 앱 🍱 with 태태, 블링, 오리, 후니, 오찌

깃허브 주소

MAT.ZIP바로가기