200805 블로그 제작일지

개발

200805 블로그 제작일지
최종 수정일:

댓글 업데이트 (SPA 프로젝트)

워드프레스 블로그 시작부터 댓글은 페이지 요청 없이 댓글 목록만 업데이트되게 잡다한 시도를 많이 했습니다.

변화를 감지해 변화된 내용만 업데이트한다는 게 여간 쉬운 일이 아니라 지금까진 그냥 댓글을 입력하면 댓글 목록을 통째로 업데이트해왔는데, 그렇게 무식하게 통째로 업데이트하는 것 자체가 마음이 아프고 댓글에 첨부한 파일도 다 다시 불러오는 모습이 여간 보기 불편한 게 아니었습니다.

댓글 목록을 JSON으로 만드는 것도 골머리를 많이 썩였는데, wp_list_comments()로 댓글 목록을 불러오니 최근에 쓴 댓글이 순서대로 들어있는 Array가 반환되더라고요.
이걸 JS에서 부모를 찾아다 연결하려니 여간 골 아픈 일이 아닌지라 고민하던 와중에 Walker_Comment를 알게 되고 그나마 수월하게 작업했습니다.

이제 댓글 안에 답글 목록이 생성되긴 하는데, 다시 마주한 문제는 제 블로그 댓글 깊이(답글을 달 수 있는 답글)를 10으로 설정해뒀단 겁니다.

댓글 리스트

편하게 그림으로 설명하자면 저렇게 아래로 가지를 10번 뻗을 수 있단 겁니다.
그리고 저 목록의 변화를 감지해서 업데이트해야 하는 상황인 거고요.

아무리 생각해도 많이 어렵고, 투자 대비 이익이 많이 적기에, 그냥 댓글 깊이를 2로 바꾸고 881개 댓글을 모두 수정할 각오로 리스트를 확인하는데, 설정에서 깊이만 변경하면 굳이 별 수정을 하지 않아도 3단계 이상 댓글이 모두 2단계로 병합됩니다.
워드프레스 개발진께 큰절 올리며 작업했습니다.

3단계 이상의 답글이 있을 땐 재귀함수 돌려가며 답글 목록 업데이트해야 했는데, 이젠 2단계가 끝이니 forEach 한 번만 돌리면 답글 목록 업데이트가 끝납니다.
아직 무식하게 forEach로 저장해둔 원본 array랑 비교 중인데, 알고리즘 공부를 하지 않는 이상에야 이 이상 최적화가 될까 싶네요.
알고리즘 공부도 시작할 때가 왔지 싶습니다.


추가로 댓글 목록도 Lazy Load로 불러옵니다.
따라서 좌측 드로워에서 최근 댓글을 클릭하면 댓글의 위치가 아니라 댓글 목록 위치까지만 스크롤 합니다.

카테고리 페이지 업데이트 (SPA 프로젝트)

이건 원래 infinite scroll을 사용해 페이지 새로 고침이 없었는데, 이번에 작업하며 그냥 infinite scroll을 없앴습니다.
검색엔진 최적화 문제로도 말이 많고, footer를 보기도 힘들고, 원하는 페이지로 단번에 건너뛰기도 힘든 여러모로 블로그엔 크게 어울리지 않는 형식 같아 페이지 목록이 표시되게 해뒀습니다.

아직 뒤로 가기 / 앞으로 가기 등으론 목록이 업데이트되지 않습니다…
popstate 이벤트도 함부로 쓰다간 엉망진창 될 게 훤히 보여서 확실히 문제가 없다고 판단되면 업데이트할 예정입니다.

기타


git merge branch

혼자 보는 커밋이라 메시지를 많이 대충 씁니다…😅

여담으로 이번에 작업하며 처음으로 branch를 분리해보고 병합해봤습니다.
블로그에 업데이트하긴 많이 불안정한 기능인데, 테스트 서버에선 돌려야 하니 branch 분리해서 블로그 업데이트랑 테스트를 동시에 진행할 수 있어 편하더라고요. Git 없을 땐 어떻게들 개발했나 싶습니다.

블로그 업데이트랑 테스트를 같이 진행하다 보니 병합할 때 충돌이 엄청나게 나긴 했지만, vscode에서 그냥 코드 둘 다 보여주면서 어떤 걸 쓸지 물어봐 주더라고요. 클릭만 하면 해결됐습니다.

Report an issue