choijming21 님의 블로그

Next.js 애플리케이션 개발할 때 반응형 UI를 구현하기 위해 디바이스 타입을 감지하는 것은 중요한 작업입니다. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 활용하는 Next.js에서는 이 두 환경에서 일관된 디바이스 감지 방법이 필요합니다!  이 글에서는 서버 컴포넌트에서 초기 디바이스 판별을 하고, 이를 클라이언트 컴포넌트로 전달하여 실시간으로 반응형 UI를 구현했던 방법을 설명드리겠습니다!🙆‍♀️     ✅ 서버 사이드에서 디바이스 감지하기 ✅먼저 서버 컴포넌트에서 userAgent를 기반으로 디바이스 타입을 감지하는 함수를 만듭니다. ☑️ userAgent()란?Next.js의 내장 기능으로 next/server 모듈에서 userAgent 함수를 제공합니다. 이 함..

Next.js에서 특히 App Router를 사용할 때 폴더 구조는 코드 유지보수성과 개발 효율성에 큰 영향을 미칩니다. 이 글에서는 랜딩 페이지 중심의 Next.js 프로젝트에서 촐더 구조를 개선한 사례를 공유합니다!  📌 기존 폴더 구조의 문제점 📌프로젝트 초기에는 다음과 같은 구조로 시작했습니다.📦src ┣ 📂app ┃ ┣ 📂components ┃ ┃ ┣ 📂landing ┃ ┃ ┃ ┣ 📜Accomplishment.tsx ┃ ┃ ┃ ┣ 📜CaseCard.tsx ┃ ┃ ┃ ┣ 📜CaseSection.tsx ┃ ┃ ┃ ┣ 📜Closing.tsx ┃ ┃ ┃ ┣ 📜CurriculumCard.tsx ┃ ┃ ┃ ┗ ... ┃ ┃ ┣ 📂typography ┃ ┃ ┃ ┣ 📜H2.tsx ┃ ┃..

안녕하세요! 오늘은 React와 styled-components를 사용하여 직접 만든 커스텀 토글 버튼 구현 방법에 대해 공유하려고 합니다. 단순히 켜고 끄는 기능뿐만 아니라, 상태에 따라 "ON"과 "OFF" 텍스트도 변경되는 토글 버튼을 만들어보겠습니다.   ⭐ 최종 결과물 ⭐ 원형 핸들이 왼쪽/오른쪽으로 움직입니다.상태에 따라 배경색이 변경됩니다.상태에 따라 "ON"/"OFF" 텍스트가 표시됩니다.상태에 따라 텍스트 색상이 변경됩니다.      코드 구현1. 컴포넌트 구조 (ToggleButton.tsx)import React, { useState } from "react";import * as S from "./toggleButton.style";const ToggleButton = () => {..

useMemo와 React.memo 그리고 useCallback에 대해 공부한 것을 정리해보겠습니다! 먼저, Memoization이란! 이미 계산해본 연산 결과를 기억해두었다가 동일한 연산을 해야할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법입니다. 마치 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사합니다.   ✅ useMemo란? useMemo는 특정 값이나 참조가 변경될 때만 재계산을 수행하고 그렇지 않으면 이전에 계산된 결과를 재사용합니다.복잡한 계산이나 처리가 필요한 경우렌더링 성능 최적화가 필요한 경우 기본적으로 React는 부모 component로 부터 받는 state, props가 변동될 경우 자식 component도 리렌더링됩니다. 하지만..

Jotai란?React 상태관리 라이브러리 중 하나로 비교적 매우 간단하고 작은 단위로 전역 상태 관리가 가능매우 작은 3kb의 번들 사이즈와 타입스크립트에 지향적Jotai는 React.js, Next.js, React Native에서 사용이 가능  jotai의 기본 사용법기본적으로 Jotai는 React 내의 state, useState와 유사한 모양이기 때문에 쉽게 입문할 수 있습니다. 전역 관리 atom을 생성하고, 생성된 atom을 컴포넌트 내에 불러와 사용한다고 생각하면 됩니다.  1. atom: atom을 생성하고 괄호 안에 초기값을 넣을 수 있습니다.const counter = atom(0);  2. useAtom(read/write): 생성된 atom을 불러와서 useState와 동일하게 ..

1.  문제 발생❓ 제 프로젝트에서는 네비게이션바(GNB)의 버튼들이 두 가지 다른 기능을 수행해야 했습니다:특정 섹션으로 자동 스크롤 되는 버튼 ( "/ " => 해당 섹션으로 이동 )새로운 페이지로 이동하는 버튼 ( "/resource" ) 이러한 두 기능을 사용하는 버튼이 각각 있었는데, 문제는 페이지 이동 후에도 원래의 페이지에서 자동 스크롤 기능을 유지해야 한다는 점이었습니다. 즉, 다른 페이지에서 특정 섹션으로 이동하는 버튼을 클릭 했을 때, 메인 페이지로 이동한 다음 해당 섹션으로 자동 스크롤 되어야 했습니다.    2.  해결 과정 📋 이 문제를 해결하기 위해 useNavigationHandler 커스텀 훅을 개발했습니다. 이 훅은 버튼 클릭 시 동작을 결정하고, 필요에 따라 페이지 이동..

1.  문제 발생❓TypeScript에서 MutableRefObject 타입을 사용하는 Lnb 컴포넌트에서 refs.current를 배열처럼 처리하려고 할 때 문제가 발생했습니다. PdpRefs는 Map 타입으로 정의되어 있지만, 실제로는 숫자 인덱스(0, 1, 2, 3 등)로 접근할 수 있는 객체로 동작했습니다.// 타입 정의export type PdpRefs = Map;// 컴포넌트에서 시도한 코드{refs.current.map((ref, index) => { // 오류: 'map' 속성이 없습니다 // ...})}   2.  원인 추론 🔎TypeScript 타입으로는 PdpRefs가 Map 객체로 정의되어 있음실제 런타임에서 refs.current는 다음과 같은 특성을 보임Object.keys(..

안녕하세요! 오늘은 제가 프로젝트에서 마주친 반응형 이미지 렌더링 문제와 해결 방법에 대해 공유하려고 합니다.  1.  문제 발생❓제 프로젝트에서는 breakpoint가 768px로만 설정되어 있었지만, 이미지는 mobile, tablet, desktop 세 가지 디바이스 크기에 맞춰 렌더링해야 했습니다. 이런 요구사항을 어떻게 효율적으로 구현할지 고민하던 중 HTML의와 태그를 알게 되었습니다.   2.  해결 과정 📋HTML5에서 도입된 태그는 다양한 화면 크기와 해상도에 맞는 이미지를 제공하는 강력한 방법입니다. 이 태그는 태그와 함께 사용하여 미디어 쿼리에 따라 적절한 이미지를 자동으로 선택해 줍니다. import React from "react";import { DesktopViewCon..

Vercel CLI란?Vercel 클라우드 플랫폼 명령줄에서 관리할 수 있게 해주는 도구입니다.CLI를 통해 프로젝트 배포, 환경변수 관리, 도메인 설정 등 Vercel의 다양한 기능을 터미널에서 직접 제어할 수 있습니다. Vercel CLI 설치npm install -g vercel Vercel에 로그인vercel login 프로젝트 디렉토리에서 Vercel 프로젝트 연결cd your-project-directofyvercel link 환경변수 다운로드vercel env pull .env.local 특정 환경 변수만 가져오기(선택 사항)vercel env pull .env.local --environment=developmentvercel env pull .env.local --environment=p..

제가 팀프로젝트에서 이번에 적용해야 할 것은 유저가 버튼(전체 스터디 보기)을 클릭했을 때, 자동으로 전체 스터디 컴포넌트로 스크롤 되는 동작을 구현해야 합니다:) 그럼 먼저 useRef에 대해 알아보도록 하겠습니다.  1. useRef란?React 공식 홈페이지에서는 ".current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다." 라고 설명하고 있습니다.쉽게 말하자면, useRef의 Ref는 reference(참조)의 줄임말로 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. 주요한 특징은 특정한 DOM 요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다..