메인페이지 스터리 리스트 영역 CSR로 변경하기

[42KIM]

PR 내용

카테고리 필터, 스터리 리스트를 SSR 방식에서 CSR 방식으로 변경.

기존에는 카테고리 버튼을 클릭할 때마다 서버에서 SSR된 템플릿을 계속 새롭게 전달해줘서 매번 페이지가 새로고침 되었음.
현재는 카테고리 버튼을 클릭하면, fetch API를 이용하여 해당 카테고리에 맞는 데이터를 불러와 클라이언트사이드에서 search-list 부분만 새롭게 렌더링 하는 방식. 따라서 페이지 새로고침이 되지 않음.

🚨 현재 페이지가 깜빡 거리는 것처럼 느껴지는 부분은, 새롭게 렌더링이 되는 동안 잠시 빈 화면이 노출되기 때문인 것으로 추측되는데, 이는 추후 '로딩중 입니다' 같은 UI를 추가하여 해결 가능.
실제로는 페이지가 새로고침 되고 있는 것이 아님. (URL이 계속 그대로임)

변경 사항

• 기존 SSR을 담당하던 view/includes/index/search-list.ejs가 필요 없어짐에 따라, 해당 파일과 해당 파일의 js를 담당하던 pulic/js/main-category-filter.js를 삭제.
  CSR은 새롭게 생성한 public/js/index.js에서 모두 담당하게 됨.
• 기존에는 메인페이지에 접속하면 스터디 정보를 SSR하여 전달해야 했기 때문에 routes/index.js에서 라우팅과 함께 DB로부터 데이터 수집을 함께 수행했음. 그러나 이제 해당 부분은 CSR 처리되기 때문에 index.js에서 DB 접근을 할 필요가 없어졌음.
• 최초 메인페이지 접속, 각 카테고리 버튼을 클릭할 때마다 fetch API를 사용하여 카테고리별 스터디 그룹 정보를 받아와야 한다. 이를 위해 routes/listApi.js를 새롭게 생성하여, fetch api만 담당하는 라우터를 만들었음.
  메인페이지, 대분류, 중분류에 해당되는 요청을 파싱하여 데이터를 JSON 형태로 응답해준다.
  이에따라 server.js에도 Router 추가.
• fetch 요청을 보낼 때 http://localhost:3000/list/카테고리이름로 요청을 한다. 기존 소분류 명 중에 '경영/사무', 'it/인터넷'의 경우 텍스트에 '/'이 포함되어 있어 url에 오류를 발생시키는 문제가 나타남. 따라서 '/'를 ','로 수정했음.

핵심 내용

CSR 로직을 담당하는 public/js/index.js의 로직은 다음과 같음.

• fetchGroup 함수
  : fetchGroup 함수는 선택된 카테고리에 해당되는 스터디 정보를 얻기 위해 fetch 요청을 listApi로 보낸다. 받아온 JSON 데이터를 파싱하여, renderGroup 함수로 각 데이터를 렌더링 해준다.
• renderGroup 함수
  : renderGroup 함수는 createElement를 사용하여 기존에 테이블 태그로 작성되었던 스터디 그룹 item을 생성한다. 하위 요소들도 생성하여 appendChild 한다.
  요소 생성이 끝나면, item을 search-list div에 appendChild 하여 화면에 렌더링한다.
  groupItem div에 클릭 이벤트 리스너를 걸어서 클릭 시, 해당 스터디 소개 페이지로 이동하도록 만든다.
• 사용자가 최초 메인페이지 접속 시, 먼저 fetchGroups('전체')를 실행하여 전체 스터디 리스트를 보여준다.
• 그리고 메인페이지 category-filter의 모든 버튼에 이벤트 리스너를 바인딩 한다. 이때 바인딩 되는 이벤트 리스너 함수는,
  • searchList.innerHTML = '';를 통해 먼저 카테고리 버튼을 클릭하게 되면, 기존에 렌더링 되어있던 search-list를 지워준다.
  • 그다음 buttonDisplay 함수를 사용하여 클릭한 버튼에 active-main, active-sub, show-sub 같은 class를 부여하여 클릭된 css를 적용한다.
• 마지막으로 fetchGroups 함수를 사용하여 데이터를 요청하고, 응답받은 데이터를 search-list에 새롭게 렌더링해준다.

기타

• CSS 미적용 ㅠㅠ
• 아직 세부적으로 수정해야할 부분들이 남아있지만, 전체적인 로직은 완성된 상태. 현재 카테고리를 변경하다가 페이지 새로고침을 하는 경우 최초페이지가 다시 렌더링 되는데, 이는 history API를 사용하는 방식으로 해결가능하다. (그런데 이 부분은 로컬 환경에서는 수정가능한데 실제 배포때 어떻게 해야하는지 몰라서 좀 더 알아봐야 할듯)

[42KIM]

경영,사무 it,인터넷 으로 수정해놨는데
경영•사무 it•인터넷 이런식으로 고치는 게 나을 것 같네여

[youngToMaturity]

확인했습니다! 기타 부분의 history API를 사용한다는 것이 어떤 내용인가요?

[42KIM]

확인했습니다! 기타 부분의 history API를 사용한다는 것이 어떤 내용인가요?

@young961027
History API로 url을 바꿔주면,
어떤 경로로 접속하든지 index.html로 돌려줘야할 필요가 생기는데
이건 실제로 배포단계에서 설정해줘야 한다고 합니다.
지금 history api를 코드에 반영하지 않은 이유는 그렇게하면 새로고침할때마다 오류가 나게 됩니당 ㅠ