- 프론트엔드의 기본이 되는 HTML, CSS, JavaScript에 대한 기본 문법을 익혀 프로그래밍을 합니다.
- 구현한 코드에 대해 E2E 테스트, 유닛 테스트를 작성하고 읽기 좋은 코드로 리팩터링합니다.
| 미션명 | 설명 | 페어 / 리뷰어 |
1단계 | 2단계 | 키워드 |
|---|---|---|---|---|---|
| 계산기 | 온보딩 미션으로, 간단한 계산기를 만드는 미션입니다. 페어 프로그래밍을 처음 경험해보고, 요구사항에 맞추어 미션을 진행합니다. |
하리 | PR | - | DOM, BOM, Event, Data Type, Cypress |
| 자동차 경주 데모 |
테스트 코드를 통해서 보다 생산적으로 개발할 수 있는 사이클과, 브라우저에 대해 알아봅니다. |
하리 / 노스 |
PR | PR | TDD, BDD, Timer API, 이벤트 루프, 실행 컨텍스트, 스코프, 호스팅, CSS flexbox |
| 행운의 로또 데모 |
프론트엔드의 모델링과 설계에 대해 학습합니다. UI와 도메인 영역을 나누고, 역할에 따른 모듈/클래스 분리를 연습합니다. |
마르코 / 아사 |
PR | PR | Jest, OOP 기초, Object, module, 번들러, prototype, class, 함수와 클로저, this, CSS grid |
| 나만의 유튜브 강의실 데모 |
JS의 비동기 개념을 잘 이해하고 사용합니다. API 통신을 처리할 때 기술적, UX적으로 고려해야 하는 케이스를 고민하고 대응하는 경험을 쌓습니다. |
티거 / YB |
PR | PR | HTTP 기초, RESTful API, 비동기, scroll, throttle, debounce, 반응형 |
| 자판기 SPA 데모 |
프레임워크 없이 SPA를 직접 구현합니다. 웹에서 인증을 처리하는 방법을 이해합니다. TypeScript의 기본 문법을 익히며 필요성을 경험해보고, 객체지향적 관점에서 활용합니다. |
민초 / Vallista |
PR | PR | SPA, 상태 관리, Browser History, Typescript 기초 |
- React 기반의 프론트엔드 웹 애플리케이션을 제작합니다.
- 재사용 가능한 컴포넌트를 고민하고 설계합니다.
- 상태 관리 라이브러리를 활용하며 상태 관리의 필요성에 대해 이해합니다.
- 프론트엔드 웹 애플리케이션에서 고려해야할 테스트 범위와 종류에 대해 학습합니다.
| 미션명 | 설명 | 페어 / 리뷰어 |
1단계 | 2단계 | 3단계 | 키워드 |
|---|---|---|---|---|---|---|
| 계산기 데모 |
온보딩 미션으로, 미션보다는 React를 체험하며 정말 기본적인 개념들을 습득하는 것에 초점을 두고 있습니다. |
우연, 비녀 / 율리 |
PR | PR | - | React 입문, Component, 선언형 |
| 페이먼츠 데모 |
모바일 타겟의 웹 앱을 구현합니다. 사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다. 재사용 가능한 Component를 직접 작성합니다. |
록바 / 아사 |
PR | PR | PR | UI/UX, storybook, component 재사용, Hook, controlled/uncontrolled, context API |
| 장바구니 데모 |
데스크탑 타겟의 웹 앱을 구현합니다. 재방문을 고려한 UI/UX에 대해 고민해봅니다. 상태 관리를 위해 Flux Architecture 기반의 Redux를 활용합니다. |
해리 / YB, 포코 |
PR | PR | - | Flux, Redux, Router |
| 장바구니 - 협업 데모 (EC2 닫힘) |
온전히 완성된 모던 웹 애플리케이션을 상상하며 구현합니다. 사용자 인증에 대해 고민합니다. 새로운 상태 관리 방법에 대해 고민합니다. |
마르코 / 리트 |
PR | PR | - | MSW, 인증/인가, 백앤드와의 협업 |
- 개발 프로세스 기반으로 프로젝트를 진행, 협업하는 경험을 합니다.
- 서비스를 기획, 구현, 배포해 실사용자가 사용하도록 개발하는 경험을 합니다.
- 분업보다는 진한 협업을 경험합니다.
- 팀 원칙을 세워 자기 팀만의 색깔을 만듭니다.
- 팀워크를 형성합니다.
- Typescript를 팀 프로젝트에 적용합니다.
- 우리 팀만의 성능 리포트를 작성합니다.
| 프로젝트명 | 소개 | 팀원 | 코치 |
|---|---|---|---|
| 속닥속닥 | 속닥속닥은 우아한테크코스 익명 대나무숲 커뮤니티입니다. 평소에 전하지 못한 말이나 기명으로 하기 힘든 말들을 전합니다. |
💚 동키콩, 헌치, 이스트, 크리스, 조시, 토르 💚 | 토미 |
- 팀 프로젝트로 진행한 결과물을 유지 보수하며 서비스를 운영하는 경험을 합니다.
- 프론트엔드 성능을 측정, 분석하고 개선해본다.
- 성능 개선과 관련된 네트워크 키워드, 브라우저 렌더링 과정에 대한 이해도를 높인다.
- TypeScript를 깊이있게 이해하고 다뤄본다.
- 웹접근성 시나리오에 따라 적절한 속성을 추가할 수 있는 역량을 향상해본다.
| 미션명 | 설명 | 리뷰어 | 1단계 | 2단계 | 키워드 |
|---|---|---|---|---|---|
| Memegle 데모 |
현재 우리 서비스의 성능 수준을 측정할 수 있다. 성능 개선 작업이 필요하다면 어떤 영역에서 필요한 지 측정 결과를 분석해 문제를 정의할 수 있다. |
자스민 | PR | - | HTTP, 브라우저 렌더링 과정 minify, uglify, image optimization, webpack, CloudFront, Code Splitting, Tree Shaking |
| Module Typing | 모듈을 고려하여 타이핑합니다. 사용될 곳을 위한 타이핑을 합니다. |
안 | PR | - | 메타 타입, 타입 시스템, 공변성/반공변성 |
| 항공사 웹사이트 데모 |
기능을 개발하는 것뿐만 아니라 더 큰 가치를 창출해내는 소프트웨어 장인으로 가는 길을 걷기 위해 웹 접근성에 대한 관심도 놓치지 않는다. 제작한 사이트를 스크린리더가 읽을 수 있도록 한다. |
도리 | PR | PR | 웹 접근성, aria, 스크린리더 |