[기록] Final Project_2021.05.24

오늘은 어떻게 프로젝트에 기여했나요?

Middleware

▷ middleware `chatChecker` 구현

- 채팅 하기 전, 해당 프로젝트가 맞는지에 대한 여부와 현재 유저가 이 프로젝트의 멤버인지 확인

projectURL, access token으로 프로젝트 정보와 멤버 정보를 확인할 수 있는 middleware를 구현했습니다

 

▷ `getUserInfo` 함수 구현

- access token으로 유저 확인하는 기능을 함수로 따로 구현했습니다

반복되는 코드를 효율적으로 활용하기 위해 한 함수로 작성하였습니다

- 각 middleware에 `getUserInfo` 함수 추가

 

Workspace

▷ 코드 수정 및 정리

- 하드코딩 부분을 실제 데이터 저장할 수 있도록 변경했습니다.

- 이벤트 함수 이름을 직관적으로 변경

‘Message’ → ‘sendMessage’, ‘totalMessageGet’ → ‘getAllMessages’

- 어떤 동작을 하는지 알아볼 수 있게 test를 위한 console.log 추가

 

▷ 클라이언트와 연결하여 테스트 진행

 

 

오늘의 프로젝트에서 힘든 점은 무엇인가요?

▷ socket.io 이해하기

오늘은 크게 어려운 점은 없었습니다. 며칠동안 socket.io가 어려워서 힘들었는데, 오늘 실제로 코드를 작성하면서 socket.io에 대해 많이 이해하게 되고 어떤 식으로 동작하는지 알게 되었습니다.

지금은 한 파일에 socket을 사용하는 모든 기능들을 다 작성했지만 조금씩 파일 분리를 할 예정입니다. 우선 오늘은 middleware 코드를 파일 분리하는데 성공해서 기쁩니다.

import chatChecker from './middlewares/chatChecker';

const chatting = io.of('/chat');
chatting.use(chatChecker);

 

socket 통신할 때 클라이언트에서 data 뿐만 아니라 다른 값들도 함께 보낼 수 있습니다. 이를 활용하여 서버에서 여러가지 작업을 할 수 있습니다.

이번에 middleware - chatChecker를 구현할 때도 query, auth 등을 사용해서 원하는 데이터를 받을 수 있게 되었고 원하는 작업을 할 수 있게 되었습니다.

// 클라이언트
sockets[projectUrl] = io(`${process.env.REACT_APP_SERVER_URL}/chat`, {
    transports: ['websocket'],
        auth: {
            token: 'access token',
            logintype: '로그인 타입',
        },
        query: {
            projectURL: projectUrl,
        },
    });

// 서버
const { projectURL } = socket.handshake.query;
const { token, logintype } = socket.handshake.auth;

 

 

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

▷ workspace 기능 구현 + 테스트

▷ chat에서 추가로 필요한 기능 구현