History 2

Tic Tac Toe v2.0

채팅 기능을 추가해보자 ! 🏃🏻

앞번에는 React 공식 문서에 있는 자습서를 따라 만들면서 클래스형으로 작성된 예제를 함수형으로 만드는 것을 시도해 보았다. 이번에는 좀 더 게임다운 게임을 만들기 위해(?) 소켓 통신을 통한 채팅 기능 및 실시간 게임 기능을 추가해 보고자 한다.

WebSocket

웹소켓은 클라이언트와 서버 사이에서 상호 작용 가능한 통신 세션을 설정할 수 있는 기술이다. Poling이 주기적으로 일어나, 클라이언트는 정보가 있든 없는 항상 응답을 받을 수 있다. (이벤트 중심의 응답을 받는다.)

별도의 서버가 필요하므로 node server를 만들어줘야한다.

제작하면서 막혔던 부분 간단한 기록

1. Node.js에서 express import가 안되는 문제

Node.js에서 ES 모듈(import/export) 사용하기

아하 ! node에서는 ES6문법을 사용하기 위해서 Babel이 필요했었다.

2. node.js socket CORS 문제

Client

const options = {
		rememberUpgrade: true,
		transports: ["websocket"],
		secure: true,
		rejectUnauthorized: false,
	};

Server

var app = require("http").createServer(function (req, res) {
	// Set CORS headers
	res.setHeader("Access-Control-Allow-Origin", "*");
	res.setHeader("Access-Control-Request-Method", "*");
	res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
	res.setHeader("Access-Control-Allow-Headers", "*");
	if (req.method === "OPTIONS" || req.method === "GET") {
		res.writeHead(200);
		res.end();
		return;
	}
});

3. 메시지 중복 문제

서버에서는 내가 전송한만큼 메시지가 전송되지만, 클라이언트 측에서는 엄청나게 많이 출력된다. 렌더링과 관계가 있는 게 아닐까? 이벤트 리스너는 한 번만 등록될 수 있도록 useEffect안에 넣어야 한다.

4. useState 관리

useState를 여러 개를 쓰는 게 아니라 하나로 사용할 수 없을까? → 객체의 얕은 복사 방법 확인하자..

5. JS 문법에 대해서

({ message, userName })

6. 소켓 이벤트 리스너 안에서 useState가 실행안된 이유

실행 컨텍스트 문제 !!

setChat이 다시 실행될 때의 실행 컨텍스트는 아무런 값이 없는 chat을 가지고 오기 때문에 데이터가 계속 초기화된다. 따라서 이를 해결하기 위해서는 다른 실행컨텍스트에 있는 변수에 저장하는 것이 좋다.

7. 작업 중간에도 commit 을하자....

커밋을 안하니 실수로 작업한 걸 날려먹었다. 깃은 소중하게 분기별로 잘 나눠서 커밋을 때리자. git rese —hard → git reflog 로 복구 가능하다...

마무리

내가 기능을 추가해보고 싶다고 생각한 것을 주체적으로 찾아가며 만들었던 경험이 재미있었다. 앞으로도 내가 필요하다고 생각하는 것들, 재미있어 보이는 것들을 찾아내서 스스로 만들어보자. 기술적으로는 hooks 이나 디자인패턴 등에 대해서 관심이 많이 생겼다.

참고

리액트 & socket.io 기반 채팅 어플리케이션 만들기 - 서버 편

[react] socket.io 로 채팅 만들기