[06] 어느 부분에서 CSR을 왜 사용했나요?

hyeyoonS commented 2 months ago

📎 질문

어느 부분에서 CSR을 왜 사용했나요?

✏ 구술 답변 키워드

✏ 서술 답변

Nahyun-Kang commented 2 months ago

저는 listywave에서 탐색 페이지, 인트로 페이지, 리스트 상세 조회 페이지를 담당했습니다. 이 중, 탐색 페이지와 리스트 상세 조회 페이지에서 CSR을 사용했는데 사용자 인터랙션이 활발하게 일어나는 페이지입니다. 특히 리스트 상세 조회 페이지의 경우 댓글, 답글과 같이 상태 데이터가 활발하게 업데이트 되고, 렌더링도 빈번하게 일어나는 곳이기에 CSR을 사용했습니다.

HaydenDevK commented 2 months ago

공통 UI를 pathname에 따라 조건부 렌더링하는 컴포넌트에서 usePathname 훅을 사용하기 위해 CSR을 적용했습니다.

Jyophie commented 2 months ago

마이펫로그 - 건강수첩 - CRUD 작성/수정 페이지를 CSR로 구현했습니다. 주로 내용을 작성하는 페이지이기 때문에 서버 데이터의 초기 렌더링보다 작성중에 일어나는 사용자 인터랙션에 대한 렌더링이 많이 필요한 페이지입니다.

hyeyoonS commented 2 months ago

유저와의 인터렉션이 필요한 곳에서 CSR을 사용했습니다. 대표적으로 회원가입이나 반려동물의 정보를 입력하는 부분입니다. 폼데이터를 효율적으로 관리하기 위해 React-Hook-Form을 사용하였는데, React-Hook-Form으로 데이터를 즉각적으로 렌더링하고 결과를 한번에 처리합니다.유저가 직접 정보를 입력하는 행위는 브라우저에서 사용자와 직접적으로 소통하고 결과를 곧바로 반영해야 하기에, Client Side에서 렌더링을 하도록 했습니다.

kanglocal commented 2 months ago

리스트 상세조회페이지.

사용자와의 많은 인터렉션이 있는 페이지이다. 버튼 방대한 양의 자바스크립트를 가지고 있어 CSR이 유리하다 판단했다. 하지만 내부의 일부 컴포넌트들은 SEO가 필요해보이기 때문에 일부 SSR로 변경 예정이다.
SSR로 렌더링하지 않을 컴포넌트들속에 포함된 기능으로는 URL복사, 비디오 임베디드, 북마크 등의 기능이 있는데, 각각 router에서 현재 주소를 꺼내와야하고, 비디오를 즉시 재생시키며 서버 부하를 줄이고, 버튼 클릭시 UI를 변경시켜야하는 이유로 CSR을 선택했다.

olseul commented 2 months ago

저는 반려동물의 일기를 한 눈에 볼 수 있는 피드를 구현하는데 CSR을 사용했습니다. FeedList 컴포넌트는 사용자의 스크롤에 따라 추가 콘텐츠를 비동기적으로 불러오는 무한 스크롤 기능을 포함하고 있습니다. 이러한 동적인 사용자경험을 원활하게 제공하기 위해 csr을 사용했습니다.

wise-Ag commented 2 months ago

일기 검색페이지

사용자와의 인터렉션이 많은 페이지입니다.
url의 query값으로 모든 동작이 이루어지기 때문에 query를 가져와 사용할 수 있는 CSR을 선택했습니다.

Eugene-A-01 commented 2 months ago

ListyWave

리스트를 생성하고 수정하는 페이지에 CSR을 적용했습니다. 해당 페이지에 CSR을 적용한 이유는 두가지입니다.

서버에 요청해 화면에 그려놔야하는 데이터가 없음
리스트 생성이라는 포스팅 특성상 버튼과 텍스트필드, 폼 입력과 같은 사용자와의 인터랙션이 매우 많음.

QueenCards / ProjectAnalysis