랜딩페이지 구현 중 ‘id 저장’ 문제

전 페이지에서 사용되는 ‘유저아이디’를 랜딩페이지에서 입력받아 저장할 수단으로

context를 사용시 새로고침시 id가 없어지는 문제가 있었다.

쿠키를 도입시 브라우저를 닫으면 id가 없어지는 문제로 list 페이지에서 누적으로 본인 아이디를 쌓을 수 없는 문제가 생겼다.

로컬스토리지로 id를 관리하며 새로고침, 브라우저 열고닫기 문제를 모두 해결할 수 있었다.

랜딩페이지 구현 중 ‘스크롤이 생기는’ 문제

layout, header 등 부모 및 형제 컴포넌트가 쌓이면서 height로 100%를 줘도 원하는 결과를 얻을 수 없는 고민이 있었다.

rem, px, % 사용과 더불어 vh단위 이용하여 calc(100vh - Npx) 로 이미지 리사이징 후 해결할 수 있었다.

SNS 공유기능 구현 중 ‘카카오 SDK’ 문제

배포 후 도메인을 연결하고 개인키를 위해 .env 도입하며 해결할 수 있었다.

다크모드 추가기능 구현 중 ‘이미지 자원 + 쿠키?스토리지?’ 문제

다크모드 구현을 위해 부족한 이미지 자원을 보충하기 위해 포토샵 툴을 추가적으로 이용하였다.

새로고침, 브라우저 여닫기 등 이후에도 이전에 사용하던 테마가 유지되지 않는 점을 보완하기 위해 다크/라이트에 해당하는 theme 정보는 context로 관리하며 이를 로컬 스토리지에 저장하고 있다.

BGM 추가기능 구현 중 ‘페이지 이동시 음악 다시 재생되는’ 문제

BGM은 state로 관리하고 있다.

프로젝트 내에서 a, Link와 같이 재렌더링이 아닌 페이지를 ‘새로고침’ 시키는 요소들을 모두 Navigate를 이용해 바꿔줌을 통해 새로고침이 아닌 재렌더링만 일어나게 함으로써 페이지 이동 시에도 음악이 끊이지 않고 재생될 수 있도록 하였다.