React & Node.js - Node.js Express 서버 개발환경 구축하기

www.sublimetext.com/3

Download - Sublime Text

 

1. client 파일을 만들어 모든 파일을 클라이언트 파일로 다 넣어주기

 

 

2.  Sublime Text를 이용하여 package.json 파일을 하나 생성해서 management 폴더에 넣기

 

 

3. vscode 편집기에서 package.json 코딩하기

{
    "name": "managemnet",
    "version": "1.0.0",
    "scripts": {
        "client": "cd client && yarn start",
        "server": "nodemon server.js",
        "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
    },
    "dependencies": {
        "body-parser": "^1.18.3",
        "express": "^4.16.4"
    },
    "devDependencies": {
        "concurrently": "^4.0.1"
    }
}

 

4.  gitignore 파일

 

 

5. vscode 터미널

npm install -g nodemon 

위 명령어를 vscode terminal 에 실행하면 원래는 management (root 파일을 지칭함) 파일 안에 node_modules 파일이 생성이 되는데.. 

management 파일 안에 node_modules 파일이 생성되지 않는다면 아래와 같이 명령어 차례대로 실행하기

(원래 기본적으로 management 파일 만들때 node_modules 파일이 생성되어짐)

npm install nodemon //node_modules 폴더가 생성됨.
npm install -g nodemon // 글로벌변수를 추가해서 설치
npm install -g express //실행하기

 

 

 

이번엔 management  파일로 들어가 server.js 파일 생성해주고 아래와 같이 코드작성하기

 

6. server.js

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}`));

 

vscode 터미널에서 아래 명령어 입력해서 실행해보기 (서버 동작확인하기)

node server.js

 

 

아래처럼 주소창에 localhost:5000 으로 들어가보기(서버 동작확인하기)

 

 

아래처럼 주소창에 localhost:5000/api/hello 으로 들어가보기(서버 동작확인하기)

 

 

node server.js 실행하면 잘 돌아간다!!

서버 중지 원하면 맥북에서 command + C 가 아닌 ctrl + C 눌러주기@@