학습 목표

상태를 제어하는 React 컴포넌트에 대해 학습합니다.

• BinaryCalculator 컴포넌트
• CardList 컴포넌트

실습 & 과제 수행

• Market Kalry UI 컴포넌트
• TAING UI 컴포넌트

학습 목표

React Router를 사용해 클라이언트 측 라우팅 방법을 학습합니다.

• 클라이언트 사이드 라우팅 vs. 서버 사이드 라우팅
• React Router 펀더멘탈
• React Router 어드벤스드

학습 목표

테스트 주도 개발 방식으로 React 컴포넌트를 개발하는 방법을 학습합니다.

• Testing Library
• React Testing Library
• jest-dom
• User Interaction

학습 목표

React의 Context API를 활용하는 방법을 학습합니다.

• Context 생성
• Context 값 공급
• Context 값 수요
• Render Props 패턴
• 커스텀 훅 활용

학습 목표

React 프로그래밍에 대한 큰 그림을 이야기 하는 시간을 가집니다.

• Frontend 트랜드
• React 히스토리
• React 특징

학습 목표

클래스 문법으로 React 컴포넌트를 설계하는 방법을 학습합니다.

• 오류 경계(ErrorBoundary) 컴포넌트
• 컴포넌트 오류 캐치 및 처리

학습 목표

학습한 React 프로그래밍 방식과 Vanilla 프로그래밍 방식을 각각 구현한 후 비교합니다.

• Counter 애플리케이션
• Background Changer 애플리케이션

Counter

카운터 컴포넌트 요구사항은 다음과 같습니다. (실습 시작 → Vanilla vs. React)

• 재사용 가능(2개 이상)한 카운터를 작성해야 합니다.
• 함수 또는 클래스 중 선호하는 방식으로 프로그래밍 할 수 있습니다.
• 카운터 초깃값, 최솟값, 최댓값, 변경값 등을 설정할 수 있어야 합니다.
• 카운트 값이 최솟값 또는 최댓값에 도달하면 카운트 감소, 증가 버튼이 비활성화 되어야 합니다.
• 카운트 값이 최솟값 또는 최댓값이 아닐 경우 카운트 감소, 증가 버튼은 활성화 상태입니다.
• 변경값으로 인해 현재 카운트 값이 최솟값 보다 작거나, 최댓값 보다 커지면 최소 또는 최댓값으로 변경되어야 합니다.

Background Changer (수행 과제)

웹 브라우저 뷰포트 또는 특정 영역의 배경 색상을 제어하는 애플리케이션입니다.
컬러 인풋 값이 변경 됨과 동시에 적용하거나, 적용 버튼을 눌러 적용하도록 하는 방법으로 구현합니다.

학습 목표

React의 Context API를 대체하는 상태 관리 라이브러리 사용법을 학습합니다.

• Recoil 라이브러리
• SWR 라이브러리

학습 목표

React 훅(Hooks) API에 대해 학습하고 활용 방법을 익혀봅니다.

• 상태 훅
• 사이드 이펙트 훅
• 참조 훅
• 기타 훅
• 커스텀 훅

학습 목표

React 컴포넌트 간 상태 끌어올리기 전략에 대해 학습합니다.

• 상태 끌어올리기(Lifting State up)
• 커스텀 훅을 사용한 상태 공유

학습 목표

Storybook을 사용해 컴포넌트 주도 개발 방법을 학습합니다.

• Storybook 펀더멘탈
• Storybook 어드벤스드

학습 목표

Tailwind CSS 프레임워크를 사용해 React 컴포넌트 스타일 방법을 학습합니다.

• Tailwind CSS 펀더멘탈
• Tailwind CSS 어드벤스드

학습 목표

TypeScript를 사용해 React 프로그래밍 방법을 학습합니다.

• React + TypeScript

학습 목표

모던 Redux 사용 방법을 학습합니다.

• Redux Toolkit
• RTK Query

학습 목표

고차 컴포넌트를 사용해 컴포넌트 로직을 공유하는 방법을 학습합니다.

• 고차 함수 (HOF: Higher-order Function)
• 고차 컴포넌트 (HOC: Higher-order Component)

학습 목표

React 엘리먼트와 컴포넌트에 대해 이해하고 활용하는 방법을 학습합니다.

• React 엘리먼트 vs. React 컴포넌트
• 함수의 arguments vs. React의 Props
• 컴포넌트 타입 (클래스, 함수)
• React 개발자 도구 (Developer Tools)
• Web Components API와 비교

학습 레벨 진단

프론트엔드 개발 학습 훈련 수준 검토를 위한 퀴즈에 참여하세요.
퀴즈는 총 20문항이며 100점 만점입니다. 😃

• Front-end 학습 레벨 진단

학습 목표

React 학습에 앞서 테스트 주도 개발(TDD)에 익숙해지도록 Jest 테스팅 프레임워크를 학습합니다.
프론트엔드 개발에 사용 되는 테스트 도구 설문 결과는 Testing - The State of JS 2022에서 확인할 수 있습니다.

아래 학습 저장소를 degit 명령으로 로컬 드라이브로 복제한 후 학습합니다.

• yamoo9/ecmascript-jest

버전 체크

학습에 사용되는 JavaScript 런타임, 패키지 관리자, 테스팅 도구 버전입니다.

• ECMAScript 2015+
• Node.js v18
• NPM v8
• Jest v29

학습 목표

웹 브라우저 환경에서 React를 사용하는 방법을 학습 했지만, 그것만으로는 부족합니다.
어떤 점이 부족하며 그것을 채우기 위한 개발 환경을 직접 또는 툴체인을 사용해 구성하는 방법을 학습합니다.

• Webpack
• Create React App
• Vite + Vitest

학습 목표

React 컴포넌트 스타일링 방법 중 CSS 모듈과 Sass 프리 프로세서를 활용하는 방법을 학습합니다.

• CSS 모듈(module)
• Sass 프리 프로세스 & 모듈

학습 목표

React 컴포넌트에 이벤트를 연결하는 방법을 학습합니다.

• React 이벤트 핸들링
• 이벤트 위임, 전파, 핸들링
• React 폼(Form)
• 컨트롤 vs. 언-컨트롤 컴포넌트

학습 목표

XML과 유사한 문법을 제공하는 ECMAScript 확장인 JSX에 대해 학습합니다.

• React 그리고 JSX
• JSX vs. HTML 구조 설계
• JSX의 역할 (creating React Element)
• JSX 컴파일러
  • Babel
  • TypeScript

학습 목표

TypeScript 프로그래밍 언어를 학습합니다.

• TypeScript 펀더멘탈
• TypeScript 어드벤스드

학습 목표

Next.js 프레임워크를 사용한 파일 기반의 라우팅 방법을 학습합니다.

• Next.js 펀더멘탈
• Next.js 어드벤스드

학습 목표

설계가 부족해 읽기 어렵고 유지 보수 또한 힘든 코드를 "스파게티 코드"라 부르며,
개발자는 규격화 된 설계 패턴을 이해하여 스파게티 코드를 만들지 않도록 노력해야 합니다.

React 학습에 앞서 코드 품질을 향상시키는 다양한 설계 방법에 대해 살펴봅니다. 🤔

• 디자인 패턴 (OOP)
• 안티 패턴 피하기
• MV* 아키텍처 패턴
• 컴포넌트 패턴

아래 학습 저장소를 degit 명령으로 로컬 드라이브로 복제한 후 학습합니다.

• yamoo9/mvc-design-patterns

학습 목표

React 라이브러리 코드가 웹 브라우저 환경에서 어떻게 해석되고 작동되는 지 살펴봅니다.

• React 및 ReactDOM API 활용
• 가상(Virtual) 노드 vs. 실제(Actual) DOM 노드

학습 저장소

아래 학습 저장소를 degit 명령으로 로컬 드라이브로 복제한 후 학습합니다.

• yamoo9/react-browser-starter

학습 목표

React 컴포넌트 간 상태 공유 시 발생할 수 있는 이슈에 대해 학습합니다.

• Props Drilling
• Lifting State up
• 글로벌 상태 관리의 필요성

학습 목표

CSS in JS 스타일 방법론에 대해 학습합니다.

• styled-components
• Emotion

학습 목표

클래스 문법으로 React 컴포넌트를 설계하는 방법을 학습합니다.

• 바닐라 스크립트 방식으로 문서 요소 객체 접근/조작
• React 방식으로 문서 요소 객체 접근/조작

학습 목표

디자인 토큰(Design Token)을 생성하고 관리하는 방법을 학습합니다.

• 디자인 토큰이란?
• 디자인 토큰 관리
• 디자인 토큰 CI/CD

학습 목표

FLUX의 등장, 그리고 Redux 아키텍처에 대해 학습합니다.

• FLUX
• Redux 아키텍처

학습 목표

React + JSX 구문 안에서 조건에 따라 처리하는 프로그래밍 방법을 학습합니다.

• 조건부 렌더링
• 문과 식 (결국은 JavaScript)

학습 목표

React + JSX 구문 안에서 조건에 따라 처리하는 프로그래밍 방법을 학습합니다.

• 리스트 렌더링
• 배열 메서드 (원본을 파괴하지 않는 메서드: map, forEach, filter, reduce 등)

React 레벨 테스트

React 애플리케이션 구현 능력을 테스트합니다.
테스트에 통과하면 Advanced 특강에 참여할 자격이 주어집니다.

레벨 테스트는 Fork하여 진행하고, 수행한 결과 URL을 제출합니다.
제출 URL: https://vo.la/CO526N

테스트는 오픈북(공식 문서 참고 등)이지만, 테스트 미션과 유사한 결과를 구현한
타인이 작성한 코드를 커닝하는 것은 금합니다.

요구 사항

• React, ReactDOM CDN을 사용합니다.
• JSX 사용은 선택 사항이며, JSX 사용 시 @babel/standalone을 활용합니다.
• 컴포넌트 타입은 class 또는 function 중 적절한 것을 사용합니다.
• 컴포넌트 props, state를 구분해 효율적으로 구현합니다.
• 컴포넌트 상태가 변경되면 UI가 업데이트 되어야 합니다.
• WAI-ARIA 기술 사양을 검토해 웹 접근성을 준수합니다. (참고: https://vo.la/iO0MZR)
• HTML 코드를 React에서 렌더링하는 방법을 활용합니다. (참고: https://vo.la/YSlH5f)
• style.css 파일을 분석해 컴포넌트 스타일을 적용합니다.

UI 컴포넌트 제작

Accordion 컴포넌트를 구현합니다.

구현 요구사항

요구사항이 구현된 결과물 참고: https://vo.la/5wUZMA

• Accordion, AccordionHandle, AccordionPanel 컴포넌트를 작성합니다.
• 최초 모든 아코디언 아이템은 접힌 상태여야 합니다.
• 아코디언 핸들을 클릭하면 연결된 아코디언 패널이 펼쳐집니다.
• 아코디언 핸들 상태가 변경되면 아이콘 모양도 변경되어야 합니다.
• 다른 아코디언 핸들을 클릭하면 기존의 펼쳐진 아코디언 패널은 접힙니다.
• 이미 펼쳐진 아코디언 패널은 아코디언 핸들을 다시 클릭할 경우 접혀야 합니다.

상태

아코디언 컴포넌트는 아래 작성된 데이터를 props로 전달 받아 렌더링 합니다.

[
  {
    id: 'accordion-a',
    handle: '넷플릭스란 무엇인가요?',
    panel: `
      <p>넷플릭스는 각종 수상 경력에 빛나는 시리즈, 영화, 애니메이션, 다큐멘터리 등 다양한 콘텐츠를 인터넷 연결이 가능한 수천 종의 디바이스에서 시청할 수 있는 스트리밍 서비스입니다.</p>
      <p>저렴한 월 요금으로 원하는 시간에 원하는 만큼 즐길 수 있습니다. 무궁무진한 콘텐츠가 준비되어 있으며 매주 새로운 시리즈와 영화가 제공됩니다.</p>
    `,
  },
  {
    id: 'accordion-b',
    handle: '아이들이 넷플릭스를 봐도 좋을까요?',
    panel: `
      <p>멤버십에 넷플릭스 키즈 환경이 포함되어 있어 자녀가 자기만의 공간에서 가족용 시리즈와 영화를 즐기는 동안 부모가 이를 관리할 수 있습니다.</p>
      <p>키즈 프로필과 더불어 PIN 번호를 이용한 자녀 보호 기능도 있어, 자녀가 시청할 수 있는 콘텐츠의 관람등급을 제한하고 자녀의 시청을 원치 않는 특정 작품을 차단할 수도 있습니다.</p>
    `,
  },
]

아이콘

아코디언 컴포넌트에 사용되는 아이콘 코드를 활용합니다.

chevronDown 아이콘 코드

<svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
  <path clipRule="evenodd" fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" />
</svg>

chevronUp 아이콘 코드

<svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
  <path clipRule="evenodd" fillRule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" />
</svg>

학습 목표

상태를 가지지 않고 표현을 목적으로 하는 React 컴포넌트 디자인에 대해 학습합니다.

• ToggleButton 컴포넌트
• A11yHidden 컴포넌트
• Banner 컴포넌트
• Card 컴포넌트

실습 & 과제 수행

• Market Kalry UI 컴포넌트
• TAING UI 컴포넌트

학습 목표

클래스 문법으로 React 컴포넌트를 설계하는 방법을 학습합니다.

• 클래스 컴포넌트 구성
• 클래스 컴포넌트 상태 & 상태 업데이트

팀 구성

파이널 프로젝트 팀을 빌딩 합니다.

• 자유 주제 (기획 / 디자인 / 개발)
• 프로젝트 기획서 작성 및 제출
• 20개 팀 구성

학습 목표

React Router를 사용해 클라이언트 측 라우팅 방법을 학습합니다.

• 검색 엔진 최적화(SEO) 설정
• 접근성 관점에서의 클라이언트 사이드 라우팅

학습 목표

클래스 문법으로 React 컴포넌트를 설계하는 방법을 학습합니다.

• 클래스 컴포넌트 라이프 사이클 메서드
• 사이트 이펙트 유형과 처리 방법

학습 목표

React와 유사하게 가상 DOM을 구현하고, 실제 DOM에 마운트/업데이트 하는 방법을 학습합니다.

• createElement()
• parseVirtualElement()
• render()

학습 목표

포털을 사용해 React 앱 외부 특정 영역에 컴포넌트 렌더링 하는 방법을 학습합니다.

• React 포털(Portals) 활용
• 접근성(A11Y) & 스타일링

학습 목표

React 컴포넌트의 Props, States에 대해 살펴봅니다.

• React 컴포넌트 Props 객체
• React 컴포넌트의 상태(State) 관리
• React 이벤트 핸들링
• 리-렌더링 알고리즘 (Reconciliation)