Unwound Developer

fullpage.js 직접 만들게 된 이유첫번째 이유는 유료라는 것 입니다. 그리고 fullpage 라이브러리들이 공통적으로 사용하기 귀찮은 점이 있었는데,사용하기 위해 지켜야할 컨벤션이라던가 제한되는 부분이 많아서 적용시키는것에 어려움이 있었습니다. 가장 큰 이유는 fullpage 개발시 요구사항이 각 섹션 내에서 스크롤이 되면서, 해당 섹션을 벗어날 때 fullpage가 작동해야 한다는 것이었습니다. 위 영상 처럼요 보통 일반적으로 fullpage를 적용하는 경우를 보면 각 섹션들이 height:100vh 속성을 가지는 경우가 대부분인데, 그러면 구현하기는 간단하지만, 각 섹션내에서 스크롤이 생기게할 수는 없습니다.  이러한 도전 과제들을 해결하기 위해 React와 TypeScript를 사용하여 자체..

다크모드 / 라이트모드 구현 방법최근에는 사용자 기기의 다크/라이트 테마 설정 값을 따라 웹 테마도 자동으로 변경되는 경우가 많아요.예를 들어 유튜브도 시스템 설정에 따라 테마가 바뀌는 대표적인 예시입니다.1. CSS에서 테마 컨트롤하기prefers-color-scheme 미디어 쿼리를 사용하면 사용자의 시스템 설정에 따라 다크 모드인지 라이트 모드인지 자동으로 판단할 수 있습니다. 이를 활용해 조건부 스타일을 적용할 수 있어요.코드 예시/* 라이트 모드 스타일 */body { background-color: white; color: black;}/* 다크 모드 스타일 */@media (prefers-color-scheme: dark) { body { background-color: black..

Next.js를 활용한 SSR 다국어 처리(i18n)1. 유저의 locale 감지 방법애플같은 사이트를 접속하다보면, 내 국가에 따라 언어가 자동으로 설정되는 것을 흔히 볼 수 있습니다.보통 url에서 apple.ko 혹은 apple/ko 이런 식으로 국가 코드에 따라 언어가 설정 됩니다.그 다국어 처리를 Next.js SSR 환경에서 구현하는 것을 알아보겠습니다.클라이언트 측 (navigator.language)브라우저에서 사용자가 어떤 언어를 쓰고 있는지 알 수 있음.navigator.language는 브라우저의 UI 언어 정보를 저장합니다.브라우저 설정에 따라 달라짐.const locale = window.navigator.language;서버 측 (Accept-Language)Next.js는 서버..

React에서 state는 컴포넌트가 관리하는 동적인 데이터를 의미합니다.컴포넌트의 상태를 나타내며, 값이 변경되면 해당 컴포넌트가 다시 렌더링됩니다.그렇다면 React state와 일반 변수와의 차이가 뭘까요?주요 특징:동적 데이터 관리: 사용자 입력, API 응답 등 변경 가능한 데이터를 저장.지역적(scope): 각 컴포넌트의 state는 해당 컴포넌트 내부에서만 관리.불변성(immutability): 직접 수정하지 않고, 항상 setState 또는 state setter 함수로 업데이트.간단한 예제:import React, { useState } from 'react'; function Counter() { const \[count, setCount\] = useState(0); // coun..