[Mini/채팅] 프로젝트 셋팅

 

[Mini/채팅] 초기 프로젝트 셋팅

이번 게시글에서는 채팅을 구현하기 전 프로젝트 정리를 해보려고 한다. 프론트와 백엔드를 다른 프로젝트를 할 것이기 때문에 2개 만들어주어야 하니 빠르게 시작해보자. (못 따라올 경우 마지막에 링크되어 있는 github 주소 보고 clone하면 됩니다.)

프론트 설정하기 (React)

CRA으로 빠르게 프로젝트를 생성해주자.

명령어 : npx create-react-app socketio-chat-client

설치하였으면 App.js, index.js 빼고 쓸모 없는 파일들은 다 지워주도록 하자. 그리고 socket 통신에 사용할 package를 설치해주자.

명령어 : yarn add socket.io-client

프론트 작업은 벌써 끝났다. 이제 백엔드 작업을 하도록 하자.

백엔드 설정하기 (Express)

백엔드 설정은 뭐 할 것이 없다. 백엔드 프로젝트를 생성하고 필요한 package를 설치해주도록 하자.

◆ package 설치

명령어1 : yarn add -D nodemon

명령어2 : yarn add @babel/core @babel/node @babel/preset-env cors dotenv express socket.io

◆ babel 설정

.babelrc 파일을 추가해준 뒤 아래 코드를 복사 붙여넣기 해주자.

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

◆ 실행 script 변경

nodemon과 babel을 적용해주기 위해 package.json 파일에 script를 작성해주자. 아래 코드를 참고하자.

  "scripts": {
    "start:dev": "nodemon --exec babel-node src/index.js"
  }

◆ 기본적인 코드 작성

아래는 아주 간단히 구현해본 src/index.js 파일이다. 설명을 간단하게 붙이자면 프론트랑 출처가 서로 다름으로 cors를 허용 해주었다. 그리고 4000번 포트번호로 http 서버, socket 서버 2개를 실행 시켜주었다.

import cors from "cors";
import * as dotenv from "dotenv";
import express from "express";
import http from "http";
import SocketIO from "socket.io";

dotenv.config();

const PORT = process.env.PORT || 4000;
const app = express();

app.use(cors());
app.use(express.urlencoded());
app.use(express.json());

const serverListening = () => {
  console.log(`# server is running : http://localhost:${PORT}`);
};

const httpServer = http.createServer(app);
const io = SocketIO(httpServer);
httpServer.listen(PORT, serverListening);

io.on("connection", socket => {});​

◆ 참고자료

• 프론트 수정 코드
• 서버 수정 코드

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.