[Socket Omok] 2. 개발환경 구성하기

Intro

이번 시간엔 아래의 개발환경을 구축해보도록 하겠다.

 

• Back-end: NodeJS + Express
• Front-end: React
• DevTool: Visual Code, Git

---

프로그램 설치

각 프로그램은 아래의 링크를 통해 설치하면 된다.

 

Visual Code

https://code.visualstudio.com/download

 

NodeJS

https://nodejs.org/ko/

 

Git

CLI: https://git-scm.com/downloads

GUI: https://desktop.github.com/

 

.gitignore

https://www.toptal.com/developers/gitignore/api/visualstudiocode,node,react,git

---

환경설정

NodeJS를 설치했다면 콘솔 창에서 npm 명령어를 입력할 수 있을 것이다.

프로젝트 폴더를 생성하고 아래의 명령어를 입력해 package.json 파일을 생성한다.

npm init

 

그다음 필요한 dependencies를 설치한다.

각 dependencies의 용도는 다음과 같다.

 

• @babel/* : ES6 코드를 실행할 수 있게 해 주고, React의 JSX 문법을 parsing 해 준다.
• nodemon: 프로젝트 파일을 수정할 경우 자동으로 서버를 재시작해 준다.
• express: NodeJS에서 서버를 열 수 있게 해준다.
• Socket.io: 서버-클라이언트 간 소켓 통신이 가능하게 해준다.
• React: Front-end 라이브러리

 

npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env @babel/preset-react nodemon
npm install --save express react react-dom socket.io

 

그리고 package.json 안에 아래의 설정을 추가한다.

"type": "module",
"scripts": {
  "dev": "nodemon",
  "test": "echo \"Error: no test specified\" && exit 1"
},

 

현재 package.json 코드는 다음과 같다.

{
  "name": "socket-omok",
  "version": "1.0.0",
  "description": "Online Omok using NodeJS and Socket.io",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "dev": "nodemon",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DevJaewoo/socket-omok.git"
  },
  "author": "DevJaewoo",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/DevJaewoo/socket-omok/issues"
  },
  "homepage": "https://github.com/DevJaewoo/socket-omok#readme",
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.2",
    "@babel/node": "^7.17.10",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "nodemon": "^2.0.16"
  },
  "dependencies": {
    "express": "^4.18.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "socket.io": "^4.5.1"
  }
}

 

그다음 nodemon.json 파일을 만들고 아래의 내용을 입력한다.

위에 설명했듯이 nodemon은 프로젝트 파일이 변경되면 자동으로 서버를 재시작하는데, 프로젝트 중 변경해도 서버를 재시작시키지 않도록 설정하고 싶은 파일이 있을 것이다.

이런 파일들을 nodemon.json 파일에 넣어 ignore 하도록 설정해줄 수 있다.

exec는 말 그대로 서버 재시작 시 실행시킬 명령어이다.

 

{
  "ignore": ["src/public/*"],
  "exec": "babel-node src/server.js"
}

 

babel.config.json 파일을 생성하고 아래의 내용을 입력해 preset을 설정해준다.

프리셋이 설정되어있으면 npm에서 일일이 플러그인을 설치하고 확인할 필요 없이 자동으로 플러그인들을 설치해준다.

 

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

 

Git 설정은 따로 정리하지 않아도 알아서 할 수 있다.

---

서버 동작 테스트

src/server.js 파일을 생성한 뒤, 아래의 express 예제 코드를 입력한다.

 

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

app.get("/", (req, res) => {
  res.send("Hello World!");
});

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

 

그 후 Visual Code의 터미널에 아래의 명령어를 입력하고, 127.0.0.1:3000으로 접속해 Hello, World!가 잘 뜨는지 확인한다.

 

npm run dev