나만의 홈 스쿨 개발해보기~~ (1일차)

 

 

 

프로젝트 개요

 

: 이번 프로젝트는 화상 기능과 자율 chat 기능을 제공하는 것이 목표입니다. 회원가입할때 교수, 학생으로

  회원가입할수 있도록 만들고, 해당 교수님들은 각각의 권한으로 채팅방을 개설 및 강의를 진행할 수 있도록 

  제작할 예정입니다. 학생들은 각각 chat room을 선택 및 비밀번호를 입력하여, 해당 강의실에 입장할 수 있도록

  1차 계획을 세웠습니다 ^^

 

25.11.26

프로젝트 1일차

 

 관련기능을 개발하기 위해 여럿 관련서적을 봤습니다. 기술에 관련되서 많은 고민이 있었는데, 3가지 틀로  

개발을 진행하기로 결정했습니다.

 

1. 첫번째로 프론트 단은 react + Ts 로 해당 관련 view 연결하기

2. 화상 및 chat 관련기능은 서버 생성 및 Socket.io 라이브러리를 사용하여 Node.js 기반으로 해당 웹소켓 기능 제공하기

3. 스프링부트, jpa, maria db, spring security 이용해 로그인, 로그아웃, 회원가입, 권한 기능 개발하기

 

node.js 관련해서 js기반 서버는 개발해 본적이 없어서, 존경하는 니콜라스 선생님 서적을 구매해 관련 기능을 공부하면서 

구현하는 걸로 계획을 세웠습니다,  ^^... 일단 ws관련해서 통신하는 방법을 공부한후, 본격적으로 Socket.io 라이브러리를

프로젝트에 적용해 보기로 했습니다.

 

 

node.js 웹소캣 서버 설정

 

 

1. 모듈 임포트

 

express: HTTP 요청/응답을 쉽게 다루기 위한 Node.js 프레임워크

http: Node.js 기본 내장 모듈로, 서버를 만들 때 사용.

Server : WebSocket 서버를 만들기 위해 사용.

 

2. Express 앱 생성

 

const app = express();

 

일반 HTTP 요청 처리를 위해 express 앱을 생성합니다.

 

3. Http 서버 생성

 

const httpServer = http.createServer(app);

 

express 앱을 Node.js의 HTTP 서버 위에 올립니다.

Socket.io는 HTTP 서버 위에서 구동되므로, 해당 express위에 웹 소켓 서버를 한단 더 올려야 합니다.

 

4. Socket.io 서버 생성

 

const wsServer = new Server(httpServer, {

   cors:{

       origin: "http://localhost:5178",

       method: ["GET", "POST"],

   },

});

 

vite로 구동되는 로컬페이지가 5178포트로 기본으로 켜지기 때문에 해당 페이지와 데이터를 주고받을 수 있도록 

해당 포트로 설정해주면서 socket까지 올려주면 기본적인 서버 생성은 완료가 됩니다!!

 

- origin: 허용할 도메인

- method: 허용할 HTTP 메서드

 

5. 클라이언트 연결 처리 

 

wsServer.on("connection", (socket) => {

 

클라이언트가 웹소켓으로 연결되면 실행되는 이벤트입니다.

socket 객체는 연결된 각 클라이언트 하나 하나를 의미합니다.

 

6. 클라이언트 이벤트 처리

 

socket.on("enter_room", (roomName, done) => {

 

클라이언트가 enter_room 이벤트를 보내면 실행됩니다.

 

- roomName: 클라이언트가 들어가고 싶은 방 이름

- done: 클라이언트에게 완료 신호를 보내는 콜백 함수

 

7. 서버 실행

 

httpServer.listen(3000, handleListen);

 

- HTTP 서버를 3000번 포트에서 실행

 

 

주요 속성

 

console.log(socket.id)

 

- 연결된 소켓의 고유 ID 출력

 

console.log(socket.rooms)

 

- 현재 소켓이 속한 방 목록 출력

 

socket.join(roomName)

 

- 소켓을 지정한 방에 입장시키기

 

 

1. 소켓 연결

 

const socket = io("http://localhost:3000");

 

- React 컴포넌트 외부에서 한번만 실행됨 -> 페이지 새로고침 전까지 socket 객체가 유지된다.

 

2. React 상태 관리

 

const [inRoom, setInRoom] = useState(false);

const [roomName, setRoomName] = useState("");

 

- inRoom: 현재 방에 들어간 상태인지 여부 -> 화면 조건부 랜더링에 사용

- roomName: 입장한 방 이름 저장

 

3.  useRef로 DOM 접근

 

const formRef = useRef<HTMLFormElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);

 

- inputRef.current.value로 input값을 직접 읽기 위해 사용한다.

 

4. 방 입장 처리 함수

 

const handleRoomSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // 폼 제출시 페이지 새로고침 막음 코드

 

5. 입력된 값 읽기 

 

if(!inputRef.current) return;
const value = inputRef.current.value;

 

6. 서버로 이벤트 전송

 

socket.emit("enter_room", value, () => {
    console.log("Joined room:", value);

    setRoomName(value);
    setInRoom(true);
});

 

- enter_room 이벤트를 서버로 보내면서 3번째 매개변수로 콜백 함수를 같이 보낸다.

- 서버에서는 해당 값을 받아 콜백함수를 실행해준다.

 

7. input 초기화

 

inputRef.current.value = "";

 

- 입력값을 비워준다.

 

8. 조건부 랜더링

 

{!inRoom && ( ... )}   // 방 들어가기 전 화면
{inRoom && ( ... )}    // 방 들어간 후 화면