chaselover / 2021-woowacourse-frontend

우아한테크코스 3기 프론트엔드 과정 정리

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

_{총 10개월 (2021년 2월 2일 ~ 11월 26일)}

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

• 9주 과정 (2021년 2월 2일 ~ 4월 2일)

  프로젝트	페어	1 단계	2 단계	3 단계	🌟 코드리뷰 🌟	리뷰어님
  간단 계산기	@YUJO11	PR	-	-	피드백 정리	@eastjun @devJang
  자동차경주게임	@YUJO11	PR	PR	-	피드백 정리	@ysm0622
  로또	@SunYoungKwon	PR	PR	PR	피드백 정리	@Jbee
  유튜브API	@dudtjr913	PR	PR	PR	피드백 정리	@wow9144
  지하철노선도	@bigsaigon333	PR	PR	PR	피드백 정리	@HyeonaKwon

• 과정 목표

  • 프론트엔드의 기본이 되는 HTML, CSS, JS에 대한 기본 문법을 익혀 프로그래밍을 한다.
  • 페어 프로그래밍으로 피드백 주기를 줄이고 코드 리뷰를 통해 코드 품질을 높인다.
  • 자신이 구현한 코드에 대해 테스트를 작성하고 리팩토링하여 읽기 좋은 코드로 변경해본다.

• 관련 블로그 포스트

  • cypress - 테스트 주도 개발(TDD, BDD) 적용
  • cypress - stub 사용법, Alert 테스트 예제, 이벤트타입
  • 추상화에 관하여 - AHA Programming (Kent C. Dodds)
  • JavaScript - 호출 스케줄링(setTimeout, setInterval, requestAnimationFrame)
  • JavaScript - 유용한 메서드(find, filter, every, some, reduce, repeat)
  • Javascript - 'this' 키워드로 객체에 접근하기
  • 상태관리(Stage Management)와 옵저버패턴(Observer Pattern)
  • HTML <form> 태그 총정리 + <input>, <button>
  • 입력 폼(Form)에서 유의해야할 UI/UX 디자인 요소
  • Git - 자주 사용하는 명령어 모음
  • 쉽게 쓰인 유튜브 API 튜토리얼
  • 웹팩(Webpack) 밑바닥부터 설정하기
  • SQL 기초 & 자주쓰는 쿼리문 정리

💙 레벨 2 - 웹 프로그래밍

• 8주 과정 (2021년 4월 13일 ~ 6월 4일)

  프로젝트	페어	1 단계	2 단계	3 단계	🌟 코드리뷰 🌟	리뷰어님
  로또	@jum0	PR	PR	-	피드백 정리	@Jbee
  페이먼츠	@shinsehantan	PR	PR	-	피드백 정리	@wow9144
  장바구니	@0imbean0	PR	PR	-	피드백 정리	@VallistA @devJang
  지하철 노선도	@devhyun637	PR	PR	-	피드백 정리	@ysm0622

• 과정 목표

  • React 기반의 프론트엔드 프레임워크를 사용하여, 컴포넌트 기반의 웹어플리케이션을 제작한다.
  • 상태관리 라이브러리의 필요성을 느끼고 Flux Architecture기반의 Redux를 통해 직접 설계한다.
  • 테스트 세트를 개발, 운영하며 안전한 배포 환경에 대한 이해를 높인다.
  • 구현한 애플리케이션을 서버에 배포하고 피드백을 받아 지속적으로 개선한다.

• 관련 블로그 포스트

  • React - 공식문서로 시작하는 리액트 입문 1편
  • React - 공식문서로 시작하는 리액트 입문 2편
  • React - 함수 컴포넌트를 위한 리액트 훅(hook)
  • React - 타입 체크을 위한 PropTypes
  • Redux - 리액트 앱에서 Redux로 상태관리 하기
  • 프론트엔드 테스트에 대한 얕은 고민
  • 협업을 위한 HTTP 기초
  • 우아한테크코스 - '성장'을 위한 선배 개발자님들의 조언

💙 레벨 3 - 팀 프로젝트

• 8주 과정 (2021년 6월 22일 ~ 8월 13일)

  • 여기서만나 프로젝트
    • 프론트엔드: @0imbean0, @365kim
    • 백엔드: @hybeom0720, @daum7766, @RinSabbit, @choijy1705

• 과정 목표

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

• 관련 블로그 포스트

  • [프로젝트매니징] 이슈 관리 & 일정 추정 도전기
  • UI 특강 1탄 - 궁금한 점 답변드립니다.
  • UI 특강 2탄 - 실무에 대하여
  • 사용성 테스트(Usability Test)
  • 순수(?) 리액트 앱에 webpack 설정하기 (without CRA)

• 관련 유튜브 영상

  • [프로젝트 1차 데모] 여기서 만나 - 서비스 최종 기획, 팀 문화 공유
  • [프로젝트 2차 데모] 여기서 만나 - 계획한 이슈 목록 및 완료 목록, 브랜치 전략, API 설계
  • [프로젝트 3차 데모] 여기서 만나 - 테스트 자동화 및 시맨틱 버저닝
  • [프로젝트 4차 데모] 여기서 만나 - FE 성능 리포트 및 BE 정적분석 리포트

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

• 10주 과정 (2021년 8월 24일 ~ 10월 29일)

• 과정 목표

  • 팀 프로젝트로 진행한 결과물을 유지 보수하며 서비스를 운영하는 경험을 한다.
  • 단위 테스트, 통합 테스트, E2E 테스트를 진행하여 검증 가능한 프론트엔드 코드를 작성한다.
  • 브라우저의 동작원리와 성능 요소를 이해하고, 네트워크 최적화, 메모리 최적화 과정을 진행한다.
  • 레거시 코드를 점진적으로 리팩토링하고 애플리케이션 설계 역량을 높인다.

• 관련 블로그 포스트

  • 웹 성능 핵심개념 - 크리티컬 렌더링 패스
  • [성능최적화] 요청 사이즈 다이어트
  • 마크업 & 웹접근성 베이스캠프
  • 여기서만나 UI 개발기
  • CRA 에서 next.js 로 마이그레이션하기
  • AWS 배포 가이드북 - EC2 편
  • AWS 배포 가이드북 - S3 + CloudFront 편
  • 웹 앱 매니페스트 manifest.json 를 작성해보자.

• 관련 유튜브 영상

  • [프로젝트 5차 데모] 여기서 만나 - UI/UX 개선 & 성능 개선

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

• 4주 과정 (2021년 11월 1일 ~ 11월 26일)

• 과정 목표

  • 레벨1 ~ 레벨4 과정에서 부족한 부분에 대한 추가 학습을 한다.
  • 이력서 작성, 모의 면접을 통해 취업 준비를 하고, 리쿠르팅 데이를 통해 기업과 만남의 시간을 가진다.

• 테코톡 발표