안재관
박민형
유지영
조예지
우대현
오늘은 모바일 버전 구현을 위해서 무한스크롤과 미디어쿼리를 적용하기 시작했다. 근데 무한스크롤을 라이브코딩처럼 한 사람이 화면을 공유하면서 구현했고 문제가 발생했다. 무한스크롤이 데이터를 우리가 원하는 정도로만 불러오지 못하는.. 문제가 생겼다.. 그렇게 3-4시간을 흘려보냈는데,, 문제를 찾아냈다.. 바로 API의 옵션을 ….제대로 읽지 못했던 것이다 url/?offest=1&limit=5 처럼 작성을 했는데 offset은 가져올 인덱스 번호와 limit은 5개를 가져오겠다는 의미인데 계속해서 1번 인덱스부터 5번 인덱스까지 가져온다고만 모두가 생각했다. 한 번만 postman을 통해서 확인했다면 정말 쉽게 해결할 문제였음에도 바보 같이 다른 코드들만 계속해서 건드렸던 것 같다. 한 가지 장점이라면 무한스크롤 코드는 정말 열심히 반복적으로 활용했던 것 같다 또 오히려 useEffect로 해결해보려고 노력했는데 useEffect에 대해서도 더 깊게 알아보는 시간이 아니었나.. 그치만 미디어쿼리 적용 작업은 많이 하지는 못했다..
또 모바일 버전을 구현하면서 검색 페이지를 별도로 구현하기로 했는데 기존에는 /posts/channel/:channelId를 통해서 useParams를 활용하여 리스트들을 가져왔었는데 모바일의 경우에는 별도의 검색페이지를 구현하기 때문에 연결 문제를 어떻게 해결하면 좋을지에 대한 고민이 많이 있었다. 왜냐하면 포스트 리스트를 보여주는 페이지에서는 검색창을 숨기고 베스트 포스트들을 보여주어야 하고 검색페이지에서는 베스트 포스트들을 없애고 검색창을 노출해야 했고 또 라우터를 통해서 새로운 페이지로 연결을 해야했기 때문에 해로운 비교 기준점이 필요했다. 그래서 선택한 방법은 useLocation()의 pathname을 통해 구별하기로 정했다. 그리고 라우터는 /search/:channelId로 받아 useParams를 활용하여 기존에 구현된 로직들을 그대로 활용할 수 있게 만들었고, pathname을 통해 포스트 리스트 페이지에서는 검색창이 안보이고 검색 페이지에서는 검색창이 노출 될 수 있게 구현해 놓은 상태이다.
모바일을 적용하려고 했을 때 예상외로 새롭게 발생하는 부분적인 문제들이 많이 있는 것 같다! 그치만 해결하고 나니 기부니가 너무 좋다 ㅎ