Unwound Developer

다크모드 / 라이트모드 구현 방법최근에는 사용자 기기의 다크/라이트 테마 설정 값을 따라 웹 테마도 자동으로 변경되는 경우가 많아요.예를 들어 유튜브도 시스템 설정에 따라 테마가 바뀌는 대표적인 예시입니다.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..

먼저 React Hook에 대해 정리하겠습니다. CustomHook에 대해서만 궁금하다면 아래로 가주세요.Hook은 React를 개발하다 보면 자주들을 수 있는 단어입니다.처음에는 공식문서등의 Hook에 대한 설명이 와닿지 않아, 정확한 개념은 알지 못하고 넘어가기 일쑤였는데요..최근에 회사에서 프론트엔드 개발을 맡게 되어, 개념적인 부분을 보다 확실하게 알고 넘어가고자하여 알아보게되었습니다.## React Hook과 그 등장 배경React Hook은 함수형 컴포넌트에서도 상태 관리 및 생명주기 관련 기능을 사용할 수 있도록 React 16.8에서 도입된 새로운 API입니다. 기존에는 클래스형 컴포넌트에서만 사용할 수 있었던 상태 관리 기능을 함수형 컴포넌트에서도 활용할 수 있게 되었습니다.Hook의 주..