[React] 리액트 & socket.io 기반 채팅 어플리케이션 만들기 - 1

https://www.youtube.com/watch?v=ZwFA3YMfkoc 

https://github.com/adrianhajdin/project_chat_application

adrianhajdin/project_chat_application

 

이 영상을 보며 공부하고 따라 해 보려고 한다! 아 실행하기 앞서 node가 설치되어있어야 한다.

 

과정을 따라 하며 실행한 것을 블로그에 상세히 올리는 것이니 따라 해도 괜찮을 것이다. 

 

영상을 참고하되 이해하기 편하게 조금씩 코드를 바꾸기도 할 것이다!

 

---

Visual Studio Code에서 만들 파일을 생성하고 연결해준다.

 

나는 c:에 nodeExam 파일에 reactChatting 파일을 만들어서 연결해주었다.

 

client라는 react app을 생성해라

 

 

client라는 이름으로 react app이 생성됨을 확인할 수 있다.

 

console 차에도 설치됐다고 npm start 실행하라고 뜨는데 말 그대로 해줘야 한다! 그럼 서버와 연결이 된다.

 

 

 

localhost:3000으로 react 서버가 연결되었다.

 

 

터미널에 react-router-dom을 설치한다.

 

package.json에 설치됨을 확인할 수 있다.

 

 

App.js를 수정해준다.

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Chat from './components/Chat'
import Join from './components/Join'

const App = () => {
  return (
    <Router>
      <Route path='/' component={Join} />
      <Route path='/chat' component={Chat} />
    </Router>
  )
}

export default App

 

Chat.js

import React from 'react'

export const Chat = () => {
    return (
        <div>
            채팅
        </div>
    )
}

export default Chat

 

Join.js

import React from 'react'

const Join = () => {
    return (
        <div>
            가입
        </div>
    )
}

export default Join

 

터미널을 열어준다.

 

 

 

서버 확인할 수 있다.

 

init : 초기화

 

 

server 파일 안에 package.json이 생성되었다.

 

server 폴더에 index.js 파일도 만들어 준다.

 

express 설치하기

 

소켓통신을 위해 라이브러리를 설치한다.

socket.io 설치하기

 

설치가 완료됐으면 아까 만든 index.js에 내용을 추가한다.

 

index.js

const express = require('express')
const socketio = require('socket.io')
const http = require('http')

const PORT = process.env.PORT || 5000

const app = express();
const server = http.createServer(app)
const io = socketio(server)
server.listen(PORT,()=>console.log(`서버가 ${PORT} 에서 시작되었어요`))

 

 

서버가 5000번 포트에서 index.js 를돌린다.

 

 

/chat 추가

 

서버와 연결이 되었다. 만약 나오지 않는다면 터미널에 

npm run start

 

하면 될 것이다.