자기소개
안녕하세요! Frontend 개발자를 꿈꾸는 29살 취준생입니다. 기계공학을 전공하였지만 저의 적성에 안 맞는 것 같아 고민고민 하다 제가 대학교 시절 가장 재밌게 배웠던 웹 개발자의 길로 들어서게 되었습니다. 제가 만든 결과물이 바로바로 보여 지는 웹 개발의 매력에 푹 빠져 꾸준하게 배워 나가고 있습니다.

결과물 URL:

https://dot-reloaded.herokuapp.com/

캡쳐 이미지
home 화면입니다.

video화면 전체 구성 입니다.

서비스 소개

• 홈 화면에 화면, 음성 on/off 기능
  방 입장 시 사용자의 편의에 따라 끄고 킬 수 있습니다.

  

• 화면 바꾸기 기능
  상대방 입장 시 저의 화면이 작은 화면에 상대방의 화면이 큰 화면에 가도록 위치시켰습니다. 나의 화면을 크게 보고싶다면 작은 화면에 있는 바꾸기 버튼을 클릭하여 화면 위치를 변경 가능하도록 만들었습니다.

  

• 전체 화면 기능

  
  화면의 크기를 자유롭게 변화 가능하도록 만들었습니다.

  

• 사진과 이모티콘 전송 기능

  
  문자뿐만 아니라 이모티콘과 사진 전송이 가능 하도록 만들었습니다. 아래 첫번째 사진은 상대방과 나의 대화이고 마지막 사진은 이모티콘 박스 사진입니다.

  

  사진 전송

  

  이모티콘 전송

• 나와의 채팅 기능
  나와의 채팅을 하고 있을 경우 상대방에게 메시지가 전달 되지 않습니다.

  

• 문자 온 걸 알려주는 점 기능

  
  내가 비디오 화면에 있거나 혹은 나와의 채팅을 하고 있을 경우 상대방에게 온 메시지를 바로 알아볼 수 있도록 message button, chat button 위에 빨간 점을 표시하여 문자 온 걸 바로 알수 있도록 만들었습니다. 첫번째 사진은 비디오 화면만 있을 때, 두번째 사진은 내가 self chat에 있을 때의 사진입니다.

  

  왼쪽 사진 message 버튼 위의 빨간점

  

  왼쪽 사진 chat 버튼 위의 빨간점

개발 과정 (어려웠던 점과 해결방법)

Backend, Frontend, Design 어디 하나 쉬운 게 없었습니다. socket.io가 완벽하게 이해가지 않아 Backend 쪽은 Nico teacher가 알려준 부분에서 조금씩 살을 붙이며 완성해 나갔습니다. 특히 어려웠던 부분은 대화 상자의 사진 전송 기능이었습니다. 나의 사진을 상대방에게 전송하기 위해 multer을 사용하여 사진을 저장, 변환시켜준 뒤 글자를 전송하는 데신 변화된 주소를 전송함으로써 상대방의 대화 상자에도 사진이 나올 수 있도록 만들었습니다.

앞으로 계획

YouTube challenge와 ZOOM challenge를 끝내고 제가 배웠던 내용들을 정리해야 갰다는 생각이 들었습니다. 처음부터 차근차근 제 블로그에 정리할 생각이고요. 그리고, 현제 참석중인 TypeScript challenge도 완주하는 것이 목표입니다.