[React]로 Portfolio 만들기

이전에는 html, css, javascript를 사용하여 포트폴리오 웹페이지를 만들어보았는데, 이제 react를 사용해 보다 더 "동적인" Single Page App을 만드는 것이 목표다.

 

먼저, 가장 기본적인 클라이언트 사이드를 셋업한 후, 서버 사이드 셋업을 할 것이다.

 

아래 가이드 라인을 따라 만들어보자.

 

클라이언트 사이드 셋업:

• create-react-app을 이용해 리액트 프로젝트를 만든다 npx create-react-app client (터미널 내용 위에서 말했듯 포트폴리오 폴더 안에 client와 server폴더가 존재해야하기 때문에 client로 폴더를 만들었다)

• react router를 설치한다 npm install --save react-router-dom (터미널에 이렇게 쓰면 됨)

• create-react-app의 build기능을 이용해 리액트 프로젝트를 빌드한다 npm run build

  • 여기서 빌드는 왜 하는걸까?

• react router의 Quick Start의 예제 코드를 참고, 기본적인 라우팅이 제대로 작동하는 확인한다 (아마도 hello world가 뜨는 부분..)

  • 라우팅이 제대로 작동한다는 것은 무엇?

 

서버 사이드 셋업:

• 원래는 여기서 create-react-app의 build기능을 이용해 리액트 프로젝트를 빌드하라고 했지만, build는 client 에서 먼저 했다. 아래에서도 보면 "클라이언트에서 빌드한" 파일들을 서버내에 복사 붙여넣기 한다고 나와있다

• 새로운 폴더(?)에서 서버 프로젝트를 하나 만든다 (그냥.. server 폴더를 만들라는 말인거 같다..?) npm init -y (터미널 안에 이렇게 쓰면 된다고.. 가이드라인은 말한다..)

  • server폴더 안에 index.js파일과 public폴더(이 안에 client에서 빌드한 내용들을 담아줄 것이다)를 생성한다

  • 클라이언트에서 빌드한 파일들을 public폴더에 복사해 넣는다

• express 설치 npm install --save express