여러분 안녕하세요! UniBus에 오신 것을 환영합니다.
이곳에서는 각자의 관심사를 공유하고, 비슷한 취향을 가진 사람들과 만날 수 있습니다.
당신의 우주에서 찾아낸 흥미로운 주제를 공유하고, 다양한 이야기를 들어보세요.
텍스트의 내용이 서버에서 렌더링된 HTML과 일치하지 않는 에러가 발생하였다.
1. 서버와 클라이언트 간에 초기 상태를 일치시키기 위해 서버에서 렌더링된 HTML에 초기 상태를 포함시킨다.
2. 클라이언트에서 서버에서 렌더링된 상태를 기다려서 데이터가 로드된 후에 렌더링 되도록 처리한다. (useEffect사용)
3. HTML 태그의 잘못된 중첩을 고쳐준다.
4. 문제가 발생한 특정 구성요소만 SSR을 비활성화 해준다.
1. 문제를 보니 HTML 태그의 잘못된 중첩이 아닌 비동기로 데이터를 로딩하면서 생기는 문제인듯하다.
2. 비동기로 데이터를 로딩하면서 발생하는 문제이므로 기존의 text를 useState로 관리하여 초기값을 두고 useEffect를 사용하여 데이터 로딩이 완료된 후에 상태를 업데이트하는 해결방안이 적합해 보인다.
3. SSR을 비활성화 하는 방법이 있지만 그렇게 되면 사전 랜더링을 포기하는 것이기때문에 초기 성능이 좀더 좋지 않고 SEO관점에서도 좋지 않아 보인다.
기존의 text를 useState로 관리하여 초기값을 두고 useEffect를 사용하여 데이터 로딩이 완료된 후에 상태를 업데이트하는 방법으로 해결했다.
2 ) 불필요한 리렌더링 방지 🔗
내 정보를 수정할때, category button 과 nickname input 값이 변동될 때마다
페이지 전체가 불필요하게 리렌더링 되고 있었다.
컴포넌트 구조를 설계할 때, 부모의 요소에 state를 두고 자식요소에 state를 props로
내려준 뒤 값을 변동하고 있어, 자식요소에서 변동되는 state가 부모요소인 페이지까지 전달되어 불필요하게 렌더링되고 있음을 확인하고, 컴포넌트를 다시 설계하여 state의 위치를 자식요소에 배치시킨 뒤, useEffect를 사용하여 부모요소에 완성된 state의 값만을 전달하게 했다.
useRef로 input 값을 관리하려고 하였으나, 화면상에 렌더링이 되고 있음을 확인시켜줘야 하기때문에 useCallback 을 사용했다.
useEffcet 사용하여 불필요한 리렌더링 방지시켜주었다.
server state를 client state로 재조합하는 과정에서 contextAPI 를
사용하였으나 불필요한 리렌더링이 발생했고, 상태 추적 및 디버깅에 어려움이 생겼다.
internal state로 관리하려고 했으나 위의 단점으로 인해 external state 로
관리해야 할 필요성을 느꼈고, 시도해 본 상태관리 방법 중 2가지를 사안에 놓고
리팩터링 진행하기로 함.
1. Redux
2. Recoil
Redux, Recoil 모두 관련된 컴포넌트 업데이트 가능 및 DevTools 존재하지만, Recoil이 Redux에 비해 보일러플레이트 없이 코드를 간결하게 작성할 수 있다.
Recoil로 상태 관리하기로 결정하였다.
| 프론트엔드 | 프론트엔드 | 프론트엔드 | 백엔드 | 백엔드 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| 하은 | 남규 | 은지 | 장미 | 광균 |
| 남규 | 메인(무한스크롤), 날짜 지역 카테고리 필터, 관리자페이지(사용자 통계, 게시글 희망만남 위치 통계) |
|---|---|
| 하은 | 중앙 저장소 관리 (Recoil), AccessToken 관리 (재발급 포함), 카카오 로그인, 소개, 게시물 상세, 관리자 (사용자 전체 목록 전체 및 상세 조회, 차단, 구제), 검색, 에러, 구제 신청 |
| 은지 | 내 정보(수정), 게시글 작성, 유저 신고, 채팅, 관리자(수퍼관리자 권한, 차단글 관리) |