안녕하세요, LG U+ URECA 프론트엔드 대면반 1기 고주희입니다.
이번 주차에서는 지난 번 과제 진행에 이어 react-router-dom 을 사용하여 페이지 이동이 가능하도록 만들고 Recoil을 사용하여 Prop drilling을 피하는 것에 집중하였습니다.
전역 상태관리 필요할 것으로 예상되는 message와 user 데이터를 atoms.ts 파일에 세팅해 둔 이후 추가 기능을 구현했으면 좋았을텐데, 기존 방식(props drilling)대로 모든 기능을 구현해 두고서야 상태관리 라이브러리를 사용하는 것이 필수 과제라는 문장을 뒤늦게 보았습니다. 그리하여 다시 recoil을 사용하는 것으로 변경하려니 시간도 더 걸리고 한참 돌아온 것 같아 아쉬웠습니다. 하지만, 이 과정을 통해 오히려 더 상태 관리 라이브러리의 필요성을 극적으로 느낄 수 있었기에 의미있는 시간이었다고 생각됩니다. 🤩
또한, 지난 과제에서는 코드 확장, 재사용을 고려하여 구현하는 것이 목표였는데 그때 고려했던 흐름 그대로 확장이 진행할 수 있어서 매우 흥미로웠습니다. 매번 큰 틀에서 작게 좁혀나가는 방식으로만 개발했었는데 작은 것에서 큰 것으로 확장하는 경험을 얻을 수 있었을 뿐더러, 추후 기능 추가가 될 것을 고려하여 더 명확한 파일 이름과 구조를 잡는 것이 왜 중요한 지 몸소 느껴볼 수 있었습니다.
- 화면 UI 구현 ✅
- 채팅 목록 페이지를 추가하여 Routing 구현 ✅
- 각각의 채팅방에서 뒤로가기 버튼을 클릭하면 채팅 목록 페이지로 이동 ✅
- 상태관리 라이브러리(Recoil, Zustand, Jotai 등)를 사용 ✅
- (선택 사항) 채팅 목록 페이지에서 사용자의 이름 검색 ❌
- (선택 사항) 채팅 목록 페이지에서 각 채팅방의 마지막 채팅을 표시 ✅
- 배포 ✅
(1) SPA / MPA / CSR / SSR 이란 무엇인가요?
- SPA : 단일 페이지로 구성된 웹 애플리케이션. 페이지가 로드될 때 전체 애플리케이션이 로드됨. 페이지를 전체 새로고침하지 않고 사용자와의 상호작용이 있는 부분 콘텐츠만 동적으로 변경하여 UX 측면에서 장점이 있음. => CSR
- MPA : 여러 페이지로 구성된 웹 애플리케이션. 사용자가 링크를 클릭할 때 마다 매번 전체 페이지가 새로 로드됨. 검색 엔진 최적화(SEO)에 유리함. => SSR
- CSR : Client Side Rendering, 클라이언트 측에서 웹 페이지를 렌더링 함. 처음 로딩 시 기존 HTML 틀만 로드한 후 Javascript를 통해 동적으로 콘텐츠가 생성됨.
- SSR : Server Side Rendering, 서버 측에서 미리 웹 페이지를 렌더링 함. 그렇기 때문에 초기 페이지 로딩 시간이 짧음.
(2) React에서 상태는 어떻게 관리할 수 있나요?
- 방법 1 ) 기본적으로는 useState 훅을 이용하여 지역적인 상태를 생성하고 사용함, 필요 시 자식컴포넌트에 props로 전달함.
- 방법 2 ) React 내장 API인 useContext API를 사용하여 전역으로 상태 관리를 할 수 있게 함.
- 방법 3 ) Redux나 Recoil 같은 상태관리 라이브러리를 사용.
(3) 어떤 상태관리 라이브러리를 사용했고, 그것의 특징은 무엇인가요?
- Recoil : React에서 만들어졌으며 코드가 복잡한 Redux를 보완하고자 나온 라이브러리로 알고있음.
