useState 동작 원리 쉽게 이해하기: React 상태 관리의 핵심React에서 상태 관리는 사용자 인터페이스를 동적으로 만들고 상호작용을 구현하는 데 필수적인 개념이다. 그중에서도 useState Hook은 컴포넌트 내에서 상태를 관리하는 가장 기본적인 도구이다. 이 글에서는 useState의 동작 원리를 쉽게 이해하고, 효과적으로 활용하는 방법을 알아본다.1. useState의 기본 구조: 상태 변수와 업데이트 함수useState Hook을 컴포넌트 내에서 호출하면 배열 형태의 값이 반환된다. 첫 번째 요소는 현재 상태 값을 담고 있는 변수이고, 두 번째 요소는 이 상태 값을 업데이트(마치 setter 함수와 닮았다!)하는 함수이다.import React, { useState } from 'rea..

여기에서는 리액트 프로젝트를 우분투 서버에서 구동하는 방법을 다루고자 한다. 먼저 프로젝트 빌드부터 해보자!1. 프로젝트 빌드리액트 프로젝트의 package.json에 설정된 빌드 명령어를 사용하더 프로젝트를 빌드한다. 아래는 명령어 예제이다.npm run build 빌드가 완료되면 index.html이 포함된 build 폴더가 생성된다.2. 구동 명령2-1. npx로 구동npx로 간단하게 구동해 볼 수 있다. 프로젝트 경로에서(build 경로로 이동할 필요가 없다.) 아래 명령어를 실행하면 빌드된 프로젝트가 포그라운드에서 구동된다.npx serve -l [실행할 포트 번호] -s build예를 들어 3000번 포트로 프로젝트를 구동하고 싶다면 아래와 같이 명령어를 작성하면 된다.npx serve -l ..

1. 지도 영역 크기 변경 후 지도 잘림 현상 문제 발생좌측 aside를 숨기는 기능을 구현하였다. 메인 콘텐츠 영역에는 [그림 1]과 같이 네이버 지도가 렌더링 되어 있다. aside 숨김 버튼을 클릭하면 [그림 2]와 같이 지도 부분이 비정상적으로 잘려서 표시된다. 2. 지도 리사이즈 이벤트 강제 트리거로 문제 해결지도 영역 변경 발생 시 리사이즈 이벤트를 강제 트리거하여 문제를 해결하였다. 강제 트리거 방법은 " naver.maps.Event.trigger()"를 호출하는 것이다. 아래는 적용된 코드 예시이다.useEffect(() => { // naverMap은 useRef()이다. if (naverMap.current) { setTimeout(() => { const { nav..

1. useState로 관리하는 지도 센터 값 성능 문제지도의 센터 위경도 값에 따라 breadcrumb의 표시 정보가 달라지는 기능을 구현하였다. breadcrumb의 정보가 자동으로 변경되려면 센터 위경도 값의 변경을 감지해야 하므로 useState를 사용하였는데 문제는 마우스 좌클릭하여 지도를 이동할 때마다 무수히 많은 센터 위경도 값이 생성되어 그만큼의 리렌더링이 일어난다는 것이다.지도는 "react-naver-maps": "^0.1.2" 라이브러리를 사용했는데 "NaverMap" 컴포넌트에 "onCenterChanged" props로 setState를 넘기면 지도의 중앙 위경도 값을 state로 관리할 수 있다. setMapCenterPoint(latLng)}>(생략)위와 연관된 useState..

React.js 프로젝트에 shadcn을 적용하고자 하였다.  공식 페이지(https://ui.shadcn.com/docs/cli)에 있는 아래 명령어를 입력하였으나 정상적으로 설치되지 않았다.npx shadcn@latest init다른 여러 방법으로도 시도해 봤지만 결국 적용하지 못했다. 설치 실패 메시지 중 프레임워크를 찾을 수 없다는 내용이 반복되어서 결국 Next.js 프로젝트에 적용해 보게 되었고 너무도 자연스럽게 진행됨을 경험했다.이 글을 쓰고 있는 시점에서 shadcn은 React.js 프로젝트보다는 Next.js 프로젝트(버전 15.0.3)에 적용하는 것이 정신건강에 이롭다고 정리해 본다.1. Next.js 프로젝트에 shadcn 적용Next.js 프로젝트에 shadcn 적용은 아래 공식 ..

1. 화면에 렌더링 된 테이블 페이지 오버플로우 문제jsPDF를 이용해 웹 화면을 PDF로 내보내기 기능을 구현했다. 에러 없이 작동하였으나 [그림 1]과 같이 페이지 오버플로우로 그림이 잘린 경우 앞 페이지 하단, 뒷 페이지 상단 여백이 전혀 없는 pdf 파일이 생성되었다. 2. canvas 이용하여 해결페이지 오버플로우가 발생할 경우 이미지를 페이지 크기로 잘라 새로운 캔버스에 그리고 새로운 캔버스를 PDF에 추가하는 방식으로 해결하였다. [그림 2]는 최종 결과물이다. 작성한 전체 코드는 아래와 같다.import jsPDF from 'jspdf';import font from './font/NanumGothic-normal';import { format } from 'date-fns';const P..

1. Zod 설치 Zod는 유효성 검사 라이브러리이다. npm i zod 😉 공식 문서 : https://zod.dev/ 2. 적용 방법 📌 스키마 작성 // src/app/api/users/schema.ts import { z } from "zod"; const schema = z.object({ name: z.string().min(3), email: z.string().email(), age: z.number(), }); export default schema; 📌 Zod 적용 // src/app/api/users/[id]/route.tsx import { NextRequest, NextResponse } from "next/server"; import schema from "../schema"; ..

1. 한 페이지에 하나의 GLTF만 렌더링 되는 문제 페이지에 하나의 GLTF 파일을 이용해 여러 개의 모델을 렌더링 하고자 하였다. 이미지 태그를 이용하는 방식처럼 당연히 가능할 거라 생각했는데 현실은 [그림 2]와 같이 마지막 하나의 구성만 적용되었다. 여러 테스트 중에 GLTF의 복사본의 만들어 이름을 달리하여 로드했더니 원하는 결과를 얻을 수 있었다. 하지만 렌더링 모델의 개수만큼 동일한 내용을 담고 있는 GLTF 파일을 무수히 만들 수는 없는 일이었다. 2. Clone으로 문제 해결 react-three-fiber에서 Clone 컴포넌트를 제공하고 있었다. 이 기능을 이용하여 [그림 2]와 같이 하나의 GLTF를 통해 2개 이상의 모델을 화면에 렌더링 할 수 있었다. 해당 코드는 아래와 같다. ..