dev-hpk 님의 블로그

클로저는 자바스크립트에서 가장 중요한 개념 중 하나로, "함수가 선언될 때의 렉시컬 환경(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 속성을 설정하면, 지정한 시..

개발에서는 프레임워크와 라이브러리라는 용어가 자주 등장합니다. 이 둘은 개발 효율성을 높이고 코드 품질을 향상시키기 위해 사용되지만, 그 개념과 활용 방식에서 명확한 차이가 있습니다.  목차 1. 프레임워크(Framework)란? 2. 라이브러리(Library)란? 3. 프레임워크와 라이브러리의 차이 - 제어의 역전(Inversion of Control) 4. 프레임워크와 라이브러리 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 프레임워크(Framework)란?프레임워크는 애플리케이션의 기본 구조를 제공하며, 개발자가 이를 기반으로 코드를 작성해 나가는 "뼈대"입니다.앱/서버 등의 구동, 메모리관리, 이벤트 루프 등 공통된 부분은 프레임워크가 관리하고, 사용자는 프레임워크가 정해준 방..

웹 개발에서 스타일링은 UI의 품질과 사용자 경험을 좌우하는 중요한 부분입니다. 이를 구현하는 방법에는 CSS-in-CSS, CSS Module, CSS-in-JS가 대표적입니다. 각각의 방식은 접근 방식과 사용 사례가 다르며, 프로젝트의 요구사항에 따라 선택지가 달라질 수 있습니다 목차 1. CSS-in-CSS 2. CSS Module 3. CSS-in-JS 4. CSS-in-CSS, CSS Module, CSS-in-JS 비교위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. CSS-in-CSS CSS-in-CSS는 가장 전통적인 스타일링 방식으로, 별도의 CSS 파일에 스타일을 작성하고 HTML 요소에 클래스를 할당하는 방식입니다.특징파일 분리: CSS는 독립적인 파일에 작성되어 HTML, J..

React 애플리케이션에서 폼 관리는 매우 빈번한 작업입니다. React State를 이용해 폼 상태를 관리하고, 유효성을 검증하며, 성능을 최적화하는 것은 번거로울 수 있습니다. React Hook Form은 이러한 작업을 간소화하고 성능을 최적화해 주는 가볍고 직관적인 폼 관리 라이브러리입니다.목차 1. React Hook Form이란? 2. React Hook Form 설치 및 기본 사용법 3. 주요 Hook과 함수 4. React Form vs React Hook Form추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. React Hook Form이란?React Hook Form은 React의 Hooks API를 기반으로 설계된 폼 관리 라이브러리입니다. HTML의 기본 폼 요소를 활..

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 컴포넌트를 렌더링 하는 방식으로, 초기..