드리프트의 뉴 코딩 이야기

최근 웹 개발자들 사이에서 Firebase Authentication을 Next.js와 함께 사용하는 것이 큰 주목을 받고 있습니다. 특히 서버 사이드 렌더링(SSR) 환경에서의 구현은 많은 개발자에게 도전 과제가 되고 있으며, 실질적인 노하우를 공유하는 것이 중요합니다. 이 글에서는 Firebase Auth를 Next.js와 통합하여 SSR을 구현하는 방법을 단계별로 설명하겠습니다.  SSR 환경에서 Firebase Auth의 도전 과제 Firebase Auth는 기본적으로 클라이언트 사이드에서 작동하도록 설계되었습니다. 이로 인해 SSR 환경에서 Firebase Auth를 사용하려는 개발자들은 몇 가지 문제에 직면하게 됩니다. 특히, 클라이언트 SDK의 훅을 사용하려고 할 때, 서버와 클라이언트 환경..

최근 국내 테크 커뮤니티에 한 학생이 Next.js 학습 후 풀스택 개발자로 성장하기 위해 필요한 기술에 대한 질문을 올려 화제가 되었습니다. 그는 이미 Next.js, Tailwind CSS, TypeScript를 능숙하게 사용하고 있었지만, 실제 프로젝트 경험이 부족했기에 취업 및 경쟁력 강화를 위해 어떤 기술을 더 배워야 할지 고민하고 있었습니다. "실제 프로젝트 경험은 없지만, 앞으로 나아가기 위해 어떤 기술을 익혀야 할까요?" 라는 그의 질문에 현업 개발자들은 풀스택 개발 역량 강화, 프로젝트 관리 능력 향상, 그리고 웹 개발 기초 지식에 대한 깊이 있는 이해의 중요성을 강조하며 다양한 조언을 남겼습니다. 현업 개발자들의 조언풀스택 개발 역량: Next.js API Routes와 Server A..

React는 현대 웹 개발에서 가장 인기 있는 JavaScript 라이브러리 중 하나로, 사용자 인터페이스를 구축하는 데 있어 강력하고 유연한 도구입니다. 하지만 컴포넌트의 복잡성이 증가함에 따라 성능 문제가 발생할 수 있는데, 특히 불필요한 렌더링은 애플리케이션의 속도를 저하시키는 주요 원인 중 하나입니다. 이러한 문제를 해결하기 위해 React는 컴파일러를 통해 혁신적인 성능 최적화 기능을 제공합니다. 본 글에서는 React 컴파일러의 기능과 장점을 실제 코드 예제를 통해 자세히 살펴보고, 기존의 useMemo와 같은 수동 최적화 방식과 비교하여 어떻게 더 효율적인 메모이제이션을 제공하는지 알아보겠습니다. 1. 기존 React 컴포넌트의 렌더링 문제점 React 컴포넌트는 상태(State) 또는 속성..

다음은 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배열로 루프 돌리기 🎠배열 조작하기 🛠️요소 하나만 쏙! 뽑아내기요소 여러 개 뽑아내기요소 찾기 🔍요소 값으로 꽉꽉 채우기배열 붙이기 🔗배열 정렬하기 🧹오름차순 (작은 순서대로)내림차순 (큰 순서대로)유연하게 가공하기 🎨중첩 배열 펴기배열을 하나의 값으로 뭉치기!중복 제거하기 🚫마무리 🎉한 여름입니다! 🏖️..

안녕하세요?Go 1.22가 출시된 지 꽤 많은 시간이 지났는데요. 이제 제가 1.22 버전을 정리하는 시리즈의 마지막을 장식할 때가 왔습니다. 이전에 작성한 reflect.TypeFor와 slices.Concat 함수에 대한 글을 먼저 읽으시는게 좋을 듯 합니다. 오늘 소개할 마지막 함수는 바로 cmp.Or입니다. 실제로 이 함수의 개발자는 Go Time 팟캐스트에서 이 함수를 "1.22의 숨겨진 보석"이라고 소개한 바 있습니다. 간단한 기능이지만 다양한 활용 가능성을 가지고 있으며, 그 탄생 배경에는 놀랍도록 긴 이야기가 숨겨져 있습니다. cmp.Or: 제네릭 기반 조건부 값 선택의 새로운 접근 방식 cmp.Or 함수는 가변 개수의 인자를 받아, 첫 번째 non-zero 값을 반환하는 제네릭 함수입니다..

지난 블로그에서는 Go 1.22에 추가된 reflect.TypeFor 함수에 대해 소개해드렸습니다. 이번에는 slices.Concat 함수에 대해 심층적으로 분석해 보겠습니다. slices.Concat: 제네릭 슬라이스 연결의 새로운 패러다임 slices.Concat 함수는 가변 개수의 슬라이스를 입력으로 받아 하나의 새로운 슬라이스로 연결하여 반환하는 제네릭 함수입니다. 이 함수의 시그니처는 다음과 같습니다.// Concat returns a new slice concatenating the passed in slices.func Concat[S ~[]E, E any](slices ...S) S slices.Concat 함수는 제네릭 슬라이스 라이브러리에 필수적인 기능이며, 실제로 저는 2021년 5월..

안녕하세요! Go 1.22가 발표되면서, reflect.TypeFor 함수가 드디어 세상에 공개되었습니다. 오늘은 이 함수의 배경과 기능, 그리고 그 의미에 대해 좀 더 깊이 있게 살펴보도록 하겠습니다. reflect.TypeFor: 제네릭 기반 타입 리플렉션의 새로운 지평 Go 1.18 이후 제네릭이 도입되면서 Go 언어는 타입 안전성과 코드 재사용성 측면에서 큰 진전을 이루었습니다. 이러한 발전의 연장선상에서, reflect.TypeFor 함수는 제네릭을 활용하여 런타임에 타입 정보를 획득하는 새로운 패러다임을 제시합니다. 기존의 reflect.TypeOf 함수는 인터페이스를 통해 전달된 값의 concrete 타입을 반환했습니다. 하지만 인터페이스 자체의 타입 정보는 런타임에 유실되는 문제가 있었죠...

Go 프로그래밍 언어는 간결하고 효율적인 코딩을 지향하지만, 이터레이터와 관련된 부분에서는 다소 불편함이 있었습니다. 새로운 Go 1.23 버전에서는 이러한 문제를 해결하기 위해 reflect.Value.Seq와 reflect.Value.Seq2라는 기능이 추가되었습니다. 이 기능들은 다양한 타입을 이터레이터로 변환하여 훨씬 더 쉽게 반복 작업을 수행할 수 있게 해줍니다. 이 글에서는 이 새로운 기능들이 어떤 문제를 해결하고 어떻게 사용되는지에 대해 자세히 살펴보겠습니다. 기존 채널 기반 이터레이터의 문제점Go에서 이터레이터 패턴을 구현할 때 주로 채널을 사용했습니다. 하지만 이 방법에는 몇 가지 문제점이 있었습니다:제네릭이 없어서 타입별로 유틸리티를 작성해야 함: Go 1.18부터 제네릭이 도입되어 이..

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