[기록] Final Project_2021.05.28

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

Workspace

▷ 채팅 메시지 수정, 삭제하는 기능 테스트

 

▷ worksapce - chat 기능: 이미지 업로드 기능 구현

- `sendImage` 이벤트 함수 작성

- `socketio-file-upload`를 사용하지 않고 `multer`를 사용하여 이미지 저장 후 socket으로 이미지 파일 이름만 보내도록 구현

- chats 테이블에 이미지 파일 이름을 저장하는 `uploadImage` 필드 추가

- chat 데이터를 저장할 때 null data가 생기지 않도록 initial value 추가

 

▷ workspace - kanban: parts 목록 관련 API 세팅

- router, controller 초기 설정

- 각 기능 별로 method, path, parameters 설정

 

Login

▷ new access token을 발급하는 함수 구현

- 보안을 위해 access token의 시간을 줄이고 대신 refresh token을 사용하여 새로운 toekn을 발급받을 수 있도록 설정

- `get /newAccessToken`요청 로직 구현

클라이언트에서 새로고침될 때, 다른 페이지로 넘어갈 때, 그리고 주기적으로 계속 이 요청을 하게 됩니다.

loginType에 따라 refresh token을 사용하여 새로운 access token을 발급받는 방법이 달라서 주의해야 합니다.

 

 

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

▷ chat에서 이미지 업로드 기능 구현하기

chat에서 이미지 업로드 기능을 구현하기 위해 며칠동안 많은 고민을 했습니다.

어제는 거의 하루종일 채팅방에서 어떻게 이미지를 올릴 것인지 자료를 찾아보기도 하고 테스트용 클라이언트-서버를 만들어서 여러가지 방법을 도전해보았습니다. 결국 오늘에서야 결정한 방법은 `multer`를 사용하여 이미지를 저장하고 socket으로 이미지 파일 이름만 보내는 방법입니다. 최종적으로 이 방법을 선택한 이유가 있습니다. 

socket.io로 이미지를 전송할 수 있는데 socket 통신을 할 때 이미지는 blob 타입으로 전송되고 전송 속도도 빠릅니다.

한편, 우리 프로젝트의 특성상 이미지 파일을 저장해야할 필요성이 있습니다(채팅방을 삭제하지 않는 한, 채팅방에 입장하면 현재 방의 모든 채팅 기록을 볼 수 있어야 함). 그래서 이미지 파일을 DB에 꼭 저장해야 하는데 blob 자료형으로 저장하게 되면 이후에 이미지를 보기 위해선 다시 변환을 해야합니다.

이미지를 저장함과 동시에 같은 채팅방에 입장한 다른 유저들에게도 바로 이미지를 보여줘야 하므로 어차피 속도가 걸리는 작업(서버로 이미지 전송 → DB 저장 → 다른 유저에게 전송 → 이미지 조회)이라면 multer를 사용하여 이미지를 저장하고 그 이미지의 파일 이름만 받아 나중에 `서버주소/이미지이름`으로 이미지를 바로 볼 수 있도록 하는 게 더 좋을 것이란 판단이 들었습니다.

또한 multer는 전에 프로필 이미지나 팀원모집 게시글의 이미지에서 사용했으므로 이미 관련 함수가 만들어져 있습니다. 따라서 채팅방에서 이미지를 업로드하는 기능을 서버에서도, 클라이언트에서도 이미 존재하는 함수를 재사용하여 쉽게 구현할 수 있다는 장점이 있습니다.

많은 자료를 찾아보다가 이 글을 보고 최종적으로 결정할 수 있었습니다(How do I send image to server via socket.io?).

 

 

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

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

▷ 테스트 + 에러 수정