저번편 빅데이터 리뷰 분석 웹 만들기(첫 시작)에 이어서 이번포스팅에선 이제 서버를 만들어 보려고 합니다.
저는 서버 백엔드를 웹 처음 배울때, Python의 Django를 배웠기 때문에 Node.js는 처음입니다. 그래서 이해력과 숙련도가 딸려서 잘못 설명한 점이 있을 수 있음을 미리 양해부탁드립니다.
최대한 공부하면서 배운 내용을 초보자가 보기 쉽게 설명해보도록 하겠습니다.
☢ React 시작하기
리액트를 가장 쉽게 사용하는 방법은 바로 create-react-app을 이용하는 것입니다. 페이스북에서 만든 이 명령어는 npx로 쉽게 사용할 수 있습니다.
자세한 사항은 여기를 참조해 주세요!
npm과 npx는 보통 Node.js를 깔면 딸려 다운됩니다. 어차피 Express를 사용해야 하니깐 처음엔 Node.js LTS 버전을 다운받아 줍니다.
깔았으면 이제 Create-React-App을 실행시켜 줍시다. 만들고 싶은 폴더로 쉘을 이용하여 이동합니다. 저는 보통 쉘로 경로를 편하게 쓰고 싶어서 C드라이브 C:\Users\COM 에 폴더를 만들어 관리합니다.
//폴더경로 C:\Users\COM\hotel-review
$ npx create-react-app 앱이름앱이름 부분에 만들 앱이름을 적어 실행시킵니다. 앱이름은 CamelCase가 아닌 snake-case를 사용해서 적어야 합니다.
그러면 앱 폴더가 생성되고 react가 생성됩니다. 이후 폴더로 들어가 앱을 실행시켜 봅니다.
$ cd hotel-review
$ npm start그러면 localhost:3000 3000포트로 앱이 실행되게 됩니다. 다음과 같이 정상적으로 작동하면 React준비 완료!
🚚 Express 시작하기
Express의 공식 설치 방법은 다음에서 참고할 수 있습니다.
그러나 우리는 아까 React를 설치해서 package.json파일이 설치되어 있으므로 생략이 가능합니다.
$ npm install express --save다음과 같은 명령어만 사용하여 설치할 수 있습니다.
- --save 옵션을 통해 설치된 Node 모듈은 package.json 파일 내의 dependencies 목록에 추가됩니다. 이후 app 디렉토리에서 npm install을 실행하면 종속 항목 목록 내의 모듈이 자동으로 설치됩니다.
설치를 완료하면 React폴더안에 다음과 같이 server폴더를 생성하고 server.js파일을 생성합니다.
생성했으면 server.js파일에 다음과 같이 코드를 작성합니다.
const express = require('express')
const app = express()
const port = 3001
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})여기서 중요한것은 port가 3001번 포트라는 것입니다. 아까 React를 실행시킬 때 3000포트였죠? 서버는 3001번포트로 다른 포트를 사용해야 서버와 클라이언트 분리가 가능합니다.
React가 아닌 서버를 실행시키는 법은 좀 다릅니다. 위의 server.js가 존재하는 server폴더로 이동해서 명령어를 입력합니다.
$ cd server
$ node server.js정상적으로 실행되면 콘솔창에 다음과 같이 뜨며 실행이 될 것입니다.
$ node server.js
Example app listening at http://localhost:3001위의 경로로 들어가면 "hello world"가 적힌 server를 발견할 수 있습니다.
여기서 헷갈렸던 부분은 3001번 포트와 3000번 포트의 존재였습니다. 둘다 클라이언트 화면으로 보여지네?? Javascript의 인터프리터 언어라는 특성 때문인지 서버도 웹페이지에서 실행이 가능했습니다. 그러나 서버는 서버고 클라이언트는 클라이언트 입니다. 3000번 포트에서 프론트엔드를 만들 것이고 3001번 포트는 서버로써 데이터가 잘 전달되는지 확인하는 용도로 사용할 것입니다.
준비만 했는데 글이 길어졌네요. ㅎㅎ 다음 포스팅에서 "React에서 Express로 데이터를 보내는 법"과 반대로 "Express에서 React로 데이터 보내는 법"을 배워보겠습니다.
이전 포스팅: 빅데이터 리뷰 분석 웹 만들기(첫 시작)
다음 포스팅: Express와 React 연동하기(React에서 Express로 데이터 보내기)
