https://github.com/byhhh2/2022-woowacourse-frontend
우아한테크코스 4기 프론트엔드 과정 정리
https://github.com/byhhh2/2022-woowacourse-frontend
frontend woowacourse
Last synced: 6 days ago
JSON representation
우아한테크코스 4기 프론트엔드 과정 정리
- Host: GitHub
- URL: https://github.com/byhhh2/2022-woowacourse-frontend
- Owner: byhhh2
- Created: 2022-10-09T08:12:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-13T02:04:23.000Z (almost 3 years ago)
- Last Synced: 2025-04-14T09:59:54.813Z (6 months ago)
- Topics: frontend, woowacourse
- Homepage:
- Size: 5.86 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎬 무비의 2022 우아한테크코스 프론트엔드 과정
## 👋 LEVEL 1 - 프로그래밍의 기본
> - 프론트엔드의 기본이 되는 HTML, CSS, JavaScript에 대한 기본 문법을 익혀 프로그래밍을 합니다.
> - 구현한 코드에 대해 E2E 테스트, 유닛 테스트를 작성하고 읽기 좋은 코드로 리팩터링합니다.
| 미션명 | 설명 | 페어
/ 리뷰어 | 1단계 | 2단계 | 키워드 |
| :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :--------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: |
| **계산기** | 온보딩 미션으로, 간단한 계산기를 만드는 미션입니다.
페어 프로그래밍을 처음 경험해보고,
요구사항에 맞추어 미션을 진행합니다. | [하리](https://github.com/LAH1203) | [PR](https://github.com/woowacourse/javascript-calculator/pull/41) | - | DOM,
BOM,
Event,
Data Type,
Cypress |
| **자동차 경주**
[데모](https://byhhh2.github.io/javascript-racingcar/) | 테스트 코드를 통해서
보다 생산적으로 개발할 수 있는 사이클과,
브라우저에 대해 알아봅니다. | [하리](https://github.com/LAH1203)
/ [노스](https://github.com/hyoungnam) | [PR](https://github.com/woowacourse/javascript-racingcar/pull/76) | [PR](https://github.com/woowacourse/javascript-racingcar/pull/140) | TDD,
BDD,
Timer API,
이벤트 루프,
실행 컨텍스트,
스코프,
호스팅,
CSS flexbox |
| **행운의 로또**
[데모](https://byhhh2.github.io/javascript-lotto/) | 프론트엔드의 모델링과 설계에 대해 학습합니다.
UI와 도메인 영역을 나누고,
역할에 따른 모듈/클래스 분리를 연습합니다. | [마르코](https://github.com/wonsss)
/ [아사](https://github.com/EungyuCho) | [PR](https://github.com/woowacourse/javascript-lotto/pull/99) | [PR](https://github.com/woowacourse/javascript-lotto/pull/140) | Jest,
OOP 기초,
Object,
module,
번들러,
prototype, class,
함수와 클로저,
this,
CSS grid |
| **나만의 유튜브 강의실**
[데모](https://byhhh2.github.io/javascript-youtube-classroom/) | JS의 비동기 개념을 잘 이해하고 사용합니다.
API 통신을 처리할 때 기술적, UX적으로 고려해야 하는 케이스를 고민하고 대응하는 경험을 쌓습니다. | [티거](https://github.com/daaaayeah)
/ [YB](https://github.com/youngbeomrhee) | [PR](https://github.com/woowacourse/javascript-youtube-classroom/pull/104) | [PR](https://github.com/woowacourse/javascript-lotto/pull/140) | HTTP 기초,
RESTful API,
비동기,
scroll, throttle, debounce,
반응형 |
| **자판기 SPA**
[데모](https://byhhh2.github.io/javascript-vendingmachine/) | 프레임워크 없이 SPA를 직접 구현합니다.
웹에서 인증을 처리하는 방법을 이해합니다.
TypeScript의 기본 문법을 익히며 필요성을 경험해보고,
객체지향적 관점에서 활용합니다. | [민초](https://github.com/jswith)
/ [Vallista](https://github.com/Vallista) | [PR](https://github.com/woowacourse/javascript-vendingmachine/pull/7) | [PR](https://github.com/woowacourse/javascript-vendingmachine/pull/75) | SPA,
상태 관리,
Browser History,
Typescript 기초 |
## 👋 LEVEL 2 - 프로그래밍의 기본
> - React 기반의 프론트엔드 웹 애플리케이션을 제작합니다.
> - 재사용 가능한 컴포넌트를 고민하고 설계합니다.
> - 상태 관리 라이브러리를 활용하며 상태 관리의 필요성에 대해 이해합니다.
> - 프론트엔드 웹 애플리케이션에서 고려해야할 테스트 범위와 종류에 대해 학습합니다.
| 미션명 | 설명 | 페어
/ 리뷰어 | 1단계 | 2단계 | 3단계 | 키워드 |
| :-------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------: | :-------------------------------------------------------------------: | :----------------------------------------------------------: | :-------------------------------------------------------------------------------------------: |
| **계산기**
[데모](https://byhhh2.github.io/react-calculator/) | 온보딩 미션으로,
미션보다는 React를 체험하며
정말 기본적인 개념들을 습득하는 것에 초점을 두고 있습니다. | [우연](https://github.com/ronci), [비녀](https://github.com/KangYunHo1221)
/ [율리](https://github.com/glassyi) | [PR](https://github.com/woowacourse/react-calculator/pull/6) | [PR](https://github.com/woowacourse/react-calculator/pull/69) | - | React 입문,
Component,
선언형 |
| **페이먼츠**
[데모](https://byhhh2.github.io/react-payments/) | 모바일 타겟의 웹 앱을 구현합니다.
사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다.
재사용 가능한 Component를 직접 작성합니다. | [록바](https://github.com/lokba)
/ [아사](https://github.com/EungyuCho) | [PR](https://github.com/woowacourse/react-payments/pull/98) | [PR](https://github.com/woowacourse/react-payments/pull/122) | [PR](https://github.com/woowacourse/react-payments/pull/169) | UI/UX,
storybook,
component 재사용,
Hook,
controlled/uncontrolled,
context API |
| **장바구니**
[데모](https://byhhh2.github.io/react-shopping-cart/) | 데스크탑 타겟의 웹 앱을 구현합니다.
재방문을 고려한 UI/UX에 대해 고민해봅니다.
상태 관리를 위해 Flux Architecture 기반의 Redux를 활용합니다. | [해리](https://github.com/jihyeok-um)
/ [YB](https://github.com/youngbeomrhee), [포코](https://github.com/pocojang) | [PR](https://github.com/woowacourse/react-shopping-cart/pull/84) | [PR](https://github.com/woowacourse/react-shopping-cart/pull/139) | - | Flux,
Redux,
Router |
| **장바구니 - 협업**
[데모 (EC2 닫힘)](http://movie-shop-heroku.herokuapp.com/server) | 온전히 완성된 모던 웹 애플리케이션을 상상하며 구현합니다.
사용자 인증에 대해 고민합니다.
새로운 상태 관리 방법에 대해 고민합니다. | [마르코](https://github.com/wonsss)
/ [리트](https://github.com/lsw1164) | [PR](https://github.com/woowacourse/react-shopping-cart-prod/pull/25) | [PR](https://github.com/woowacourse/react-shopping-cart-prod/pull/58) | - | MSW,
인증/인가,
백앤드와의 협업 |
## 👋 LEVEL 3 - 팀 프로젝트
> - 개발 프로세스 기반으로 프로젝트를 진행, 협업하는 경험을 합니다.
> - 서비스를 기획, 구현, 배포해 실사용자가 사용하도록 개발하는 경험을 합니다.
> - 분업보다는 진한 협업을 경험합니다.
> - 팀 원칙을 세워 자기 팀만의 색깔을 만듭니다.
> - 팀워크를 형성합니다.
> - Typescript를 팀 프로젝트에 적용합니다.
> - 우리 팀만의 성능 리포트를 작성합니다.
| 프로젝트명 | 소개 | 팀원 | 코치 |
| :---------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------: |
| [**속닥속닥**](https://sokdaksokdak.com/) | 속닥속닥은 우아한테크코스 **익명 대나무숲 커뮤니티**입니다.
평소에 전하지 못한 말이나 기명으로 하기 힘든 말들을 전합니다. | 💚 [동키콩](https://github.com/JUDONGHYEOK), [헌치](https://github.com/BETTERFUTURE4), [이스트](https://github.com/EastHShin), [크리스](https://github.com/Byeongju-Kong), [조시](https://github.com/hyunrrr), [토르](https://github.com/injoon2019) 💚 | [토미](https://github.com/seokhongkim) |
- [기술블로그](https://sokdak-sokdak.tistory.com/)
- [인스타그램](https://www.instagram.com/sokdak_x2/)
- [위키](https://github.com/woowacourse-teams/2022-sokdak/wiki)
## 👋 LEVEL 4 - 웹 프로그래밍 심화, 팀 프로젝트
> - 팀 프로젝트로 진행한 결과물을 유지 보수하며 서비스를 운영하는 경험을 합니다.
> - 프론트엔드 성능을 측정, 분석하고 개선해본다.
> - 성능 개선과 관련된 네트워크 키워드, 브라우저 렌더링 과정에 대한 이해도를 높인다.
> - TypeScript를 깊이있게 이해하고 다뤄본다.
> - 웹접근성 시나리오에 따라 적절한 속성을 추가할 수 있는 역량을 향상해본다.
| 미션명 | 설명 | 리뷰어 | 1단계 | 2단계 | 키워드 |
| :-------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------: | :--------------------------------------------------------: | :-------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |
| **Memegle**
[데모](https://d3ccxdg7e19c6m.cloudfront.net/) | 현재 우리 서비스의 성능 수준을 측정할 수 있다.
성능 개선 작업이 필요하다면 어떤 영역에서 필요한 지
측정 결과를 분석해 문제를 정의할 수 있다. | [자스민](https://github.com/hwangstar156) | [PR](https://github.com/woowacourse/perf-basecamp/pull/45) | - | HTTP,
브라우저 렌더링 과정
minify, uglify,
image optimization,
webpack,
CloudFront,
Code Splitting,
Tree Shaking |
| **Module Typing** | 모듈을 고려하여 타이핑합니다.
사용될 곳을 위한 타이핑을 합니다. | [안](https://github.com/jin7969) | [PR](https://github.com/woowacourse/ts-module/pull/20) | - | 메타 타입,
타입 시스템,
공변성/반공변성 |
| **항공사 웹사이트**
[데모](https://byhhh2.github.io/a11y-airline/) | 기능을 개발하는 것뿐만 아니라
더 큰 가치를 창출해내는 소프트웨어 장인으로 가는 길을 걷기 위해
웹 접근성에 대한 관심도 놓치지 않는다.
제작한 사이트를 스크린리더가 읽을 수 있도록 한다. | [도리](https://github.com/prefer2) | [PR](https://github.com/woowacourse/a11y-airline/pull/59) | [PR](https://github.com/woowacourse/a11y-airline/pull/74) | 웹 접근성,
aria,
스크린리더 |