백엔드와의 첫 협업
이번 주엔 그동안 갈고닦은 주특기인 리액트로 node.js 백엔드 분들과 팀프로젝트를 진행했다.
프론트엔드 개발자로서 협업은 처음이라 걱정이 앞섰는데 서버와 소통하는 법을 배워 얻은 것이 많은 한 주였다.
팀플을 진행하면서 이게 프론트엔드 개발자구나! 를 실감했다.
클라이언트는 필요한 데이터를 요청하고, 서버에선 응답해주고. 받은 응답을 가공해서 적재적소에 사용하고의 과정을 몸소 체험했다.
첫 날에 와이어프레임을 제작하고 API를 설계하는 과정을 모든 팀원이 아침부터 저녁까지 함께했는데, 따로 진행하지 않고 같이해서 첫 날엔 피곤했지만 나중에 오히려 소통비용을 줄일 수 있었다.
키값 하나하나 동일하게 사용해야 데이터가 정상적으로 오갈 수 있고, 와이어프레임이 구체적이고 구현해야할 기능의 우선순위가 명확해야 프로세스를 순차적으로 밟을 수 있기 때문이다.
처음엔 프론트엔드개발자의 역할과 백엔드개발자의 역할이 뭔지 감이 없었는데 이번에 팀플을 진행하면서 역할이 분명해졌고 백엔드의 작업 과정을 보면서 데이터의 흐름을 어느정도 이해할 수 있었다.
뿌듯한 점 ✌️
팀장 점수 굿?
이번에 팀장으로서 큰 문제없이 마지막까지 좋은 분위기로 프로젝트를 잘 마무리한 것이다.
무던하고 협조적인 팀원분들 덕이 크다.
또 생각보다 시간에 쫓겨서 항해하면서 가장 멘탈이 흔들렸던 주가 아니었나 싶은데 계속 마인드컨트롤하면서 끝까지 최선을 다했다. 혼자 하는 작업보다 팀으로 했을 때 좋은 점이 크지만 어려움도 있기 때문에 (작업 프로세스, 목표 등이 사람마다 다르므로) 그 과정에서 서로를 이해하면서 진행하는게 중요하다는 생각이 들었다.
처음 도전해보는 기능 성공 🥹
이번 프로젝트에서 메인페이지, 상세페에지, 헤더, 댓글을 맡았는데
메인페이지에서 포스팅카드를 카테고리별로 필터링하고, 카드마다 주문까지 남은 시간을 카운팅해서 뿌려주는 기능을 성공했다! 처음으로 시도하는 기능이었는데 가이드없이 혼자서 해결했다는 점이 매우 뿌듯했고 내가 맡은 페이지는 모두 완벽 반응형에 가깝도록 설계했다.
그동안 계속 끙끙 앓았던 문제 해결!
또 메인페이지 외 상세페이지에서 자꾸 새로고침하면 빈 화면이 되는 오류가 있었는데 이건 지난 주차 개인과제에서도 겪었던 문제였는데 해결해내었다! 새로고침 시 데이터를 다시 불러오기까지의 텀이 있는데, map 함수나 filter 함수로 데이터가 undefined 인 순간에 실행하려고 해서 발생한 문제였다. undefined 가 아닐 때 실행하게끔 모든 명령에 조건을 붙여주니 해결되었다.
+ 전역으로 관리한 api
아쉬운 점 🥲
유독 아쉬움이 크다. 팀원분이 너무 좋은 아이디어를 내주셔서 그만큼 잘 완성해내고 싶은 욕심도 컸는데, 서버와 연결하는 작업이 처음이다보니 생각보다 시행착오가 많아서 처음 목표만큼 완성해내지 못했다.
proxy 설정 왜 했니?
프로젝트가 끝나고나서 알게 된 점은 proxy 설정은 굳이 하지 않았어도 되었다는 점.
CORS 설정은 보통 백에서 처리하는데, 이번에 proxy를 왜 써야하는지도 정확히 모른 채 설정했다. CORS 설정은 프론트나 백, 둘 중에 하나만 해주면 되는데 우리는 불필요하게 둘 다 설정하느라 시간을 쏟은 셈이다.
기능 구현은 했는데, 왜 복불복으로 되는거지? 😅
서버와 연결하기까지 시간을 많이 쏟아서, 제출 전 날 밤 급하게 댓글 기능구현을 했는데
당일에 보니 기능이 정상적으로 됐다가 안됐다가 했다 ..
서버와 통신시간이 걸려서 그런건가? 싶어서 전부 비동기 처리를 넣어주었는데 해결되지 않았다. 매니저님께 여쭤보니 그런게 아니라 state관리 문제라고 하셨다. 결국 정확한 원인을 파악하지 못한 채 끝나서 아쉽다.
+확인해보니 리듀서에 데이터가 제대로 전달되지 않아서 생긴 문제였다. 미들웨어 -> 액션 -> 리듀서 로 데이터를 정상적으로 연결해주니 해결되었다.
