<div id="readability-page-1" class="page"><div id="post-content" itemprop="articleBody">1장. 준비
<ul>
<li>1부 강의 요약. 여기서 다루지 않은 고급 주제와 훅이 이 수업의 주요 내용</li>
<li>실습 어플리케이션 미리 보기. 배달 어플리케이션의 주요 화면 세 개</li>
<li>실습 환경 이해. 개발 도구, 웹팩, 바벨, 워크스페이스 설정</li>
</ul>
2장. 상품목록 화면
<ul>
<li>단일 컴포넌트로 개발한 뒤 세부 컴포넌트로 분리하는 방식</li>
<li>역할에 따라 작은 컴포넌트로 분리해서 비교적 명확하고 재사용할 수 있는 코드</li>
</ul>
3장. 주문내역 화면
<ul>
<li>리액트로 사고하기 방식: UI 계층 구조 나누기, 정적 버전 만들기, 최소한의 상태와 위치 정하기</li>
<li>주문내역 화면의 UI 계층을 나눠 정적 버전 개발
<ul>
<li>기존 컴포넌트 활용: Page, Title, Navbar</li>
<li>신규 컴포넌트 추가: Card, XXXCard</li>
</ul>
</li>
<li>최소한의 상태를 order를 정의하고 OrderPage 컴포넌트에 위치</li>
</ul>
4장. 장바구니 화면
<ul>
<li>리액트로 사고하기 방식. UI 계층 구조 나누기, 정적 버전 만들기, 최소한의 상태와 위치 정하기, 역방향 데이터 추가</li>
<li>장바구니 화면의 UI 계층을 나눠 정적 버전 개발
<ul>
<li>기존 컴포넌트 활용: Page, Title, Navbar, ProductItem</li>
<li>신규 컴포넌트 추가: FormControl, OrderForm, PaymentButton</li>
</ul>
</li>
<li>최소한의 상태를 prodcut를 정의하고 CartPage 컴포넌트에 위치</li>
<li>OrderForm에서 CartPage로 데이터 흐름을 추가함. 역방향 데이터</li>
<li>리액트 레프에 대해 학습하고 OrderForm에 적용해 비제어 컴포넌트로 구성</li>
</ul>
--
이번 장에서 구현한 요구사항과 남은 요구사항을 비교해 보자.
공통
<ul>
<li><del>0.1 화면구성: 3단 레이아웃이다. 상단, 중앙, 하단으로 구성된다. (UI)</del></li>
<li>0.2 네비게이션바: 메뉴목록, 주문내역화면을 이동할 수 있다. (UI, 라우팅)</li>
<li>0.3 네비게이션바: 현재 화면과 같은 링크를 선택한다. (UI, 라우팅)</li>
<li>0.4 API 호출시 로딩 메세지를 다이얼로그로 표시한다. (다이얼로그)</li>
<li>0.5 예외 처리용 메세지를 다이얼로그로 표시한다. (다이얼로그)</li>
</ul>
화면1. 상품 목록
<ul>
<li><del>1.1 "메뉴목록" 제목을 상단에 표시한다. (UI)</del></li>
<li><del>1.2 주문할 수 있는 상품 목록을 중앙에 표시한다. (UI)</del></li>
<li>1.3 주문하기 버튼을 클릭하면 해당 상품을 담고 장바구니 화면으로 이동한다. (네비게이션)</li>
<li><del>1.4 네비게이션바가 하단에 위치한다. (UI)</del></li>
</ul>
화면2. 장바구니
<ul>
<li><del>2.1 "장바구니" 제목을 상단에 표시한다. (UI)</del></li>
<li><del>2.2 제목 좌측에 뒤로 가기 버튼을 표시한다. (UI)</del></li>
<li><del>2.3 선택한 상품 정보를 중앙에 표시한다. (UI)</del></li>
<li><del>2.4 주문 정보를 입력할 수 있는 폼을 중앙에 표시한다. (UI)</del></li>
<li><del>2.5 폼 입력 값을 검증하고 오류를 표시한다. (폼)</del></li>
<li><del>2.6 결제하기 버튼을 하단에 표시한다. (UI)</del></li>
<li>2.7 결제하기 버튼을 클릭하면 사용자 확인을 받는다. (다이얼로그)</li>
<li>2.8 결제 성공 후 주문내역 화면으로 이동한다. (네비게이션)</li>
</ul>
화면3. 주문 내역
<ul>
<li><del>3.1 "주문내역" 제목을 상단에 표시한다. (UI)</del></li>
<li><del>3.2 주문내역 정보를 불러와 중앙에 표시한다. (UI)</del></li>
<li><del>3.3 네비게이션바가 하단에 위치한다. (UI)</del></li>
</ul>
UI는 모두 구현했다. 남은 것은 라우팅, 폼, 다이얼로그 정도다. 이러한 요구사항을 소화해 내려면 리액트의 또 다른 고급 기능을 알아야한다. 다음 편에서는 이전 수업에서 다루지 않았던 리액트 고급주제를 다루겠다.</div></div>

김정환 블로그 RSS Feed

김정환

1장. 준비 1부 강의 요약. 여기서 다루지 않은 고급 주제와 훅이 이 수업의 주요 내용 실습 어플리케이션 미리 보기. 배달 어플리케이션의 주요 화면 세 개 실습 환경 이해. 개발 도구, 웹팩, 바벨, 워크스페이스 설정…

[리액트 2부] 1편 최종정리

댓글