NextAuth와 Next.js: 미들웨어에서 세션 처리하는 다양한 방법

다음은 Next.js와 NextAuth를 사용하여 미들웨어에서 세션을 확인하는 방법에 대한 보다 구체적인 대안과 이에 대한 실제 코드입니다. 이 글에서는 여러 접근 방안을 제시하고, 각 방법에 대한 간단한 코드 예제를 포함하였습니다. 1. 미들웨어에서 세션을 직접 가져오기먼저, 일반적인 방법으로 세션을 직접 가져오는 코드입니다. 하지만 이 방법은 성능상 이슈가 있을 수 있습니다.// middleware.tsimport type { NextRequest } from "next/server";import { getSession } from "next-auth/react";export async function middleware(req: NextRequest) { const session = await g..

• format_list_bulleted Javascript
• · 2024. 8. 4.
• textsms

한방에 자바스크립트 배열 마스터하기(뽀개기)!

한방에 자바스크립트 배열 마스터하기(뽀개기)! 😎배열 만들기 101배열로 루프 돌리기 🎠배열 조작하기 🛠️요소 하나만 쏙! 뽑아내기요소 여러 개 뽑아내기요소 찾기 🔍요소 값으로 꽉꽉 채우기배열 붙이기 🔗배열 정렬하기 🧹오름차순 (작은 순서대로)내림차순 (큰 순서대로)유연하게 가공하기 🎨중첩 배열 펴기배열을 하나의 값으로 뭉치기!중복 제거하기 🚫마무리 🎉배열 만들기 101배열로 루프 돌리기 🎠배열 조작하기 🛠️요소 하나만 쏙! 뽑아내기요소 여러 개 뽑아내기요소 찾기 🔍요소 값으로 꽉꽉 채우기배열 붙이기 🔗배열 정렬하기 🧹오름차순 (작은 순서대로)내림차순 (큰 순서대로)유연하게 가공하기 🎨중첩 배열 펴기배열을 하나의 값으로 뭉치기!중복 제거하기 🚫마무리 🎉한 여름입니다! 🏖️..

• format_list_bulleted Javascript
• · 2024. 8. 3.
• textsms

OAuth 배우기 전에 배우는 웹 인증의 세계 - Basic, Digest, 세션, 토큰 인증 비교

안녕하세요! 오늘은 웹 애플리케이션 개발에 있어 가장 중요한 인증·인가의 기초와 OAuth를 배우기전에 웹 인증의 종류에 대해 비교해서 알아보겠습니다.인증·인가의 기초인증과 인가의 차이인증이란 "사용자가 누구인지"를 확인하는 프로세스이며, 영어로 Authentication이라고 표기합니다.반면에, 인가란 "사용자가 특정 권한을 가지고 있는지"를 확인하는 프로세스이며, 영어로 Authorization이라고 표기합니다. 예를 들어,은행 계좌를 개설할 때는 운전면허증 등을 제출해서 본인임을 확인하는데, 이는 운전면허증을 사용해 계좌를 개설하는 사람이 "누구인지"를 확인하는 것이므로 인증(Authentication)에 해당합니다.반면에 기차에 탑승할 때는 개찰구에 표를 통과시키죠. 이는 표를 사용해 기차에 탑승..

• format_list_bulleted Javascript
• · 2024. 7. 17.
• textsms

TypeScript에서 Array<T>와 T[]의 차이점 이해하기

TypeScript 배열 탐험: Array vs T[] - 당신에게 맞는 선택은? TypeScript는 JavaScript에 강력한 타입 시스템을 더해 코드의 안정성과 예측 가능성을 높여줍니다. 특히, JavaScript의 유연한 배열 다루기를 타입 안정성을 보장하며 수행할 수 있도록 두 가지 방식, Array와 T[]를 제공합니다. 겉보기에는 비슷해 보이는 이 두 방식은 미묘한 차이를 지니고 있으며, 상황에 따라 적절한 선택이 달라질 수 있습니다. 이 글에서는 Array와 T[]의 차이점을 심층 분석하고, 실제로 어떻게 활용되는지 다양한 예제와 함께 살펴보며, 여러분의 프로젝트에 적합한 선택을 할 수 있도록 가이드를 제공합니다. 1. 기본 이해: Array와 T[] - 같은 듯 다른 두 친구Array:..

• format_list_bulleted Javascript
• · 2024. 7. 17.
• textsms

JavaScript의 async, await에 대해 깊이 이해하기

JavaScript의 async, await에 대해 깊이 이해하기서론실험 방법실험에 사용할 함수 정의실험 결과아무것도 추가하지 않은 경우then을 사용한 경우await를 사용한 경우결론async가 붙으면 Promise를 반환합니다효과가 없는 예효과가 있는 예async와 await에 효과가 있는 예결론서론async/await와 Promise 개념에 대해 완벽하게 이해하지 못했다고 느껴, 좀 더 명확히 파악하기 위해 몇 가지 실험을 진행해 보았습니다. 이 글에서는 그 실험들을 통해 얻은 인사이트를 여러분과 공유하고자 합니다.실험 방법다음의 네 가지 함수를 사용해 실험을 진행합니다.실험에 사용할 함수 정의// Promise를 반환하는 async 함수async function a() { return new..

• format_list_bulleted Javascript
• · 2024. 7. 1.
• textsms

웹 개발의 핵심 개념들 : DOM과 가상 DOM, 모듈 번들러, 트랜스파일러, 바벨, 모듈, ESM, 비동기 처리, 그리고 프로미스

DOM과 가상 DOM, 모듈 번들러, 트랜스파일러, 바벨, 모듈, ESM, 비동기 처리, 그리고 프로미스: 웹 개발의 핵심 개념들DOM(Document Object Model)이란?브라우저의 작동 원리노드란?DOM 조작이란?가상 DOM(Virtual DOM)DOM 조작과 렌더링가상 DOM의 원리모듈 번들러란?모듈 번들러의 필요성트랜스파일러컴파일러와 트랜스파일러의 차이바벨(Babel)의 정의바벨의 필요성모듈의 정의모듈 분할의 장점ESM(ECMAScript Module)의 정의ESM의 필요성ESM의 사용 방법비동기 처리비동기 처리의 필요성Promise란?Promise 사용 방법then과 catch의 사용 방법DOM(Document Object Model)이란?DOM은 문서 객체 모델(Document Obje..

• format_list_bulleted Javascript
• · 2024. 6. 18.
• textsms