🔔 18일차
오늘은 socket을 이용하여 채팅을 실시간으로 삭제하고 수정하는 기능을 구현하였다.
삭제와 수정 기능을 구현했지만 CSS도 최대한 신경을 많이 써보았다! 결국 프론트는 데이터를 받아서 어떻게 사용자에게 이쁘게 잘 보여줄 것인가도 정말 중요하기 때문에, UI에 시간 투자를 많이 했다!
오늘도 크게 막힘없이(?) 잘 한 것 같다. 오늘은 어려운 부분이 없었다!!
💪 오늘은 어떻게 프로젝트에 기여했나요?
먼저 구현한 기능은 수정과 삭제를 하기 위해 hover 기능으로 버튼을 넣어주었다!!!
그 다음은 실시간으로 채팅의 상태를 나타내기 위해 socket으로 서버와 양방향 통신을 하였다. socket 처음 사용할 때는 정말 어렵다고만 느껴졌는데, 막상 써보니… 정말 클라이언트에서는 어려운게 없었다.
처음에 socket으로 서버와 연결만 해놓으면 emit으로 보내주고 on으로 받고 이게 전부였다.
받아온 데이터로 내가 가지고 있는 채팅 배열에서 같은 것을 찾은 후 그 부분만 제거해주는 방식으로 하였다!
그 다음으로는 채팅을 수정할 수 있는 기능을 만들었다. 이 기능도 변경된 값을 서버에게 보내주고 다시 받아온 값을 채팅 목록에 넣어준 것이 전부이다!
이 부분은 새로고침을 해야먄 변경되는데, 이유를 찾고 있는 중이다… ㅠㅠ
마지막으로!! 채팅을 남긴 유저의 프로필을 확대해서 볼 수 있고, 그 유저의 프로필을 보러갈 수 있는 기능을 구현하였다!!
만약 내가 내 프로필 사진을 누르면 프로필 편집, 그리고 현재 프로젝트 진행 상황을 볼 수 있도록 라우팅을 걸어주었다!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
음… 오늘도 어려운 부분을 맡진 않아서 크게 어려운 점은 없었다. 오늘은 CSS 작업을 주로 한 것 같다.
내일 채팅으로 이미지 보내기와 채팅창 인피니티 스크롤을 구현할 예정인데 내일 고생할 예정이다..ㅠ
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
채팅으로 이미지 보내기 기능 구현, 채팅창 리버스 인피니티 스크롤