React + Express(ES6)로 프로젝트 시작하기

남들은 React + Node.JS + Express라고 많이 하던데 리액트쓰는데 노드가 없을 수가 있나?싶어서 그냥 일케 제목 지었음

 

설치

설치한지 한참 돼서 뭔가 설치 안되면 구글이나 ChatGPT에 물어보세요,,미안

 

시작

npx create-react-app 프로젝트명

프로젝트명에 써진 이름대로 폴더가 만들어지니 괜찮은 단어 위주로 쓰면 좋을듯

난 blog cyblog code-kookmin 등 이런식으로 했었음

더 좋은아이디어 있으면 알려주세요

저 명령어 치고 나면 알아서 설치가 된다. 똑똑한 친구들

 

 

Happy hacking!

 

그럼 이와 같이 practice2 폴더 안에 blog라는 리액트 프로젝트 폴더가 전부 세팅되어있는 걸 볼 수 있다.

 

그리고 뭔가 하기 이전에 '위에서 만든 프로젝트 폴더 안에서' 터미널을 실행해주자!

옛날에 상위폴더에서 npm 설치하려다 자꾸 안돼서 슬펐던 기억이 있음

 

사실 터미널의 맨 아래 보면 프로젝트 폴더 안에서 터미널을 실행하라는 말을 아주 친절하게 알려주고 있다.

cd blog / npm start 하면 바로 리액트가 실행된다!

왼쪽은 크롬 오른쪽은 터미널

리액트만 개발할거면 이대로 시작하면 된다.

 

Express 설치

npm i express

express를 설치해준다

그럼 알아서 설치됨

server.js

다른 친구 express 쓰는거보니 app.js에 바로 개발 시작하던데, 하나의 폴더에서 둘 다 개발해야 하는 입장에선 그럴 수가 없다!

1. /src 폴더 안에 server.js 파일을 만들어주면 기본 세팅 끝

이렇게(맨 아래서 2번째)

ES6 세팅

//CommonJS
const express = require('express');

vs

//ES6
import express from 'express';

둘중에 뭐가 더 이쁜지 생각해보고 아래가 이쁘다 싶으면 이거 따라하고 위에가 이쁘면 아래는 무시하고 프로젝트 시작해도 됩니다

대부분의 Node.js 프로젝트와 라이브러리는 CommonJS 모듈을 사용하기 때문에 보편적이고 안전하다는 장점이 있고,

ES6는 최신 문법을 사용하여 가독성이 높고 간결한 문법을 사용해 개발할 수 있다는 것이라는 장점을 가지고 있다.

근데 전 ES6를 더 선호해서 ㅎㅎ;

 

근데 ES6은 바로 사용할 수 없다. 상술했듯 Node.js의 라이브러리는 CommonJS 모듈을 사용하기 때문..

 

1. babel-node 설치

npm install @babel/core @babel/preset-env @babel-node

 

2. babel.config.json 파일 생성

{
    "presets": [
        "@babel/preset-env"
    ]
}

프로젝트 폴더의 최상위 부분에 babel.config.json 파일을 생성 후 내부에 저렇게 적어둔다.

 

3. server.js 파일 수정

import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('헬로월드');
});

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

매우 기초적인 ES6 express 내용이다!

대충 설명하자면 "/" 루트로 GET요청이 들어오면 '헬로월드'라는 문자를 보내준다,

express를 실행했을 때 몇번 포트에서 실행되고 있는지 알려준다.

4. package.json 파일 수정

터미널에서 아주 쉽게 명령어를 내릴 수 있게 해주는 Node.js

package.json 파일의 내용 중 "scripts" 항목을 수정하면 길고 긴 명령어를 매우 쉽게 사용할 수 있게 해준다.

위에서 고생고생을 하며 설치한 파일을 실행해야겠지?

"start:server": "babel-node src/server.js",

를 적어주면 끝!

혹시 잘 모르겠다는 사람들을 위해 "scripts"의 캡쳐본 올림

 

5. 중간점검

npm run start:server

를 실행하고, 결과로 나온 port로 이동하면 아주 이쁘게 오른쪽 화면이 나온다. (localhost:3000)

 

6. React 파일 build

초기 리액트 파일을 build해준다.

리액트가 매우 좋은 점! 열심히 개발 해놓고, build 한 번이면 지금까지 만든 프로젝트를 어느 곳에서나 쓸 수 있게 하나의 폴더로 만들어준다. 그럼 서버에서는 "/"로 GET 요청이 들어올 시 /build 폴더의 index.html 하나만 보내주면 끝!

괜히 사람들이 리액트 많이 쓰는 것이 아니여

 

npm run build

이 명령어를 내리고 잠시 기다리면 아래처럼 build 폴더를 알아서 만들어준다.

왼쪽 - 터미널 / 오른쪽 - /blog 폴더 안에 /build의 내용물을 볼 수 있다.

build 파일 안을 살펴보면 우리가 알아보기 힘들 정도로 코드가 나열되어있다. 이는 오로지 컴퓨터만 알아보면 되는 파일이니 이렇게 만들어진 것! 못알아먹는 파일을 만들어줬다고 실망하지 말자

 

7. 'path' 설치 및 server.js 수정

'path'는 파일 및 디렉토리 경로를 다루는 데 사용되는 Node.js 내장 모듈이다.

이걸 설치해야 프로젝트 폴더 내에 있는 파일들의 경로를 추적할 수 있다.

npm i path

 

 

우리가 "/"로 접속할 때 의미없는 한마디(3번항목 참고)를 보내던 코드를, /build 폴더 내에 있는 /index.html 파일을 보내도록 수정했다.

 

아래는 수정본이다!

import express from 'express';
//추가
import path from 'path';

const app = express();
const port = 3000;

//추가, Client에서 요청이 오면 Express는 해당 요청 경로에 맞는 정적 파일을 찾아 클라이언트에게 전달
app.use(express.static(path.join(__dirname, '../build')));

//추가, Client가 "/"로 GET 요청을 보내면, 서버는 ../build/index.html 파일을 클라이언트에게 전송
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '../build/index.html'));
});


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

 

이제 리액트의 반가운 얼굴이 보인다!

8. 리액트 프로젝트 수정 시

지금까지의 방법은 /build 폴더 안에 있는 index.html을 보내도록 만들었기 때문에, 리액트를 수정하고 서버와 통신을 할 때 꼭 리액트 파일을 build하고 서버를 켜야 한다.

그러니 UI 만들 때는 npm start로 화면을 봐가면서 하고, 서버와 통신이 잘 되는지 확인하려면 npm run build를 꼭 한 뒤에 npm run start:server를 통해 서버를 켜도록 하자!

 

1. 
npm run build

2.
npm run start:server

 

9. (추가) 서버를 좀 더 편하게 수정하고 싶다면 (nodemon)

nodemon은 프로젝트 파일이 수정될 때마다 서버를 다시 실행시켜주는 편리한 도구이다.

npm i nodemon

먼저 nodemon을 설치하고

 

"start:server": "nodemon --exec babel-node src/server.js",

package.json 파일의 "scripts"를 위와 같이 수정한다.

 

이럼 서버를 수정할 때마다 껐다 킬 필요가 없다!

 

 

이제 당신도 풀스택 개발자

---

출처 : ChatGPT

 

뭔가 잘 안된다면 댓글이나 카톡이나 DM 부탁드려용