뭔가 중간에 블로그 한 번 썻어야 하는데 이것저것 한다고 못썼다..
앞서 완성된 기능에 서버와 통신하는 코드를 작성하여 실제로 데이터를 주고 받을 수 있는 코드를 작성했다. 내 파트에서는 home화면에서 질문 리스트 전체를 받아서 페이지네이션으로 렌더링 하는 부분과, 질문 작성 페이지에서 submit 버튼을 누를 때 서버에 post 요청을 보내는 부분이 있었다.
질문 작성 POST 요청
먼저 post 요청쪽은 코드가 거의 완성되어 있어서 이쪽부터 작업을 했다. 지금은 아무 기능도 없는 submit 버튼에 이벤트 핸들러를 등록하여 버튼을 누르면 post 요청이 되도록 코드를 작성했다.
post 요청은 별 무리없이 잘 되는것 같은데, 버튼은 누르면 메시지가 나오고 끝나는 것 같아서, 좀 더 사용자 경험을 좋게하는 쪽으로 생각을 해봤는데, submit 버튼을 누르면 modal창이 뜨면서 제출할지 한번 더 확인하도록 하고, 제출을 하면 제출성공 메시지가 나오고 1초 후에 홈 화면으로 돌려주도록 하기로 했다.
modal 컴포넌트를 만들어서 yes를 누르면 post 요청이 되도록 코드를 작성했다. yes를 누르면 제출완료 문구가 나오고 1초 후 home으로 돌려주고, 만약 post 요청에 실패하면 제출 실패 메시지가 뜨도록 코드를 작성했다.
전체 질문 조회 GET 요청
사용자가 home페이지에 입장할 때 전체 질문 리스트를 GET 요청으로 받아서 페이지네이션으로 화면에 렌더링 되도록 코드를 작성했다. 페이지네이션은 이전에 구현을 해놓았기 때문에 전체 질문리스트를 받아서 각각의 데이터를 화면에 렌더링하면 됬다. 질문 타이틀, 질문 본문일부, 작성자, 작성시간, view 카운트, 답변 수, 추천수를 각각의 컴포넌트로 props를 내려줘서 렌더링했다.
그런데 여기서 문제가 발생했는데, 전체 질문 조회를 할 때 질문 각각의 객체에 다른 데이터는 다 들어있는데, 질문을 작성한 작성자에 관한 정보가 없었다. 제출시기가 거의 다되어서 이러한 문제를 발견해서, 백엔드쪽 담당자에게 물어보니 지금 추가하는건 힘들다는 답변을 받았다.
어떻게 할지 고민이 되었는데, 질문 작성자 정보를 화면에 보여주지 않을수는 없겠다 싶어서 약간 우회하여 어거지로(?) 질문 번호를 이용하여 질문 작성자 정보를 받기로 했다. 개별 질문 조회 데이터에는 질문 작성자 정보가 있어서 현재 화면에 렌더링 되어있는데 질문들을 각각 개별조회하여 각각의 작성자 정보를 빼내와서 렌더링 하는 방식으로 코드를 작성했다.
문제가 별탈없이 해결되는 줄 알았는데, 이렇게 코드를 작성하니 home 화면에 들어갈 때마다 개별 질문의 view 카운트가 올라가는 현상이 발생했다....
팀원들이 모여서 머리를 맞대고 생각을 해봤는데, 해결방법이 ⓵ 전체질문 조회에 member 정보를 넣어주거나, ⓶ view 카운트 보여주는 기능을 없애거나, ⓷ 약간의 버그를 감수(?) 하는 방법 3가지가 있었다. ⓵ 방법이 가장 best 방법인데 현재로서는 할 수가 없어서 고민을 하다가 그래도 없앨수는 없다고 생각이 되어서 이대로 현상유지하기로 결정을 했다. ( 웹페이지 테스트를 이것저것 해보면 view 카운트가 미친듯이 올라간다...)
처음 기획단계에서 api 문서를 제대로 작성했으면 이런 일이 없었을텐데 하는 생각이 들었다. 다음에 팀프로젝트를 할 때는 api 문서에서 request body 와 response body를 확실하게 정하고 가야겠다는 것을 배웠다.
프론트엔드 merge 및 배포
기능 구현 다하고 다시 모여서 merge를 진행했는데, 이번에고 큰 굴곡없이 머지가 진행된 것 같다. 아마도 각자 페이지를 만들고 merge해서 그런거 같다. 다행인거 같기도 하고 한편으로는 여기서 한번 맞아봐야(?) 좋았을텐데 하는 아쉬움도 약간 드는 것 같다.
모두 merge하고 시연을 해봤는데 간단한 몇몇 사항을 제외하고는 성공적으로 웹사이트가 작동했다. 수정사항을 수정하고 aws s3에서 배포를 진행했다. 백엔드 쪽 서버 배포는 매우 고생했다고 하는데, 프론트엔드 정적 웹사이트 배포는 한 번 해봐서 그런가 엄청 쉽게 배포가 되었다.
'코드스테이츠' 카테고리의 다른 글
메인 프로젝트(1) 시작! (0) | 2023.05.04 |
---|---|
pre-project 끝! (0) | 2023.04.30 |
pre project 기능 구현 (0) | 2023.04.23 |
pre-project 사전 작업, UI 만들기 (0) | 2023.04.19 |
pre project 시작! (0) | 2023.04.15 |
댓글