⬅️ 이전 페이지로 이동

Hello Mundo 프로젝트 아키텍쳐

hellomundo architecture.png

Hello Mundo 프로젝트 ERD

hellomundo erd.png

Hello Mundo 프로젝트 화면

스크린샷 2024-01-20 020946 (1).png

스크린샷 2024-01-20 021907 (1).png

스크린샷 2024-01-20 021632 (1).png

스크린샷 2024-01-20 022326 (1).png

경험 : React Hook 활용 다크모드 랜더링 개선

리액트 다크 모드 적용 후기 및 오류 해결

문제

  1. 다크모드 전환 시 스타일이 새로고침된 후에야 적용되었고, 잠깐 초기 스타일이 보이는 문제가 발생하였습니다.
  2. 다크모드 전환 시 느리게 전환되는 문제가 발생하였습니다.

진행 과정

  1. 기존에는 theme 값을 javascript에서 직업 사용하고 있었으며, 이를 state에 저장하여 새로고침 없이도 UI가 즉시 변경되도록 수정하였습니다.
  2. 초기 스타일이 잠깐 보이는 문제를 해결하기 위해 useEffect 대신 useLayoutEffect를 사용하여 초기 스타일이 즉시 적용되도록 변경하였습니다.
  3. 다크모드 스타일을 담고 있는 객체가 context 컴포넌트가 렌더링될 때마다 불필요하게 새로 생성되고 있었습니다. 이를 useMemo를 활용하여 메모이제이션하고, mode 값이 변경될 때만 새로운 스타일 객체가 생성되도록 최적화하였습니다.