2022 11 23

👨‍💻 오늘 한 일

서버와 클라이언트 개발을 위한 도구 학습 및 설치 진행

• mongoDB 무료 데이터베이스 생성
• mongoose를 활용한 서버와의 연결
• mongoose 기초 사용법 학습
• socket.io에 대한 기초 내용 학습
• 테스트 서버, 클라이언트에 socket.io 연결 테스트

🤩 새로운 / 몰랐던 점

이미지 최적화

뷰포트에 적절한 이미지 사이즈를 받아오기 위해 기존에는 크기별 이미지를 만들어놓고 미디어쿼리를 사용해 뷰포트에 맞는 크기의 이미지를 가져와야 했다. 또한 이미지를 서버에서 받아오는 동안 레이아웃이 밀리는 현상이 발생해 사용자 경험을 떨어트릴 수 있어 해당 이슈를 해결하기 위해 스켈레톤 UI 등을 통해 해결해야 했는데 NEXT.JS NEXT/IMAGE에서 Image 컴포넌트를 불러와 사용하게 되면 public 폴더 내부에 있는 image에 대한 최적화, 지연 로딩, placeholder를 제공하여 개발자가 편리하게 개발할 수 있도록 제공되고 있다는 것을 알게 되었다!

socket.io

socket.io를 사용하여 양방향 통신을 통해 채팅을 구현해보고 싶어 서버 구성에 대해 공부해봤는데…io를 사용하는 부분과 rest API를 분리해야 하는지, 네임스페이스를 활용하여 채팅방을 구현한다던가 그런 세세한 부분을 구현하려고 하니 조금 막막해진 것 같다….또 실시간 채팅 내용을 DB에 저장하고 기억해야 다시 방에 입장했을 때 이전 채팅 기록이 남아야 하는 부분도 어떻게 구현할지 고민이다.

참고 - https://inpa.tistory.com/entry/SOCKET-📚-Namespace-Room-기능

🌙 하루를 마치며…

오늘은 서버와 관련된 세팅에 필요한 도구들을 설치하며 새로운 내용을 공부할 수 있었다. 서버에 대한 지식이 모자라서 다소 생소한 내용이 많았고, nosql DB를 사용하는 것도 처음이라 프로젝트에 잘 적용할 수 있을지에 대한 걱정이 좀 되지만 천천히 학습하면서 코드가 어떻게 동작하는지를 이해하며 작성하고, 추후에도 잘 사용할 수 있도록 대충 되니까 넘어가거나 하지 않도록 잘 기록하고 신경써야겠다.