Next.js로 포트폴리오 만들기 2 - 다크모드 개선기 (Extra attributes from the server: data-theme,style 에러 해결, 서버에서 클라이언트 정보를 아는 법)

Extra attributes from the server 에러다크모드를 추가해둔 사이트에서  Extra attributes from the server: data-theme,style 에러가 발생했다서버에서 렌더링된 html 파일과 다른 data-theme, style 속성이 있어 발생하는 에러다 suppressHydrationWarning ...suppressHydrationWarning으로 hydration mismatch로 발생하는 에러를 무시하도록 설정할 수 있지만, 다른 원인으로 hydration mismatch가 일어났을 때도 경고를 무시할 수 있으므로 다른 방법을 찾아보고싶었다 enableColorScheme {children}ThemeProvider에서 enableColorScheme..

• format_list_bulleted 개인 프로젝트/포트폴리오
• · 2025. 3. 10.
• textsms

Next.js로 포트폴리오 만들기 1 - next-themes로 다크모드 구현하기

포트폴리오 사이트를 만들기 시작했다지금까지는 기획상 애니메이션 등 보여지는 요소들을 많이 구현해보지 못했는데 포트폴리오는 보여지는게 목적이다보니 궁금했던 모션이나 상호작용 등을 활용해보려한다 첫번째로 다크모드를 처음 시도해보려한다 next-themesNext.js에서 다크모드를 비롯한 테마 변경을 쉽게 구현할 수 있도록 하는 라이브러리클라이언트 측에서 localStorage 또는 class 속성을 사용해 테마를 적용하고 유지하도록 한다 주요 기능 및 이점- useTheme() 훅을 사용해 테마를 간편하게 변경할 수 있음- 사용자가 선택한 테마를 localStorage로 유지- class 기반 테마를 지원해 tailwindCSS를 활용할 때 유용- system 옵션을 사용해 사용자의 OS 테마 설정에 따라..

• format_list_bulleted 개인 프로젝트/포트폴리오
• · 2025. 3. 4.
• textsms

새 프로젝트 시작!

드디어 업무가 조금 안정이 돼서.. 해보고싶었던 프로젝트를 시작했다!!아마 띄엄띄엄 제작하게 될 것 같은데 차근차근 기록하면서 진행해보자 프로젝트 세팅설치 완료next.js 14 (app router)tailiwndzustandtanstack-query 세팅 전supabase (만약 스프레드시트로 충분하다면 사용X)prettier구글 스프레드시트 apimvp 목표와 그 이후 디벨롭시킬 기능 분리하기1차 목표랜딩페이지 -> 메인 페이지로 이어지게하기스프레드시트에서 데이터 불러오기데이터 -> 컴포넌트에 넣어서 화면에 띄워주기 (우선은 그리드 형태) 컴포넌트 상호작용은 위 세가지 세팅 이후에 시작하고 세가지 먼저 빠르게 완성해보자그 전에 다른 거 작업하지 않기!디자인 이상한 건 우선은.. 신경쓰지 않기!!!!

• format_list_bulleted 개인 프로젝트/뿌셔뿌셔 (개인)
• · 2025. 1. 25.
• textsms

TODO-LIST 만들기

최종 결과 🎂 과제 목표1) HTML로 기본 구조를 만든다.2) 자바스크립트로 할 일 추가 기능을 구현한다. (입력 필드, 버튼) 🎂 추가로 시도한 것1) 할 일 완료 표시, 체크박스 꾸미기2) 할 일 삭제 기능3) 배경, 버튼 그라데이션 색상 적용4) 입력창이 빈 상태일 경우 alert 띄우기  구현 방법🥐 입력을 받아 할 일 목록에 추가하기 + 입력창이 비었을 때 alert + 삭제 추가 '할 일(task)'들은 같은 분류의 요소들이 모여있는 목록이기에 ul로 만들기로 했고, 사용자가 입력한 요소들을 li로 추가하도록 구성했다. // task 추가const taskAddButton = document.querySelector('#taskAddButton');taskAdd..

• format_list_bulleted 개인 프로젝트/개인 과제
• · 2024. 7. 5.
• textsms

한식메뉴 렌더링하기

최종 결과  구현 목표주어진 데이터 menuItems 를 배열 메서드를 활용해 화면에 표시하기const menuItems = [ { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' }, { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' }, { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' }, { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' }, { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }];  추가한 기..

• format_list_bulleted 개인 프로젝트/개인 과제
• · 2024. 6. 26.
• textsms

[Javascript] 숫자기억게임 만들기

최종 결과 구현 목표1) 시작버튼 클릭시 1000~9999 사이의 숫자가 무작위로 나타나고, 3초 뒤 사라진다.2) 사용자가 숫자를 입력하고, 제출 버튼을 통해 정답 유무를 확인한다.3) 정답일시 "정답입니다!" 오답일시 "오답입니다! 정답은 nnnn입니다."를 노출한다.4) 그 외 자유! 추가한 기능1) 숫자가 보여지는 동안 입력 및 제출 제한, 사용자가 입력한 정답은 다시 게임을 시작할 때 지워주기2) 정답 제출 후 2초 뒤 초기화3) 제한시간(3초) 카운트다운 보이기4) 입력 필드에 안내문구 표시  setTimeout 활용 오류거의 끝났다 생각하고 즐겁게 테스트를 해보던 중.. 내가 외워야하는 숫자가 바뀌고 카운트다운도 멈추는 상황을 발견했다. 의심가는 곳에 중단점을 찍어보다가 화면 구성을 초기화하..

• format_list_bulleted 개인 프로젝트/개인 과제
• · 2024. 6. 20.
• textsms