[#. Node] Node+React 시작하기, 초기 세팅하기

 

 

 

 

 

 

 

① node 시작하기, express-generator 설치

 

mkdir node-react
npm install --save express-generator

 

express-generator 패키지를 통해서 프레임워크에 필요한 pakage.json과 기본 구조를 잡을 수 있다

 

 

express <프로젝트명> 

 

새 express 프로젝트를 생성한다

 

 

cd <프로젝트명>

npm install 

 

생성한 프로젝트로 이동해서 npm 모듈을 설치해 준다

 

 

 

 

이 구조로 생성이 된다!

 

 

 

bin/www
http 모듈에 express 모듈을 연결하며, 포트를 지정
서버를 실행하는 스크립트

port를 3000=>5000으로 수정함 

 

public
각종 리소스들을 모아놓은 폴더로 외부(브라우저 등의 클라이언트)에서 접근 가능한 파일들을 모아 둔 디렉토리

 

routes
라우터들을 관리

 

views
view 파일들을 관리

 

app.js
핵심적인 서버 역할

 

 

 

 

② React 시작하기

 

npx create-react-app frontend

 

 

 

구조가 이렇게 되는 것을 확인할 수 있다

 

 

 

 

 

③ Node, React 각각 실행하기

 

 

⑴ Node 실행

 

cd backend
npm run start
//혹은
node ./bin/www

 

 

 

⑵ React 실행

 

cd frontend
npm run start

 

 

각각의 실행화면이 잘 뜰 것이다

 

 

 

 

 

 

 

 

 

 

※ express-generator 사용하지 않고 node 시작하기

 

 

 

① 폴더 생성 및 패키지 설치

 

mkdir backend
cd backend
npm init
npm install --save express
npm install --save body-parser

 

 

② backend/server.js 생성 후 내용 추가

 

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

// parse requests of content-type: application/json
app.use(bodyParser.json());

// parse requests of content-type: application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// simple route
app.get("/", (req, res) => {
  res.json({ test: "success!" });
});

// set port, listen for requests
app.listen(5000, () => {
  console.log("Server is running on port 5000.");
});