전체 글

useReducer는 React에서 상태 관리를 위해 사용하는 훅 중 하나로, 복잡한 상태 로직을 보다 체계적으로 관리하고 싶을 때 유용합니다. 특히 상태 변경 로직이 여러 단계로 나누어져 있거나, 상태 업데이트가 명확한 액션에 의해 이루어져야 할 때 사용됩니다. Redux의 상태 관리 방식과 유사하게 리듀서 패턴을 사용하여 상태를 업데이트합니다.useReducer의 기본 구조useReducer는 세 가지 요소를 인자로 받습니다:리듀서 함수: 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.초기 상태: 상태의 초기 값입니다.초기화 함수 (선택적): 초기 상태를 더 복잡한 방식으로 설정해야 할 경우에 사용할 수 있습니다.useReducer는 dispatch 함수를 반환하며, 이 dispatch..

싱글 스레드인 자바스크립트가 어떻게 비동기를 구현합니까?네, 좋은 질문입니다! JavaScript는 싱글 스레드(single-threaded) 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있는 실행 스레드를 가지고 있습니다. 그럼에도 불구하고, 비동기 작업을 통해 마치 멀티스레드처럼 여러 작업이 동시에 실행되는 것처럼 보일 수 있습니다. 이는 JavaScript의 런타임 환경, 특히 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue) 덕분입니다.자바스크립트의 비동기 작업 처리는 자바스크립트 엔진(V8 엔진 등)과 이를 실행하는 런타임 환경(브라우저, Node.js 등)의 구조에 의해 가능해집니다.1. 싱글 스레드와 비동기 처리JavaScript는 기본적으로 싱글 스레드로 동작..

"어쩌구.확장자" 를 "어쩌구_high.확장자" 같은식으로 바꾸고 싶다.jpg 외에도 .png 파일명을 함께 처리하고 싶다면, .replace() 메서드에서 정규식을 사용하여 .jpg와 .png 둘 다를 한 번에 처리할 수 있습니다.예시:const fileName = "1727585085748_IMG_7877.jpg"; // 또는 "1727585085748_IMG_7877.png"const highFileName = fileName.replace(/\.(jpg|png)$/i, '_high.$1');console.log(highFileName); // 출력: 1727585085748_IMG_7877_high.jpg 또는 1727585085748_IMG_7877_high.png설명:\.(jpg|png)$..

cn : tailwind-merge 와 clsx를 결합한 유틸리티 함수import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));} 이런 유틸리티 함수를 찾았는데아주 유용해 보였습니다. 그런데 이전 프로젝트에서 twMerge 함수만으로도clsx 없이 유사하게 썼던 기억이 있어서차이점에 대해 다시 짚어봤습니다. 결론은위처럼 cn (이름이야뭐,,,) 함수를 쓰는 것이clsx 의 여러 기능도 사용하면서 tailwind 유틸리티 클래스들을효과적으로 병합할 수 있는 좋은 방법이다였습니다..

React.FC와 React.ReactNode는 React에서 각각 다른 목적을 가진 타입입니다. 두 타입의 차이를 이해하면 타입스크립트로 React 애플리케이션을 개발할 때 보다 명확하게 타입을 지정할 수 있습니다.React.FC (React.FunctionComponent)설명: React.FC는 함수형 컴포넌트를 정의할 때 사용하는 타입입니다.용도: 컴포넌트의 props 타입을 지정하고, 해당 컴포넌트가 React 요소를 반환한다는 것을 명시합니다.특징:제네릭 타입으로 Props의 타입을 지정할 수 있습니다.기본적으로 children 프로퍼티를 포함하고 있습니다.컴포넌트의 반환 타입이 ReactElement임을 명시합니다.예시:import React from 'react'; interface MyC..

Q1 yarn berry 적용법yarn berry 도입에 대한 질문이 있습니다.점차 개발 폴더들이 많아 지면서 용량을 많이 차지하기 시작했습니다.여기서 가장 크게 용량을 반복적으로 차지하는 것은 node_modules 입니다.그래서 yarn berry 를 도입하려고 합니다.방법을 순차적으로 알려주세요.A1Yarn Berry(또는 Yarn 2)는 node_modules 폴더를 제거하고 패키지 종속성을 효율적으로 관리하는 데 도움을 줍니다. 이는 프로젝트의 용량을 줄이고 성능을 개선하는 데 유리합니다. Yarn Berry를 도입하는 방법을 순차적으로 설명하겠습니다.1. Yarn 설치 확인먼저, Yarn이 시스템에 설치되어 있는지 확인합니다. 터미널에서 다음 명령어를 실행해보세요:yarn --versionYa..

next font 와 tailwind 로 모노레포에 폰트 적용하기모노레포 구성은 다음과 같은 상황입니다. /apps/admin => nextjs app/apps/invitation => nextjs app/apps/www => nextjs app/apps/storybook => storybook app/packages/config-tailwind => 테일윈드 공용 설정들 모여 있는 곳/packages/shared => 공용 컴포넌트 디렉토리(nextjs 아님) 이때 같은 폰트들을 각 app 들이 모두 사용합니다.처음에 생각한 것은 shared 에만 폰트를 설정하고각 app 에서 임포트 해서 쓰는 방법이었는데shared는 nextjs가 아니어서 next font를 사용할 수 없었습니다. 또한 storyb..

pnpm 설치가 중복으로 되어서..쓸데없이 시간을 잡아먹은 부분을역시 GPT o1쌤과 함께 해결해봤고 이 내용을 정리합니다..알겠습니다. npm uninstall -g pnpm 명령어가 제대로 작동하지 않는다면, 몇 가지 이유가 있을 수 있습니다. 다음 단계를 통해 문제를 해결해보세요.pnpm의 설치 방법 확인하기:Homebrew를 통해 설치된 경우:위 명령어를 실행했을 때 pnpm이 나열된다면 Homebrew를 통해 설치된 것입니다.brew list pnpmpnpm이 npm을 통해 설치되지 않았을 수 있습니다. 예를 들어, Homebrew나 다른 패키지 매니저를 사용하여 설치했을 수 있습니다.Homebrew를 통해 pnpm 제거하기:brew uninstall pnpm만약 pnpm이 Homebrew로 설..

새로 나온 chatGPT-o1 에게 ISR 에 관해 물어봤습니다.revalidatePath 를 통해 데이터가 업데이트 되면 메인페이지를 ISR 하도록 하였습니다.이것이 next.js 에서 적용되는 원리와 과정에 대해 물어보았습니다.GPT 쌤의 답변당신은 Next.js 14 프로젝트에서 App Router를 사용하고 있으며, 라우트 핸들러 내에서 revalidatePath 함수를 구현하여 서버 데이터가 업데이트될 때 Incremental Static Regeneration(ISR)을 트리거했습니다. 이 메커니즘은 전체 재빌드나 수동 개입 없이도 정적으로 생성된 페이지가 최신 데이터를 반영하도록 보장합니다. 이제 이것이 어떻게 작동하는지 원리와 과정을 자세히 살펴보겠습니다.Incremental Static ..

zod는 TypeScript와 JavaScript에서 사용할 수 있는 스키마 선언 및 검증 라이브러리입니다. zod를 사용하면 객체, 배열, 숫자, 문자열 등 다양한 데이터 구조를 스키마로 정의하고, 이를 기반으로 데이터의 유효성을 검증할 수 있습니다. 이를 통해 타입 안정성과 런타임에서의 데이터 검증을 동시에 수행할 수 있습니다.왜 zod를 사용하는가?타입 안전성: zod는 TypeScript와 자연스럽게 통합되어 스키마에서 정의한 데이터 구조에 대해 TypeScript 타입을 자동으로 추론합니다.런타임 검증: TypeScript는 컴파일 타임에서만 타입을 검사합니다. zod는 런타임에서도 데이터가 올바른지 확인할 수 있어, API 응답이나 폼 입력 데이터를 검증할 때 유용합니다.간편한 사용법: zod..