[React] Hello, React! 리엑트 서버 띄우기

---

SSH(server side rendering)은 HTML이나 data를 다 만들어야하지만 React는 Client 단에서 그때그때 필요한 데이터를 서버에 호출하여 앞단이 바뀝니다. (Cliend side rendering)

또한 일반적으로 back서버와 front서버를 따로 둔다고합니다!

​

우선 VSCODE를 통해 간단한 리엑트를 해보도록 하겠습니다.

NodeJS가 설치되어있어야합니다!!

​

혹시 git bash가 있다면 열고자 하는 폴더에서 git bash를 실행시키고 code . 명령어를 치면 해당경로로 VSCODE가 열립니다.

​

VSCODE는 텍스트에디터 자체에서 터미널창을 사용할수 있어서 매우 유용합니다.

code . 으로 VSCODE가 켜졌다면 위와같은 화면이 나옵니다.

터미널이 안켜져있다면 위에있는 옵션에서 터미널을 키거나 Ctrl + J를 눌러 터미널을 켜주세요!

​

​

mkdir server 
cd .\server\

우선 mkdir server를 통해 server 폴더를 만들고 해당 경로로 이동해주세요.

​

npm init

npm init을 통해 노드 서버를 만들어주려고 하는데 npm init을 치면 이렇게 이화면이 뜹니다.

​

대부분 그냥 엔터치면서 생략하셔도됩니다!

description의 경우 쓰고 싶은 설명을 써주면 되는데 저는 학원에서 한대로 qclass backend server를 쳤고 author은 이름이나 별명을 적어주시면됩니다!

​

마지막 확인에서 yes까지 입력해주면

server폴더 안에 package.json이라는 파일이 생겼네요!!

​

해당 코드에서 start와 dev를 추가해줍니다.

start는 실제 서버가 쓰일때 실행을 위함이고 dev는 개발 명령어를 사용하기 위함입니다.

즉, start는 배포할 때 dev는 개발모드를 의미합니다.

​

​

npm i express mongoose cookie-parser bcrypt

mongose가 mongodb의 low level의 driver와 같다고 볼수 있습니다.

cookie-parser 쿠키 파싱을 위한 파싱툴을 설치하고 bcrypt는 나중에 사용할건데 비밀번호 암호화를 위함입니다.

설치를 하고 나면 dependencies안에 설치한 것들이 생깁니다!

​

​

npm i -D nodemon

-D 옵션은 개발모드이며 개발모드에서 쓸 디펜던시가 nodemon입니다.

​

​

main이 server로 들어가는 문입니다.

index.js가 문인데 server안에 index.js를 만들어주세요.

index.js가 문이라고 말씀드렸는데 index.js를 만들어야 run이 가능합니다!

( 수업해주신 강사님은 문도 안열고 run하면 안된다고 ,,, )

​

const express = require("express");             // express에 모듈을 담음
const cookieParser = require("cookie-parser");  // cookieParser는 쓰지 않을거지만 혹시 몰라서 일단 넣음

const port = 5000;                              // port는 5000번을 사용할예정

const app = express();                          // express를 호출하여 app을 가져옴...

// parser -> routing
app.use(express.json());                        // 모듈들을 어떻게 사용할건지...
app.use(cookieParser());                        // 순서도 중요하다.

// API router
const APIroute = express.Router();              // 작은 방들을 열어주는
require("./routes/.apirouter.js")(APIroute);       // APIroute를 파라미터로 넣어줌
app.use("/api", APIroute);                      // api로 들어오면 해당 함수 호출

// hello world
app.get("/", (req, res) => {                    
    res.send("hello, world!")                   // send옵션은 문자열 return
});

app.listen(port, () => {
    console.log(`server is running at http://localhost: ${port}`);
});

노드가 최신버전으로 업데이트 되면서 bodyparser였는데 요즘에는 express에 내장이 되어있어서 express만 써도 된다고합니다.

​

index.js가 대문이라고 치면 API router는 대문을 열고 들어오면 있는 여러개의 방문과 같습니다.

require("./routes/.apirouter.js")(APIroute);

위에서 routes/.apiroute로 경로를 주었기 때문에 routes 폴더를 만들고 .apirouter.js 파일을 만들어주세요.

user.js까지 함께 만들겠습니다.

​

module.exports = (app) => {
    require("./user.js")(app);
}

​

module.exports = (app) => {
    app.get("/user", (req, res) => {
        console.log("user router");
    });
}

​

​

npm run dev

npm run dev로 실행시켜보면

​

hello, world!가 잘뜨네요!!

서버 하나를 띄웠습니다!