Node.js express

웹서버를 구현하기 위에 Nodejs express서버를 구축합니다.

 

일반적으로 react로 개발하는 사람은 NodeJs가 같은 언어를 기반으로 한다는 점으로 더 쉽기에 nodejs를 웹서버로 사용하는 경우가 많습니다.

 

지금까지 개발한 클라이언트 프로그램과 API역할을 하는 NodeJS를 구축합니다.

 

환경 설정.

 

client 모듈을생성하고 root폴더에서는 서버 모듈을 실행하도록 명시하는 package.json파일을 만듭니다.

즉 서버와 클라이언트를 동시에 실행시킬 수 있도록 합니다.

 

 

 

 

클라이언트를 어떻게 시작하는지는 scripts에 명시합니다.

 

1.  "client" : "cd client && yarn start"

client 폴더로 가서 yarn start로 리액트를 동작시킵니다.

 

2.  "server" : "nodemon server.js",

웹서버는 server.js를 실행시킨다.

 

3. "dev"  : "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""

개발환경에서ㅏ 실행을 시킬 때 서버와 클라이언트를 동시에 실행시킴으로써 리액트와 노드 js가 둘 다 돌아가도록 설정을 합니다.

 

그리고 버전 설정을 추가해줍니다.

이제 gitignore파일을 client와 서버에 각각 복사해 붙여 넣습니다.

노드 모듈을 git에 올리는 것은 비효율적이기 때문입니다.

 

터미널에서 npm install nodemon을 입력한다. (node_modules 폴더가 생성됩니다.)

2. npm install -g nodemon으로 글로벌 변수를 추가해서 설치한다.)

4. npm install -g express 명령을 실행한다.

 

다음 server.js로 서버를 켠다고 설정했으니 express에 대한 설정을 해줍니다.

// 서버 모듈설정
const express = require('express'); 
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended : true}));

app.get('/api/hello', (req, res) =>{

    res.send({message : 'Hello Express!'});

});

app.listen(port ,  ()=> console.log(`Listening on port ${port}`));

 

이제 터미널에서 node server.js를 실행시킨 뒤 5000번 포트를 할당했으니 url에 다음과 같이 치고 결과를 확인합니다.