실전 프로젝트를 진행하며 기술적으로 막혔던 부분

무한스크롤

게시글을 보여주는 과정에서 무한스크롤이 들어가게 됐는데 이 박스부분에는 검색과 추천게시글이 함께 포함되어 있기 때문에 한가지의 종류만 보여주는 것보다 생각할것이 많았다.

무한스크롤을 만들어보는것이 처음이기 때문에 라이브러리를 사용하지 않고 IntersectionObserver 를 사용해서 정해놓은 타켓이 얼마만큼 보이느냐에 따라서 게시글을 더 보여주는 방식이였다.

처음해보는 방식이라 전에 경험이 있었던 백엔드의 도움을 받아서 페이지를 넘겨줘야한다는것을 알게 되었고, 타겟이 보일때마다 페이지를 하나를 증가시키고, 서버에 해당 페이지의 게시글을 받아오는 방식으로 진행하였다.

필요없는 코드

처음에는 게시글을 불러오는 redux를 구성하고, 그 후 부터는 무한스크롤을 위한 redux를 따로 구성해 주었는데 코드를 작성할수록 하나의 redux만 사용하면 된다는것이 보여서 하나는 지우게 되었다.

해결 방법

게시글은 7개씩 받아와서 spread문법, concat 등을 사용해서 redux의 initialState에 넣어주으려고 했으나 계속해서 오류가 발생하였다. 이유는 알수 없었다. 이것으로 몇시간동안 해결하기 위해서 코드를 작성해보았지만 역시나 되지 않았다. 결국에는 나의 힘만으로는 해결하는것 보다는 백엔드와 소통해서 해결하는것이 낫다고 판단되어 기존 게시글에 7개를 더 줄때 14개, 21개... 이렇게 줄것을 요청하였고, 이것으로 생각보다 빨리 해결 할 수 있었다.

검색?

해당 박스는 검색도 할수 있어야 한다. 그래서 나는 initialState에 'searched: false' 부분은 추가해서 검색했을때와 검색했을때는 true, 추천게시글을 보여줄때는 false를 주어서 검색했을때와 추천게시글을 보여줄때의 차이점을 주었다.
그리고 만들고 보니 검색 후에 다시 추천게시글로 돌아갈 수 있는 버튼이 있으면 좋을것 같아서 간단하게 searched를 false를 주고, 기존 추천게시글로 받았던 게시글을 보여주는 방식으로 진행하였다.

달력

비록 작성을 하는 페이지가 아니라지만 오늘이 몇일인지 확인 할 수 있는 달력같은게 있으면 좋겠다는 생각에 메인페이지 구석 한켠에 조그만한 달력을 만들기로 하였다.

물론 이번에도 라이브러리를 사용하지 않고 만들기로 하였다. 생각보다 구글링을 통해 쉽게 구현할 수 있었지만 문제는 이 컴퍼넌트를 작성페이지에서 사용 할 수 있도록 출발일과 도착일을 선택할 수 있고, 선택한 후에는 몇박 몇일인지 알 수 있도록 보여주는 구현을 하려 했다.

한개의 달력에서 모든것을 구현할려고 하니 문제가 생겼다. 출발일과 도착일은 서로 번갈아 가며 출발일 다음클릭은 도착일 다음클릭은 출발일 이렇게 구현하였지만, 몇박 몇일인지 보여주는일은 생각보다 까다로웠다. 출발일과 도착일은 계속해서 순서가 바뀌고, 달이 바뀌거나 연도가 바뀌면 의도치 않게 작동했으며, 출발일(1/5)보다 도착일(1/4)의 날짜가 더 빠르면 역시 의도치 않게 작동하였다.

그래서 이부분은 후에 달력을 2개를 넣게 되면 다시 구현을 해보도록 하였다.