React와 express 연동 및 concurrently package로 React 와express 동시에 실행 하기(1)

이 게시물은 React와 node.js의 기초 지식을 가지고 따라 해 보시는 걸 추천합니다.

 

1.  프로젝트 파일 만들기

먼저 원하는 경로에 프로젝트를 만들 루트 폴더를 만듭니다.

 

 

2.  npm init

루트 폴더에 접근해서 터미널에 npm init을 하고 엔터를 치다가 entry point 부분에서 서버를 실행시킬 때 실행될 메인 파일 경로 설정을 해줍니다. 저는 server 폴더를 만들고 그 안에 server.js 파일을 만들 것이기 때문에 server/server.js로 설정을 해놨습니다. 그 후 쭉 엔터를 쳐서 설치 완료를 합니다. 그러면 package.json 파일이 생성됩니다.

 

• 터미널

dv-yeop@ijun-yeob-ui-MacBookAir test % npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) 
version: (1.0.0) 
description: 
entry point: (index.js) server/server.js
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/dv-yeop/Desktop/test/package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "server/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) 
dv-yeop@ijun-yeob-ui-MacBookAir test % npm install express

added 58 packages, and audited 59 packages in 2s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

 

 

완료되면?

 

패키지가 잘깔려 있다.

 

3. server 폴더 server.js 생성

 

4. express와 nodemon 설치

 

터미널에 

 

npm install express
npm install nodemon

 

성공적으로 깔리면? 

node_modules 폴더가 생성되고 dependencies에 express와 nodemon이 잘 생성되었습니다.

 

 

 

5. server.js 에 코드 작성 하고 nodemon으로 실행해 보기 

 

const express = require('express');
const app = express();

app.listen('9000' , () => { console.log('hello world')});

 

 

 

서버가 실행 성공 되면 hello world 가 콘솔에 출력되도록 해놓고 터미널에 nodemon '경로'를 입력해서 실행합니다.

저는 경로가 server/server.js 이기 때문에 nodemon server/server.js로 실행해 보겠습니다.

 

 

잘 실행되는 것을 확인할 수 있습니다.

다음 게시물에서 client 폴더를 생성하고 연동하는 법을 다뤄 보겠습니다!

 

React와 node.js 기초 공부를 하고  둘이 한 레퍼지토리에서 연동해서 써보고 싶어서
공부해서 적용해 보았습니다. 혹시 틀린 점이 있거나 더 좋은 방법이 있으면 피드백 부탁드립니다!