ayeongjin 님의 블로그

👩‍🔧 Next.js에서 초기 스타일이 깜빡이는 FOUC 문제 해결하기2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용) [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)🎨 Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다.ayeongjin.tistory.com2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로..

🖋️ Next.js + TypeScript 에서 로컬스토리지에 저장하기 - #2 (폰트 및 폰트사이즈 적용)이전에는 멀티테마를 적용해서 사용자 맞춤형 컬러를 UI에 반영할 수 있도록 했다.2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용) [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)🎨 Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다.ayeongjin.tistory.com 이..

🖍️ Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다. 이를 위해 전역 스타일 컬러 변경과 폰트 설정 기능을 구현했다 1. Tailwind CSS를 활용한 전역 테마 컬러 설정사용자는 원하는 테마 색상을 선택하여 자신의 다이어리를 커스터마이징할 수 있다. Tailwind CSS를 사용하여 CSS 변수(var(--color-500)) 기반으로 테마 컬러를 관리하도록 설정했다. Tailwind 설정 (tailwind.config.ts)Tailwind CSS는 tailwind.config.ts에서 사용자 정의 색상을 추가할 수 있도록 지원한다. 여기서 CSS 변수를 기반..

웹 개발에서 데이터를 클라이언트 측에 저장하는 방법으로 로컬 스토리지(LocalStorage), 세션 스토리지(SessionStorage), 쿠키(Cookie)가 많이 사용됩니다. 1. 로컬 스토리지(LocalStorage)로컬 스토리지는 브라우저에 데이터를 영구적으로 저장하는 저장소입니다. 사용자가 브라우저를 닫아도 데이터가 유지되며, 같은 도메인 내에서는 언제든지 접근할 수 있습니다.데이터 지속성: 브라우저를 닫고 다시 열어도 데이터가 유지됨저장 용량: 일반적으로 5MB 이상 저장 가능보안: 서버로 자동 전송되지 않음 (XSS 공격에 취약할 수 있음)접근 방식:// 데이터 저장localStorage.setItem("key", "value");// 데이터 가져오기const value = localSto..