dev-hpk 님의 블로그

오늘은 공통 컴포넌트 Chip을 개발해 보겠습니다.// Chip.tsimport { ReactNode } from 'react';type ChipType = 'tag' | 'status' | 'status-option';export interface ChipProps { children: ReactNode; chipType: ChipType;}export const bgTag = ['orange', 'green', 'pink', 'blue'];// Chip.tsximport clsx from 'clsx';import { ChipProps } from '@/type/chip';import { PropsWithChildren } from 'react';import styles from './Chip.mo..

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!// Button.tsximport styles from "./Button.module.css";import { PropsWithChildren, ReactNode } from "react";import clsx from "clsx";interface ButtonProps { children: ReactNode; classes?: string | string[]; disabled?: boolean; handler: () => void;}function Button({ children, classes, disabled, handler,}: Pr..

Next.js에서 SVGR을 사용하면 SVG 파일을 React 컴포넌트처럼 사용할 수 있습니다.   SVGR - Transforms SVG into React Components. - SVGRTransforms SVG into React Components.react-svgr.com목차 1. SVGR이란? 2. Next.js에 SVGR 설정하기 3. SVGR 사용 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다.1. SVGR이란?SVG는 벡터 기반의 이미지 파일로, 용량이 작고 크기를 바꿔도 이미지가 깨지지 않기 때문에 웹에서 자주 사용되는 이미지 포맷입니다. Next.js 기반 프로젝트에서 SVG를 사용하는 방법은 크게 2가지입니다. svg 파일의 경로를 img 파일의 src 속성에 넣어 i..

JavaScript에서는 배열, 객체, 기타 데이터 구조를 순회(iterate)하는 다양한 방법을 제공합니다. 그중 for... of와 for...in은 이름이 비슷해서 종종 혼동되지만, 작동 방식과 사용 목적이 전혀 다릅니다. 목차 1. for...of 2. for ...in 3. 주요 차이점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. for...offor...of는 이터러블 객체(배열, 문자열, Set, Map 등)의 값을 순회합니다.주로 배열이나 기타 이터러블 객체의 값에 접근할 때 사용합니다. 사용 예시const numArray = [1, 2, 3];for (const num of numArray) { console.log(num); // 1, 2, 3} 결과가 배열의 값(..

자바스크립트를 다룰 때 ==와 ===는 매우 자주 등장하는 연산자입니다. 하지만 둘의 차이를 정확히 이해하지 못하면 의도치 않은 버그가 발생할 수 있습니다. 목차 1. == (느슨한 동등 연산자 - Loose Equality) 2. === (엄격한 동등 연산자 - Strict Equality)추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. == (느슨한 동등 연산자 - Loose Equality)==는 동등 연산자로, 두 값을 비교할 때 타입 변환(type coercion)을 수행합니다. 즉, 비교하는 값의 데이터 타입이 다르더라도 자동으로 형변환을 수행한 후에 비교합니다.  특징타입이 다르더라도 비교 전 타입 변환이 일어납니다.타입 변환은 때로 예측하지 못한 결과를 초래할 수 있습니다.예..

JavaScript의 비동기 처리를 할 때, 여러 Promise를 동시에 처리해야 하는 경우가 많습니다. 이때 자주 사용하는 두 가지 메서드가 Promise.all과 Promise.allSettled입니다.목차 1. Promise.all 2. Promise.allSettled 3. Promise.all vs Promise.allSettled추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Promise.all특징 Promise.all은 주어진 모든 Promise가 성공적으로 이행(fulfilled) 되었을 때 하나의 Promise로 반환합니다.만약 하나의 Promise라도 거부(rejected) 되면, 즉시 전체가 거부됩니다.완전 성공이 요구되는 작업에서 사용됩니다.const p1 = axi..

클로저는 자바스크립트에서 가장 중요한 개념 중 하나로, "함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하고 접근할 수 있는 함수"를 말합니다. 이를 통해, 함수가 생성될 때의 변수와 그 값들에 접근하거나 유지할 수 있습니다. 목차 1. 클로저란? 2. 클로저 동작 예제 3. 클로저 활용 사례추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 클로저란?MDN에서 정의한 클로저는 아래와 같습니다.“A closure is the combination of a function and the lexical environment within which that function was declared.”클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical env..

서버에 로그인 후 response를 확인해 보니 accessToken과 refreshToken이 반환되었다 refreshToken은 뭔지 모르겠으니 일단 패스하고, accessToken으로 데이터 요청하자.const postArticleComment = async ({ id, content,}: PostCommentInterface): Promise => { try { const response = await fetch( `${process.env.NEXT_PUBLIC_SERVER_URL}/articles/${id}/comments`, { method: "POST", headers: { "Content-Type": "applicatio..

JWT 토큰을 사용할 때 Access Token만 사용하는 경우 많은 문제가 발생합니다. 이를 해결하기 위해 Refresh Token을 사용하는데요, Refresh Token은 보안과 관련된 핵심 개념 중 하나로, 특히 인증이 필요한 웹 애플리케이션에서 자주 사용됩니다. 목차 1. JWT 토큰이란? 2. Access 토큰만 사용하는 경우 문제점 3. Refresh Token이란? 4. Refresh Token 탈취 위험추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. JWT 토큰이란?JWT(JSON Web Token)는 클라이언트와 서버 간 인증 및 정보 교환을 위한 토큰 기반 인증 방식입니다. JWT는 간단하고 효율적이며, 다양한 애플리케이션에서 널리 사용됩니다.   JWT.IOJSON W..

ISR(Incremental Static Regeneration)은 정적 생성(SSG)의 장점과 실시간 업데이트를 결합한 강력한 기능이며, 이와 관련된 On-Demand ISR은 ISR을 더욱 효과적으로 사용할 수 있도록 돕습니다. 목차 1. ISR(Increamental Static Regeneration)이란? 2. On-Demand ISR이란? 3. ISR vs On-Demand ISR추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ISR(Increamental Static Regeneration)이란?ISR은 정적 페이지를 생성한 이후에도 데이터를 갱신할 수 있도록 지원하는 기능입니다. 기본적으로 getStaticProps 함수와 함께 revalidate 속성을 설정하면, 지정한 시..