20220303 개발일지 #socket.io

nodeJS로 socket.io를 구현하기 위해 먼저 노마드코더에서 무료로 제공하는 줌 클론코딩 강의를 듣고 해당 코드를 가지고 서버에 올려서 프론트와 연결해보기로 했다.

강의 듣기 전에 node에 대해서 너무 모르는 상태라서 코드잇에 있는 강의를 앞부분만 들었다.

비동기 개념이 너무 신기했고, 서버를 정말 간단하게 구현할 수 있다는 것이 놀라웠다...!

아직 스프링도 잘 이해한 상태가 아니라서 제대로 비교하기는 그렇지만 확실히 다른 타입인 것 같다.

 

또, 자바와 스프링을 조금 하고 공부를 시작하니 라이브러리를 인포트에서 쓴다던지, 필요한 객체를 선언하는 거라든지 클라이언트와 서버에 대한 기본적인 관계는 이해가 되어 있어서 가볍게 지나갈 수 있었다.

하나를 잘 해놓으면 다른 언어나 프레임워크를 배우기 수월하다던데 무슨 의미인지 조금 알 것 같다.

(그런것 치고는 너무 조금 하다가 다른 걸 건든 것 같지만...?)

 

줌 클론코딩 강의는 프론트 부분까지 이해하기에는 무리가 있어서 전체적인 흐름만 보고 서버 위주로 들었다.

다 듣고 나니 먼저 발생한 문제는 서버와 프론트 코드를 어떻게 분리해야 하고 배포는 어떻게 해야지?, 라는 부분이었다...

 

이게 코드가 아에 구분되는 게 아니라 같이 구현해서 돌리는 거라서 노드에 js에 대한 지식이 없는 상태로 나누는게 쉽지 않았다.

또, EC2로 배포한 뒤에 로컬에서 작업하는 프론트와 붙이면 cors문제가 발생할 거라서 이 부분도 고민이 있었다.

처음에는 다른 조에서 테스트를 하기 위해 로컬에서 서버와 프론트의 포트 번호만 다르게 해서 붙였다고 하셔서 이렇게 해보려고 했는데 프론트 쪽 코드를 어떻게 돌려야 하는지 몰라서 포기했다.

 

일단 어떻게 ec2로 배포하는지 몰라서 한참 해맸다.(방법은 다른 글에 정리해놨다)

git clone으로 코드를 가져오기도 하던데 그냥 Filezila로 옮겨도 잘 된다.

node, npm을 설치하고 node server.js 등으로 서버를 실행하면 된다.

 

아니나 다를까 프론트와 붙이자 마자 에러가 떴다.

처음에 cors가 떠서 계속 코드를 수정했는데(다른 팀 node/react분들이 도와주셨다!!!) 그게 아니라 서버 쪽과 연결 자체가 안되는 것 같았다.

 

그래서 다른 코드로 테스트를 해보기 위해 간단한 socket.io example 코드를 찾아서 해봤다.

node로 서버 자체를 잘못돌리는 건가 걱정을 많이 했는데, 다행히 잘 작동하는 것을 확인했다!

연결시 console에 socket.io가 찍히게 해서 들어오는 것도 확인하고, 간단히 on과 emit으로 메세지가 들어오는 것도 확인했다.

 

프론트와 이렇게 동일한 이벤트 명과 on, emit 등 간단한 메소드로 자유롭게 데이터를 주고받을 수 있다는 게 너무 신기하다!!

우리는 webRTC를 위한 signalling 서버로 socket.io를 구현할거라 서버에서 직접 클라이언트와 데이터를 주고받는다기 보다는, 클라이언트 간의 연결을 위해 서로 필요한 정보들을 서버를 통해 양쪽에 보내주는 역할만 하고 있다.

정말 노마드코더에서 socket.io가 정말 멋지다고 한 말을 십분 공감했다.

 

사실 spring으로 signalling서버를 구현하기는 했지만 사실 예제코드를 거의 가져다 쓴거고 서버에서 view까지 핸들하는 컨트롤러라서 제대로 이해하지는 못해서 딱, 뭐라고 비교하기는 어렵다.

그럼에도 node를 잘 모르는 사람도 2일 안에 코드를 대략이라도 이해하고 다른 기능들도 도전해볼 수 있겠다고 생각한 것만 해도 socekt.io의 매력같다.(프론트와 서버가 연결하고 데이터를 주고받는 기본적인 방식은 websocket과 socket.io모두 비슷한데, socket.io가 여러 편의 기능들을 더 지원하는 것 같다.)

 

연결이 된 코드는 express도 사용하지 않는 코드였고, 처음에 시도했던 줌 클론코딩 코드는 nodemon과 express를 사용한다. 아마 여기서 제대로 서버가 작동하지 않은 것 같아서 코드를 다시 수정해보기로 했다.

항해 이전 기수의 코드를 참고해서(그냥 긁어와서 수정했다...) express만 사용하고 nodemon은 제외한 코드로 수정했다.

cors의 경우 우선 cors미들웨어를 이용해서 모든 값을 허용해주었다.

그리고 https를 다른 팀원분이 작업하고 계셨는데, 노드로도 https 서버 구현을 성공하셔서!!! 그 코드를 참고해서 https로도 서버를 돌렸다.

사실 서버는 돌아가는데 제대로 동작하는지는 모르겠다.

보통 잘 돌아가면 listen으로 console을 출력해서 확인하는 것 같은데 왜인지 계속 에러가 나서 일단 이부분을 지웠다.

현재 서버 코드에 클라이언트와 socket연결이 된 후에 console이 찍히게 되어 있어서 제대로 확인이 안된다.

 

내일 낮에 프론트와 테스트해보기로 했는데 제발 오류떠도 금방 고쳤으면 좋겠다!!!