Node.js를 이용해 채팅 웹 어플리케이션 따라 만들어보기

아직 실력이 충분치 않은 개발자 지망생으로써 간단한 프로젝트라도 따라 만들 것이 있으면 좋겠다고 생각하여

 

찾다보니

 

https://codeflow.study/courses/96

채팅 서버와 웹 어플리케이션 데모 - Codeflow

이런 좋은 커리큘럼을 찾게 되어서 따라 만들어보게 되었다.

 

본 커리큘럼을 통해서 GUI 구조를 이해하고 JavaScript와 React.js, Node.js로

 

채팅 서버와 프론트 어플리케이션을 만들어 본다.

 

지금은 보이는 코드를 따라 치는 수준이지만

 

앞으로 이 코드와 구조를 하나하나 뜯어보면서 완벽히 이해하는 것이 목표이다.

 

 

 

 

 

 

 

 

 

 

우선 전체적인 구조는 채팅방에 사용할 유저 프로필을 만들 수 있는 페이지,

 

기존의 채팅방을 불러와 채팅방 목록을 볼 수 있는 페이지, 채팅방에 입장해

 

다른 유저들과 대화할 수 있는 페이지로 이루어져 있다.

 

 

 

 

 

웹 애플리케이션 진입 시 나타나는 화면, 커리큘럼과는 조금 다르게 꾸며보았다.

 

첫 진입 페이지에서는 Userstate가 존재하지 않을 시 프로필을 만들 수 있는 기능을 제공한다.

 

원하는 프로필 사진과 이름을 입력하고 입장하기를 누르면 다음 Lobby 페이지로 넘어가게 된다.

이름을 특정하지 않을 시 시간에 현재시간에 기초한 숫자에 + '애용'을 기본값으로 설정할 수 있게 했다.

 

 

 

 

 

 

 

Lobby 페이지, 채팅방을 선택해 입장할 수 있고 자신의 채팅방을 개설할 수 있다.

 

입장하기 Botton을 클릭해 Lobby 페이지로 들어오면 기존의 채팅방 목록을 보여주는 단과

 

원하는 채팅방을 개설해주는 개설하기 단이 있다.

 

유령 채팅방이 난무하는 것을 방지하기 위해 채팅방의 인원이 0명이면 자동으로 방을 삭제하게 했다.

 

개설할 채팅방의 제목을 입려하고 개설하기 Botton을 누르면 바로 개설한 채팅방에 입장하게 된다.

 

 

 

 

 

채팅방에 입장하면 볼 수 있는 Room페이지, 본격적으로 다른 User와 채팅을 할 수 있다.

 

채팅방에 입장한 다음 Room 페이지에서는 현재 접속중인 User의 NickName과 User 수를 보여주는 단이 있고

 

User들의 Message를 NickName과 작성 시간과 함께 보여주는 메세지 목록 단이 있다.

 

 

 

 

 

 

이 간단해 보이는 웹 어플리케이션을 하나 제작하는 데에도 아직 내가 모르는 부분과 많은 코드가

 

들어가는 것을 보니 앞으로 내가 알아야 할 것들이 많겠다는 것을 느꼈다.

 

앞으로 이 프로젝트를  뜯어보면서 지식을 쌓아나갈 예정이다.