dev-hpk 님의 블로그

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!// 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..

드디어 중급 프로젝트 시작이다!! 지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거나 누락되는 경우도 있었고, 서로의 의견을 조율하다가 오전을 모두 사용한 적도 있었습니다. 이런 경험은 당시에는 힘들었지만 팀 프로젝트에서 무엇이 중요한지를 배우는 값진 기회였습니다. 중급 프로젝트를 시작하며 설레는 마음도 크지만 긴장감도 함께 느껴집니다.이전 경험을 바탕으로 소통을 더욱 원활히 하고 일정 관리와 업무 분담을 철저히 계획해 프로젝트를 성공적으로 마무리하며 팀원들과 함께 좋은 결과를 만들어내고 싶습니다. 이번에는 더 나은 협업을 통해 성장과 성취를 모두 이루는 뜻깊은 시간을 기대해 봅니다✨✨ 기술 스택Next..

저번 포스팅에서 retryFetch라는 메서드를 만들어서 요청을 보내고, response의 status를 확인해 토큰을 재발급했다.const retryFetch = async ( url: string, options: RequestInit): Promise => { const response = await fetch(url, options); if (response.status === 401) { // status === 401 : Unauthorized 토큰 갱신 const refreshResponse = await fetch( `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/refresh-token`, { method: "..

서버에 로그인 후 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..

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 속성을 설정하면, 지정한 시..

Next.js는 정적 사이트 생성(Static Site Generation, SSG)과 서버 측 렌더링(Server-Side Rendering, SSR)을 지원하는 React 기반 프레임워크입니다. 이 글에서는 정적 생성의 개념, 장점, 사용 방법, 그리고 실무에서의 활용 사례를 중심으로 자세히 설명하겠습니다. 목차 1. 정적 생성(SSG)이란? 2. 정적 생성(SSG)의  장점 3. 정적 생성(SSG) 사용 방법 4. getStaticPaths의 fallback 옵션추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 정적 생성이란?정적 생성(SSG)은 Next.js가 빌드 시점에 페이지의 HTML 파일을 미리 생성해 저장하는 렌더링 방식이기 때문입니다. 이렇게 생성된 HTML은 CDN으로 캐..

Next.js는 사용자 경험과 개발자 생산성을 극대화하기 위해 설계된 React 프레임워크입니다. 그중에서도 Image 컴포넌트는 최적화된 이미지 관리를 위한 강력한 도구로, 성능 개선과 효율적인 이미지 처리를 제공합니다. 목차 1. Image 컴포넌트란? 2. Image 컴포넌트 사용법 3. Image 컴포넌트 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Image 컴포넌트란?next/image에서 제공하는 Image 컴포넌트는 브라우저와 디바이스에 따라 이미지를 최적화하고, 개발자가 별도의 설정 없이 성능을 향상할 수 있도록 설계된 컴포넌트입니다.  전통적인 HTML의 태그를 사용하는 것과 달리, Image 컴포넌트는 서버 사이드에서 자동으로 이미지 크기를 조정하고, 최적의 포..

React를 사용하다 보면 RSC와 RCC라는 약어를 접할 때가 있습니다. 각각은 React의 주요 기능이나 개념을 지칭하며, 이 둘을 올바르게 이해하면 React 개발에 더 큰 도움이 됩니다. 목차   1. RSC (React Server Component) 2. RSC (React Server Component)와 RCC (React Client Component) 3. RSC의 동작 원리 4. RSC의 이점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. RSC (React Server Component) RSC는 React Server Components의 약자로, React 18에서 도입된 새로운 개념입니다. 클라이언트 대신 서버에서 React 컴포넌트를 렌더링 하는 방식으로, 초기..

next.config.js는 Next.js 프로젝트의 설정 파일로, 다양한 옵션을 통해 애플리케이션의 동작을 조정할 수 있습니다. redirects 옵션을 사용하면 특정 URL 요청을 다른 URL로 리다이렉트 하도록 설정할 수 있습니다. 목차   1. Redirect란? 2. Redirect 설정 방법 3. Redirect 예시 4. Redirect 주의사항추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Redirect란?redirects는 사용자가 특정 URL에 접근했을 때, 다른 URL로 요청을 자동으로 전환하는 기능입니다. 예를 들어, 페이지 경로가  /list에서 /products라고 바뀐 경우 list로 들어오는 요청을 /products로 보낼 때 사용합니다.Next.js의 리다이..