Personal Portfolio

unow30·2020년 10월 19일

Personal Portfolio

목록 보기

1/2

Bare minimum requirements

클라이언트 사이드

React를 사용해야 합니다.
SPA(Single Page App)로 만들어야 합니다.
클라이언트 상에서 페이지 라우팅을 적용하십시오.
- React Router를 사용해봅시다
Stateful한 컴포넌트를 두 개 이상 만드세요. (다음 예시를 참조하세요. 라이브러리를 사용하지 마세요.)
- 메뉴 선택 (selected/deselected) 컴포넌트
- Toggle해서 내용이 가려지고 보여지는 컴포넌트
- 모달 창 컴포넌트

서버 사이드

React 빌드 결과물을 담는 폴더를 만들어서, 웹 서버를 통해 사이트를 제공하게끔 만듭니다.
- create-react-app의 build 기능 (yarn build)을 이용합니다.
node.js 및 express를 이용해서 웹 서버를 만듭니다.
서버를 라우팅한 후, 동일한 주소의 클라이언트 라우팅에 맞춰 렌더링되어야 합니다.
- 이게 무슨 말인지는 Routing lesson을 통해서 알아봅시다.

Getting Started

1. 클라이언트 사이드 셋업

create-react-app 을 이용해서 리액트 프로젝트를 만듭니다.
react router를 yarn 또는 npm을 이용하여 설치합니다.
react router의 Quick Start의 예제 코드를 참고하여, 기본적인 라우팅이 제대로 작동하는지 확인합니다.

서버 사이드 셋업

create-react-app의 build 기능을 이용해 리액트 프로젝트를 빌드합니다.
- 그런데, 빌드는 왜 하는 걸까요? 각자 고민해보세요!
- 새로운 폴더에서 서버 프로젝트를 하나 만듭니다. (npm init -y)
- express를 설치합니다.
- 클라이언트에서 빌드한 파일들을 적당한 폴더에 복사해 넣습니다. (보통 폴더 이름을 public 이라고 짓습니다.)
- 서버 코드를 작성하여, http://localhost:8080/ 과 같은 URL로 접근할 때 클라이언트 파일들이 접근 가능하도록 만듭니다. (다시한번 말씀드리지만, create-react-app의 yarn start를 이용하는 것이 아닙니다)
- 힌트: express에서 정적 파일 제공 https://expressjs.com/ko/starter/static-files.html 문서를 참고합니다.

페이지 설계

위의 프로젝트 셋업이 완료된 후, 실질적인 페이지 설계에 들어가도록 합니다. 앞서 recast.ly 스프린트에서 컴포넌트 구조를 짰을 때 처럼 간단한 그림을 먼저 그리고 시작합시다.
예시

Submission

과제 제출시 제공되는 repo를 fork한 후, 다음과 같은 폴더 구조로 작성한 후, pull request로 제출해주세요.

/
├── /server
│   ├── /public      # React앱을 빌드한 파일
│   ├── index.js     # node.js로 작성된 웹 서버 진입점
│   ├── ...          # 기타 여러분들이 필요에 따라 만드는 파일들
│   └── package.json
│
├── /client
│   ├── README.md    # create-react-app이 만들어낸 파일
│   ├── /build       # React앱을 빌드한 파일
│   ├── /public      # create-react-app이 만들어낸 파일, yarn start로 실행할 시에 쓰입니다
│   └── /src         # React 컴포넌트가 들어가는 폴더
│        ├── App.js
│        ├── App.css
│        ├── index.js
│        ├── index.css
│        ├── ...
│        └── package.json
│
└.gitignore   # gitignore를 이용해서 node_modules가 repository에 포함되지 않도록 하세요