[React] [Express]를 사용한 리액트앱 만들기 (Part1. design)

1달 전에는 엄두도 내지 못했던 리액트 앱 만들기에 재도전해본다.

 

목표: 클라이언트 사이드와 서버 사이드가 있는 포트폴리오 만들기

 

**words in red need to be clarified

 

클라이언트 사이드

Bare minimum requirements:

• React를 사용한 Single Page App (SAP)을 만든다.

  • create-react-app을 이용

• React Router를 사용해 클라이언트 상에서 페이지 라우팅을 적용한다.

  • react router를 yarn 또는 npm을 이용해 설치

• 라이브러리를 사용하지 않고 (사용할 수 있는 라이브러리는 누구?), stateful한 컴포넌트 두 개 이상 만들기

  • 메뉴 선택 (selected/deselected) 컴포넌트

  • Toggle해서 내용이 가려지고 보여지는 컴포넌트

  • 모달 창 컴포넌트

 

Steps:

1. 리액트 앱 생성

생각해보니, 한 달 전까지만해도, 이 개념이 확실하지 않았다. 작업하고 있는 폴더 위치가 어딘지는 물론 알았지만, npx create-react-app 폴더이름을 터미널에 입력했을 때, 이 명령이 현재 내가 작업하고 있는 폴더안에 어떤 리액트 앱을 만들어준다는 걸 몰랐다. 명령어가 저렇게나 obvious한데, 코딩 세계로 오면 마치 미지의 세계, 뜻이 더 있을 것만 같고, 똑똑이에서 흐리멍텅이로 바뀌는것 같다. 자신이 없어진다.... 그래도 오늘은 자신감을 회복할 수 있다! 내가 원하는 "폴더이름"을 넣어 원하는 위치에 리액트 앱을 만들어줄 것이다!

 

여기서 잠깐!! npm install이 아닌 npx를 쓰는 이유는 편리함 때문일것이다. npx는 npm package runner인데, 설치와 일시적 실행이 동시에 가능하다고 한다. create-react-app은 하나의 프로젝트에 한 해서 npm 패키지들 중 한 번만 실행되면 되기 때문에 npx를 써도 되는 것 같다. npm install로 했다면 create-react-app 폴더이름 명령어를 따로 실행해줘야 한다.

 

2. 리액트 라우터

react router dom 설치

 

3. yarn build 클라이언트앱은 빌드 과정이 없으면 배포가 불가능

 

빌드는 웹사이트 배포를 위해서 반드시 필요한 과정

빌드는 배포과정이기 때문에, 업데이트가 있을 때마다 매번 해줘야함.

 

 

 

서버 사이드

Bare minimum requirements:

• React 빌드 결과물을 담는 폴더를 만들어서 웹 서버를 통해 사이트를 제공하게끔 만든다.

  • create-react-app의 build 기능 이용 이게 서버사이드가 맞나? => copy & paste를 말하는듯! 라우팅과 연관있음!

  • 빌드는 왜 하는 걸까? 터미널에 위 명령어를 입력해 새 폴더를 만들면 터미널에 메시지가 출려되는데, 그 중 "npm run build Bundles the app into static files for production" 이런 내용이 있는걸 미루어볼 때, 뭔가 static한 파일 생성과 관련이 있는듯 하다

• Node.js 및 express를 이용해 웹 서버를 만든다.

• 서버를 라우팅한 후, 동일한 주소의 클라이언트 라우팅에 맞춰 렌더링되어야 한다.

 

Steps:

4. 서버 만들기

 

5. 리액트 클라이언트에서 복붙으로 서버 퍼블릭에 넣어 간이 웹 서버를 만들어볼 수 있음

 

6. 배포 create-react-app.dev/docs/deployment