드리프트의 뉴 코딩 이야기

다음은 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..

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

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

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

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

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..

TypeScript 타입 추론의 새로운 지평: infer의 매력infer를 이해하기 위한 여정: Conditional Type부터 시작infer의 등장: 타입 추론의 진화infer의 등장: 타입 추론의 새로운 지평을 열다infer를 활용한 다양한 패턴infer와 함께 발전하는 TypeScript 생태계마무리TypeScript에서 infer는 마치 마법 주문처럼 타입 추론의 범위를 넓혀줍니다. 덕분에 더욱 정확하고 유연한 타입을 정의할 수 있게 되었죠. 하지만 infer는 늘 있었던 것은 아닙니다. 최근에 더욱 주목받는 이유는 무엇일까요?infer를 이해하기 위한 여정: Conditional Type부터 시작infer를 처음 접했을 때, 저는 갑작스러운 등장에 당황했고, 제대로 활용하는 방법을 몰라 이해하..

예제로 알아보는 TypeScript 유틸리티 타입유틸리티 타입이 뭐지?TypeScript가 제공하는 타입: 만드는 것RecordTypeScript가 제공하는 타입: 주로 프로퍼티를 가공하는 데 사용하는 것Pick / OmitExtract / ExcludePartial / RequiredNonNullableTypeScript가 제공하는 타입: 함수 관련ReturnTypeParametersAwaited직접 만들기마무리 유틸리티 타입이 뭐지? 유틸리티 타입은 TypeScript 내장 타입으로, 기존 타입에서 새로운 타입을 생성하는 데 사용됩니다. 라이브러리를 만들 때 자주 사용하지만, 유틸리티 타입이 뭔지 모르는 분들도 Partial나 Record 같은 건 본 적이 있을 거예요. 어떤 종류가 있는지는 문서를 ..

Deno v2를 향하여 - Deno v2, deno_std v1, Fresh v2에 대하여Deno v2에 대하여Node.js 호환성 개선Node.js 호환성에 힘을 쏟는 배경Node.js 호환성의 현 상황Deno v2를 위한 Node.js 호환성 대응BYONM의 기본 활성화deno install 명령어의 동작 변경npm 및 Yarn 등과의 상호 운용성 개선Node.js 호환성에 관한 요약JSRDeno에서 JSR 패키지 사용 방법jsr: URLdeno add 명령어패키지 공개 (deno publish)Fast CheckJSR 도입 배경워크스페이스 기능 도입비추천 API의 삭제비추천 API의 안정화DENO_FUTURE 환경 변수 도입deno_std v1deno_std v1은 언제 나오나요?v1이 쉽게 릴리스..

PPR은 island 아키텍처인가?PPRisland 아키텍처PPR과 island 아키텍처의 차이클라이언트 컴포넌트와 island의 비교Astro의 렌더링 모델2층 아키텍처의 나선기술 선택의 나선요약 최근 Next.js의 새로운 렌더링 모델인 Partial Pre-Rendering(이하 PPR)이 장안의 화제인데요. 결론부터 말씀드리면, PPR과 island 아키텍처는 전혀 다른 개념입니다. 이 글에서는 PPR과 island 아키텍처의 차이점에 대해 설명하겠습니다. PPR 먼저 PPR과 island 아키텍처의 개요를 다시 정리해보겠습니다. PPR은 페이지를 static rendering으로 하면서도, 부분적으로 dynamic rendering을 가능하게 하는 렌더링 모델입니다. 구체적으로는, 화면을 빌드 ..