2주 차 네 번째 과제(22.02.10 ~ 22.02.12) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

네 번째 과제 메신저 페이지 만들기

사용자들이 채팅할 수 있는 페이지를 만드는 것이 과제였습니다.

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/04_messenger

GitHub - Gilpop8663/04_messenger: 원티드 프론트앤드 프리온보딩 2기 14팀 메신저 페이지 프로젝트입니다

 

메신저

 

기능 구현 (맡았던 부분)

 

Redux를 이용한 State 관리

• Modal 상태를 true/false로 설정해 Modal 이 켜지면 true, 꺼지면 false 상태가 되어 true 상태일 때만 Modal 창이 보이도록 구현

axios를 이용한 request 요청

• GET/POST/DELETE method를 사용하여 메시지 조회/전송/삭제 기능 구현

메시지

• 작성자가 전송한 메시지의 경우에 이름 옆에 * 문자가 출력됩니다.
• 사용자가 \n이나 길게 보냈을 경우 메시지에서의 출력도 동일하게 표시되도록 하였습니다.
• redux에서 받은 정보를 통해 작성자인지 파악하여 작성자에게만 삭제 버튼이 보이도록 하였습니다.

 

정리 및 회고

새로 알게 된 점

• 이번 과제에서 redux가 필수로 사용되는 부분이어서 redux를 급하게 공부하고 팀 과제에 들어갔습니다. 기존에 recoil을 알기 했었지만 공부하려고 배웠던 것이기에 전역 변수 관리에 많은 경험이 없었어서 이번 과제가 저에게는 좋은 경험이었던 것 같습니다

 

• json-server 라이브러리를 이용해서 실제 node.js 서버를 만들어서 CRUD가 되도록 하였는 데 예전에 express를 이용하며 백앤드를 경험했던 적이 있지만 지금은 생각이 나지 않아서 팀원분이 진행해주셨습니다. 팀원분이 만들어 준 서버를 통해서 get, post, axios에만 있는 delete까지 이용하며 실제로 어떻게 진행되는지 경험할 수 있어서 좋았던 시간이었습니다.

 

• express를 활용하여 서버를 만들었는데 팀원분이 작업하신 코드를 보고 공부가 되었고 저도 꿈이 풀 스택 개발자이기 때문에 시간이 된다면 팀원 분과 인터넷에 물어보면서 다시 한번 기억을 되살리며 공부하려고 합니다.

 

• 저번 과제에서 각자 스타일을 다 꾸며와서 합치려고 하다가 시간이 많이 걸렸었어가지고 이번에는 각자 어떤 기능을 구현할지 미리 나누어 스타일을 건드리지 말고 기능만 구현을 해와서 합치니 시간이 많이 단축되었습니다. 다음에도 이 방법으로 해보려고 합니다

 

힘들었던 점 / 해결과 극복 방법

• redux에 많은 경험이 있지 않아서 저희 팀이 사용한 useDispatch나 useSelector에 대해 잘 몰랐었는데 팀원분이 작업해주신 코드를 보고 저 또한 공부가 많이 되었던 것 같습니다.

 

• 채팅을 치면 자동으로 스크롤이 내려가는 기능을 맡았었는데 스크롤의 끝을 useRef를 통해서 보내주는 방법이었으나 해당 컴포넌트의 끝인지 해당 페이지에서의 끝인지 명확하게 인지하지 못하고 사용을 하였어서 채팅이 끝까지 내려가긴 하였으나 채팅 입력창으로 가려지는 형태가 되었었습니다. 팀원분이 밑의 채팅창 높이만큼 빈 박스를 만들어서 해결을 하였습니다.

 

• 배포를 완료하고 다음날 들어가 보았는데 접속이 안 되는 현상이 있었습니다. 검색을 해보니 heroku 무료 버전에서는 30분 동안 접속을 하지 않으면 10~20초 동안 켜지지 않는 사이트가 잠잔다고 하는 일이 있어서 검색을 하여 30분마다 들어갈 수 있게끔 설정하였습니다.

 

• 자동 스크롤을 내려가는 데 useEffect로 메시지 데이터가 변할 때마다 스크롤을 내리게 설정하였더니 데이터를 삭제할 때도 스크롤이 내려가서 사용자 경험이 안 좋아지는 일이 있었습니다. 그래서 팀원분들과 함께 화면 공유를 하여서 팀원분이 메시지를 보낼 때 post("URL", 데이터). then( 스크롤 내리기( )) 이렇게 하였으나 잘 되지 않아서 post("URL",데이터).then( setTimeout(()=> 스크롤 내리기( ),300))으로 setTimeout으로 해결하였습니다.

 

• 삭제를 할 때 실제로 삭제는 되지만 화면이 갱신되지 않는 일이 있었습니다.

axios.delete(
      `https://json-server-wanted14.herokuapp.com/messages/${content.id}`
    );
    dispatch({ type: 'close' });

• 팀원분이. then을 안 해주어서 그런 것 같다고 하였고 데이터 또한 불러와서 리 렌더 되도록 도움을 주셨습니다.

axios
      .delete(
        `https://json-server-wanted14.herokuapp.com/messages/${content.id}`
      )
      .then((res) => {
        dispatch({ type: 'close' });
        getData();
      });

 

• 과제 배포를 마친 후 우리가 어떤 점이 미흡하고 디테일이 떨어지는지 이야기를 나누고 이런 점은 과제가 끝나더라도 개인의 성장을 위해서 디테일을 잡고 갔으면 좋겠다 하여서 코드를 더 만져서 디테일을 높이려고 합니다

-추가로 적은 글 -

• 프로젝트 종료 후 개인적으로 redux 와 axios에서 사용하는 많은 문자열을 상수 데이터로 만들어서 관리 하였습니다. 리팩토링을 하며 문자열을 한번에 관리하는 것에 대해 보람을 느끼게 되었고 좋은 코드에 대해 더 알게 되었습니다.