Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/moonheekim0118/2022-woowacourse-frontend

우아한테크코스 프론트엔드 4기 과정 정리
https://github.com/moonheekim0118/2022-woowacourse-frontend
frontend woowacourse
Last synced: 9 days ago
JSON representation
우아한테크코스 프론트엔드 4기 과정 정리
Host: GitHub
URL: https://github.com/moonheekim0118/2022-woowacourse-frontend
Owner: moonheekim0118
Created: 2022-09-11T11:46:19.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-10-10T07:57:21.000Z (about 2 years ago)
Last Synced: 2023-03-06T21:51:57.939Z (almost 2 years ago)
Topics: frontend, woowacourse
Homepage:
Size: 25.4 KB
Stars: 29
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        # 2022 우아한테크코스 프론트엔드 과정

_{총 10개월 (2022년 2월 8일 ~ 11월(예정))}




### 💙 레벨 1 - 프로그래밍 기본

- 8주 과정 (2022년 2월 9일 ~ 4월 7일)

|       프로젝트       |                     페어                     |                                   1단계                                    |                                   2단계                                    |                      리뷰어님                     

| :------------------: | :------------------------------------------: | :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :------------------------------------------------:

|        계산기        |    [@prefer2](https://github.com/prefer2)    |     [PR](https://github.com/woowacourse/javascript-calculator/pull/43)     |                                                                            |                                                    |          |

|     자동차 경주      |    [@prefer2](https://github.com/prefer2)    |     [PR](https://github.com/woowacourse/javascript-racingcar/pull/61)      |     [PR](https://github.com/woowacourse/javascript-racingcar/pull/99)     |       [@youngbeomrhee](https://github.com/youngbeomrhee)       |          |

|     행운의 로또      |  [@euijinkk](https://github.com/euijinkk)  |       [PR](https://github.com/woowacourse/javascript-lotto/pull/89)       |       [PR](https://github.com/woowacourse/javascript-lotto/pull/154)       |       [@lsw1164](https://github.com/lsw1164)       |          |

| 나만의 유튜브 강의실 | [@compy-ryu](https://github.com/compy-ryu) | [PR](https://github.com/woowacourse/javascript-youtube-classroom/pull/96) | [PR](https://github.com/woowacourse/javascript-youtube-classroom/pull/121) |      [@inwalter99](https://github.com/inwalter99)      |          |

|        자판기        | [@hwangstar156](https://github.com/hwangstar156) |   [PR](https://github.com/woowacourse/javascript-vendingmachine/pull/4)   |   [PR](https://github.com/woowacourse/javascript-vendingmachine/pull/61)   | [@HyeonaKwon](https://github.com/HyeonaKwon) / [@wmakerjun](https://github.com/wmakerjun)  |          |

- 과정 목표

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

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

  

- 관련 학습 글

  - [git reset 옵션의 종류와 git reset--hard 로 삭제된 커밋 복구하기](https://prolog.techcourse.co.kr/studylogs/1788)

  - [requestAnimationFrame()에 대해 알아보기](https://prolog.techcourse.co.kr/studylogs/1801)

  - [웹팩 톺아보기](https://moonheekim.netlify.app/dev/%EC%9B%B9%ED%8C%A9%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0/)

  - [Api요청 Timout 구현하기](https://prolog.techcourse.co.kr/studylogs/2128)

  - [[typescript] enum, readonly, as const 비교](https://prolog.techcourse.co.kr/studylogs/2175)

  

  




### 💙 레벨 2 - 웹 프로그래밍

- 8주 과정 (2022년 4월 19일 ~ 6월 9일)

|   프로젝트    |                     페어                     |                                 1단계                                 |                                 2단계                                 | 3단계                                                        |                                           리뷰어님                                            

| :-----------: | :------------------------------------------: | :-------------------------------------------------------------------: | :-------------------------------------------------------------------: | :------------------------------------------------------------: | :-------------------------------------------------------------------------------------------:

|    계산기     |    [@juunzzi](https://github.com/juunzzi)    |     [PR](https://github.com/woowacourse/react-calculator/pull/5)     |     [PR](https://github.com/woowacourse/react-calculator/pull/46)     |                                                              |                           [@roy-jung](https://github.com/roy-jung)                            |          |

|   페이먼츠    | [@liswktjs](https://github.com/liswktjs) |      [PR](https://github.com/woowacourse/react-payments/pull/91)      |     [PR](https://github.com/woowacourse/react-payments/pull/121)      | [PR](https://github.com/woowacourse/react-payments/pull/152) |                           [@youngbeomrhee](https://github.com/youngbeomrhee) / [@pocojang](https://github.com/pocojang)                            |          |

|   장바구니    |     [@wonsss](https://github.com/wonsss)     |   [PR](https://github.com/woowacourse/react-shopping-cart/pull/71)    |   [PR](https://github.com/woowacourse/react-shopping-cart/pull/107)   |                                                              | [@Vallista](https://github.com/Vallista) / [@pocojang](https://github.com/pocojang) |          |

| 장바구니 협업 |     [@intae92](https://github.com/intae92)     | [PR](https://github.com/woowacourse/react-shopping-cart-prod/pull/9) | [PR](https://github.com/woowacourse/react-shopping-cart-prod/pull/44) |                                                              |                            [@inwalter99](https://github.com/inwalter99)                             |          |

- 과정 목표

  - React에 입문하여, 상태를 관리하고, 컴포넌트를 작성하고 설계를 합니다

  - 어떤 프론트엔드 개발자가 될것인지 고민해봅니다

  - 특정 기술을 왜 사용하는지 고민해봅니다

  - 사용자 경험을 고려해 개발을 합니다

- 관련 학습 글

  - [프론트엔드에서 상태란](https://github.com/moonheekim0118/react-til/blob/main/State.md)

  - [Virtual DOM 이란](https://github.com/moonheekim0118/react-til/blob/main/Virtual-DOM.md)

  - [리액트에서 key 란](https://github.com/moonheekim0118/react-til/blob/main/key.md)

  - [리액트에서 setState 가 비동기적인 이유](https://github.com/moonheekim0118/react-til/blob/main/setState%EA%B0%80-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81%EC%9D%B8-%EC%9D%B4%EC%9C%A0.md)

  - [리액트에서 상태관리](https://github.com/moonheekim0118/react-til/blob/main/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC.md)

  - [리액트에서 불변성을 유지해야하는 이유](https://github.com/moonheekim0118/react-til/blob/main/%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EC%9C%A0%EC%A7%80%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0.md)

  - [리액트의 이벤트 시스템](https://github.com/moonheekim0118/react-til/blob/main/%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%8B%9C%EC%8A%A4%ED%85%9C.md)

  - [클래스 컴포넌트 vs 함수 컴포넌트](https://github.com/moonheekim0118/react-til/blob/main/%ED%81%B4%EB%9E%98%EC%8A%A4%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8vs%ED%95%A8%EC%88%98%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8.md)

  




### 💙 레벨 3 - 팀 프로젝트

- 과정 목표

  - 개발 프로세스 기반으로 프로젝트를 진행, 협업하는 경험을 한다.

- 관련 학습 글

   - [팀 프로젝트에 리액트 쿼리와 리코일을 도입한 이유](https://observant-aardwolf-5e1.notion.site/5c4d2a93924745eab2ad94e42bdd49ed)

   - [Github Actions로 빌드/배포 자동화하기](https://moonheekim.netlify.app/dev/githubActions/)




### 💙 레벨 4 - 팀 프로젝트 + 웹 프로그래밍 심화

|       프로젝트          |                                   1단계                                    |                                   2단계                                    |                      리뷰 한 PR                     

| :------------------: | :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :------------------------------------------------:

|         프론트엔드 성능베이스캠프      |     [PR](https://github.com/woowacourse/perf-basecamp/pull/33)      |                                                                            |                       [리뷰 한 PR](https://github.com/woowacourse/perf-basecamp/pull/53)                              |          |

|     TypeScript   |   [PR](https://github.com/woowacourse/ts-module/pull/2)      |   |    [리뷰 한 PR](https://github.com/woowacourse/ts-module/pull/10)      |           |

|     웹접근성   |         |   |          |          |

- 과정 목표

  - 프론트엔드 성능을 측정, 분석하고 개선해본다.

  - 성능 개선과 관련된 네트워크 키워드, 브라우저 렌더링 과정에 대한 이해도를 높인다.

  - TypeScript를 깊이있게 이해하고 다뤄본다.

  - 웹접근성 시나리오에 따라 적절한 속성을 추가할 수 있는 역량을 향상해본다.

- 관련 학습 글

  - [우아한테크코스 레벨4 성능베이스 캠프 학습 내용](https://moonheekim.netlify.app/dev/%EC%84%B1%EB%8A%A5%EB%B2%A0%EC%9D%B4%EC%8A%A4%EC%BA%A0%ED%94%84/)

  - [프론트엔드에서 횡단관심사 생각해보기](https://moonheekim.netlify.app/dev/%ED%9A%A1%EB%8B%A8%EA%B4%80%EC%8B%AC%EC%82%AC/)




### 💙 레벨 5 - 보충 학습, 취업 준비