Next.js 14에서 JWT를 안전하게 관리하는 방법: Express 백엔드와의 통합

Next.js 14에서 JWT를 안전하게 관리하는 방법: Express 백엔드와의 통합

Next.js 14에서 JWT를 안전하게 관리하는 방법: Express 백엔드와의 통합Next.js 14 프로젝트에서 JWT를 어떻게 관리하는 것이 가장 좋은 방법일지 고민이 많으실 텐데요. 특히 App Router를 사용하면서, 서버 컴포넌트는 Local Storage에 접근할 수 없기 때문에 JWT를 안전하게 다루는 방법에 대해 혼란스러울 수 있습니다. 오늘은 이 문제를 해결하기 위한 다양한 방법을 살펴보고, Express 백엔드와 어떻게 통합할 수 있는지 알아보겠습니다.1. HTTPOnly 쿠키를 사용하자가장 많이 추천되는 방법은 HTTPOnly 쿠키를 사용하는 것입니다. HTTPOnly 쿠키는 클라이언트에서 JavaScript로 접근할 수 없기 때문에, 보안적으로 안전한 선택입니다. 특히 JWT와..

  • format_list_bulleted Javascript
  • · 2024. 9. 19.
  • textsms
Next.js에서 Vite로 전환: 왜 많은 개발자들이 Next.js를 떠나고 있을까?

Next.js에서 Vite로 전환: 왜 많은 개발자들이 Next.js를 떠나고 있을까?

Next.js에서 Vite로 전환: 왜 많은 개발자들이 Next.js를 떠나고 있을까?최근 들어 많은 개발자들이 Next.js에서 Vite로 전환하고 있다는 소식을 자주 접하게 됩니다. 특히, Next.js의 앱 라우터(App Router)와 서버 컴포넌트(React Server Components, RSC) 도입 이후 기대와 달리 여러 가지 문제들이 드러나면서, 일부 개발자들은 더 나은 성능과 사용성을 제공하는 Vite로 돌아서고 있죠. 이번 글에서는 Vite로의 전환 이유와 Next.js가 직면한 문제들을 깊이 있게 살펴보겠습니다.1. 개발 서버의 성능 문제가장 많이 제기된 문제는 Next.js의 개발 서버 속도입니다. 많은 개발자들이 Next.js의 Turbopack을 사용함에도 불구하고, 개발 서..

  • format_list_bulleted Javascript
  • · 2024. 9. 19.
  • textsms
Prisma vs Drizzle: 어떤 ORM이 더 나을까? 성능과 개발자 경험 비교

Prisma vs Drizzle: 어떤 ORM이 더 나을까? 성능과 개발자 경험 비교

Prisma vs Drizzle: 어떤 ORM이 더 나을까? 성능과 개발자 경험 비교 어떤 ORM을 사용해야 할까? Prisma와 Drizzle을 비교해 보자ORM(Object-Relational Mapping)은 데이터베이스와 상호작용할 때 SQL을 직접 작성하지 않고, 객체지향적인 방식으로 데이터를 처리할 수 있게 해주는 도구입니다. 현재 시장에는 여러 ORM들이 있지만, 그 중에서도 Prisma와 Drizzle이 많은 주목을 받고 있습니다. 두 ORM 모두 독특한 장점을 가지고 있는데, 어떤 ORM을 선택해야 할지 고민하고 있다면 이 글이 도움이 될 것입니다. Prisma: 개발자 경험(DX)에 중점을 둔 ORMPrisma는 TypeScript 기반의 ORM으로, 개발자 경험을 극대화한 것이 특징입..

  • format_list_bulleted Javascript
  • · 2024. 9. 14.
  • textsms
fetch vs axios: 쉽게 알아보는 4가지 핵심 차이점!

fetch vs axios: 쉽게 알아보는 4가지 핵심 차이점!

fetch vs axios: 쉽게 알아보는 4가지 핵심 차이점! fetch와 axios는 모두 외부 리소스를 가져오는 라이브러리인데요, 비동기적으로 동작하면서 Promise 객체를 반환합니다. 이 두 라이브러리는 비슷해 보이지만, 몇 가지 차이점이 있습니다. 주로 4가지 차이점이 있는데, 지금부터 하나씩 알아보겠습니다. 설치 방법HTTP 메서드 통신JSON 데이터 가져오기 방법에러 처리 1. 설치 방법 fetch는 브라우저에 기본적으로 내장된 라이브러리라서 따로 설치하지 않아도 됩니다. 반면, axios는 설치가 필요합니다. 아래 명령어로 설치할 수 있습니다.yarn add axios npm install axios 그리고 모듈을 import하는 과정도 필요합니다.import axios from "ax..

  • format_list_bulleted Javascript
  • · 2024. 9. 14.
  • textsms
Next.js에서 세션에 따라 클라이언트 컴포넌트를 조건부로 렌더링하는 방법

Next.js에서 세션에 따라 클라이언트 컴포넌트를 조건부로 렌더링하는 방법

Next.js에서 세션에 따라 클라이언트 컴포넌트를 조건부로 렌더링하는 방법안녕하세요! 오늘은 Next.js 애플리케이션에서 클라이언트 컴포넌트를 세션에 따라 조건부로 렌더링하는 방법에 대해 알아볼까요? 특히 서버 렌더링의 SEO 이점을 잃지 않으면서 세션 기반 렌더링을 구현하는 방법을 살펴보도록 하죠.문제의 배경현재 여러분의 Next.js 애플리케이션은 app 디렉토리 내에서 대부분의 컴포넌트가 서버 렌더링되고, 일부 리프 컴포넌트만 클라이언트 렌더링된다는 점이 중요한데요. 여기서 "리프 컴포넌트"는 쉽게 말해 "가장 끝에 있는 컴포넌트"를 뜻하는데요. 즉, 다른 컴포넌트 안에 포함되어 있는 하위 컴포넌트 중에서 더 이상 다른 컴포넌트를 포함하지 않는 컴포넌트입니다. 예를 들어, 어떤 웹 페이지가 여러..

  • format_list_bulleted Javascript
  • · 2024. 9. 7.
  • textsms
Next.js로 블로그 구축하기: 과연 최선의 선택일까?

Next.js로 블로그 구축하기: 과연 최선의 선택일까?

안녕하세요! 오늘은 Next.js를 사용해 블로그를 구축할 때 고려해야 할 중요한 사항들에 대해 이야기해보려고 합니다. Next.js는 최근 여러 웹 개발자들 사이에서 각광받고 있는 React 기반의 프레임워크로, 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 지원하는 등 다양한 기능을 제공합니다. 하지만 이 프레임워크가 블로그 구축에 있어서도 최선의 선택일까요? 이번 글에서는 Next.js와 다른 도구들을 비교하고, 실제로 블로그를 구축할 때 어떤 점을 고려해야 하는지 살펴보겠습니다. Next.js와 WordPress: 성능과 확장성 비교Next.js와 WordPress는 블로그 구축에 널리 사용되는 두 가지 도구인데요, 각각의 장단점이 뚜렷합니다. WordPress는 오랜 시간 동안 많은..

  • format_list_bulleted Javascript
  • · 2024. 9. 2.
  • textsms