지도에서 요구되어졌던 사항들은 밑의 내용들 이었다
- 지도가 일정 크기 이하일 때 게시물 출력하기
- 지도 안의 게시물만 출력하기
- 주소 검색 시 그 위치로 지도 이동시켜주기
- 모집글 작성시 유저 주소가 기본으로 입력되어 있고
다른 위치에도 글을 쓸 수 있도록 할 것
다른 위치에 글을 썼다면 그 위치로 이동했다가 새로고침하면
본인의 주소로 돌아 올 것
(주소 수정은 마이페이지에서 가능)- 로그인시 유저의 주소로 지도 이동시켜주기
기본 기능은 전부 완성되었지만 문제가 있었다🥲
유저가 로그인을 했을 때 지도의 위치를 유저의 주소로 바꿔주는 과정에서
새로고침, 게시물 수정 , 삭제 등 모든 행동이 일어날 때마다 기본주소로 이동했다가 유저의 주소로 이동하는
지도가 두번 렌더링 되는 현상이 있었고 웹사이트가 느려지는 문제가 발생했다
처음에는 웹사이트가 느려지는 걸 보완하기 위해 스켈레톤 ui를 적용했다
하지만 근본적인 로직이 문제라는 생각이 들어 지도의 성능을 개선했다
🙉 문제점
지도의 기본 위치가 고정되어 있는 상태에서 위치를 state로 관리를 하고 있었던 것이 문제였다
유저가 로그인을 하면 useEffect를 사용해 유저 주소의 위치로 지도를 변경해주다 보니
무조건 기본 위치로 이동했다가 본인의 주소로 이동하게 되었다
프로젝트 발표 때 QnA로 두번 랜더링 되는 문제를 발견했던 것과 해결과정에 대해서 준비했고 블로그에 작성한 것 처럼 답변을 했다
서버에서 받아오는 데이터를 state로 관리하게 되면 오류가 나는 경우가 많다고 알려주셨다 !
🐵 개선방법
state로 관리하고 있던 위치들을 두개로 나누어서 관리했다
위치가 고정되어 있어야 하는 것은 리덕스에,
새로고침하면 없어져야 하는것은 state로 나누어서 상태를 관리했다
지도의 위치가 고정되어야 하는 것은 유저의 주소였기 때문에
로그인시 유저의 주소를 위도 경도로 변환해 리덕스에서 관리하였고
Redux persist를 사용해 새로고침이 되어도 데이터가 사라지지 않도록 로직을 바꾸고 나니 두번 렌더링 되는 현상을 고칠 수 있었다
❓ 처음엔 왜 안됐을까?
팀원분이 로그인 로직을 만들고 나서 기능을 추가해야 했기 때문에
유저 주소로 이동 시켜 주는 기능이 제일 마지막에 추가가 되었다
사실은 처음부터 유저 주소를 리덕스에 나머지를 state로 나누어서 관리를 했었는데
유저의 주소로 이동하는 부분이 기능 구현 자체가 되지 않았다
그래서 리덕스로 관리했던 유저 주소를 로직을 바꿔 state로 관리해서 일단 기능 구현은 할 수 있었지만 렌더링이 두번씩 일어나 마음에 들지 않아서 다시 리팩토링을 하게 되었다
이때 처음 리덕스로 관리했던 것과 달라진 것은
주소를 위도 경도로 변환해 데이터를 저장하는 코드의 위치였다
처음에는 로그인이 다 되고 나서 map.js에서 바꿔줬다면
아예 로그인 성공시 실행되는 action에서 위도 경도로 변환해서
데이터를 저장한 뒤 받아왔다
액션 에서 리듀서로 또 컴포넌트로
데이터가 잘 저장 되고 있는지 잘 불러와서 출력이 되는지
한 단계씩 콘솔로 데이터를 찍어보며 와 여기까지는 되네
그럼 할 수 있을 것 같은데 이런 생각으로 진행을 했고
성공 했을 때의 행복함은 말할 수 없다 진짜로!
사실 리팩토링 방법이 한번에 생각났던 게 아니라서
이것저것 시도해보다 성공했기 때문에 더 그랬던 것 같다
✅ 포기하지말고 시도하자
발표를 앞둔 주말이었고 코드스테이츠에서는 더이상 오류를 고치는 작업과
새로운 기능을 추가하지 말라고 공지를 했지만
(코드 한 줄 더 치다 오류를 만나 해결하지 못한 팀이 있다고 했다)
어떻게든 고쳐보고 싶었고 안되면 기존 코드로 바꿔서 일단 발표해야지 라는 생각이었다
결국 토요일 새벽에 리팩토링을 성공했다 !
너무 신나서 팀원분들께 말하고 싶었는데 새벽 3시가 넘은 시간 이었고
디코 알람이 가면 시끄러울까봐 카톡 단톡방에 지도 성능을 개선해 깃헙에 올려놨으니 테스트 해달라고 보내놓은 뒤 자러갔다
다음날 배포를 시도해보니 역시나 문제가 있었다
웹사이트에 들어가니 지도가 아예 출력되지 않았고
유저의 정보를 콘솔에 찍어서 어떤 문제인지 발견할 수 있었다
한번 로그인을 하고 난 이후였기 때문에 이미 로그인이 되어있는 상태였고
리덕스에 위치정보가 없는 상태로 로그인이 되어 있었기 때문에 오류가 났었다
Chrome방문기록 > 인터넷 사용기록 삭제 > 지난 1시간 기록 삭제 후 다시 접속하는 방법으로 해결 할 수 있었다
발표 전이었기 때문에 로그인을 했었던 유저는 우리 팀 넷과
피드백 해주셨던 엔지니어 두분이었기 때문에 다른 분들은 제대로 웹사이트에 들어올 수 있었다
결국 처음 짰던 로직으로 되돌아 온 것을 보며
안될 때 다른 방법을 찾는 것도 좋지만 왜 안되는지
차근차근 생각해보며 노트에 정리해 어디가 문제인지 찾는 과정도 필요하다는 것을 느꼈다
완성된 N빵에 대해서는 다음 포스팅에서 ...⭐️
