choijming21 님의 블로그

안녕하세요. 오늘은 Next.js가 제공해주는 Link 태그를 사용하다가 새탭에서 열고 싶을 때 어떻게 해야하는지 정리해보려고 합니다! 간단한 target="_blank" 추가만으로 가능하니 짧게 설명해보도록 하겠습니다.   🧚 Next.js의 Link 컴포넌트는 어떻게 동작할까? Next.js의 Link 컴포넌트는 내부적으로 HTML의 태그를 렌더링합니다. 이는 일반적인 웹 표준을 따르면서도 클라이언트 사이드 라우팅의 장점을 가져오기 위한 설계입니다.import Link from 'next/link';function MyComponent() { return ( About 페이지로 이동 );} 위 코드는 결국 HTML에서 다음과 같이 렌더링됩니다.About 페이지로 이동    🧚 새 탭에서..

1.  문제 발생❓React 폼 컴포넌트를 여러 곳에서 재사용하면서 발생한 문제입니다:같은 입력 폼을 여러 페이지에서 재사용해야 함각 페이지별로 자료 유형(materialType)만 다름자료 유형은 4가지로 고정: case-studies, company-intro, 2025-dxreport, digital-skill-standard 폼 컴포넌트에 material prop을 전달해 구분폼 제출 시 스프레드 연산자를 사용해 formData에 materialType 추가:body: JSON.stringify({ ...formData, materialType: material })문제점: 폼 데이터를 서버에 전송할 때 materialType 필드가 페이로드에는 있지만, 검증 후의 데이터에서는 사라지는 문제가 발..

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..