NextAuth 인증 시스템과 웹 보안
NextAuth 5 기반 인증 흐름과 CSRF, CORS, SameSite, JWT 등 웹 보안 메커니즘을 정리한다
81개의 노트
NextAuth 5 기반 인증 흐름과 CSRF, CORS, SameSite, JWT 등 웹 보안 메커니즘을 정리한다
매크로 태스크와 마이크로 태스크의 실행 순서를 이해하고 비동기 코드의 동작을 예측하는 방법
요즘 관심사인 디자인시스템 개발 및 유지보수 중에서 픽셀에 대한 내용을 정리하는 글입니다. CSS에서는 다양한 길이 단위를 사용하여 요소의 크기, 여백, 글꼴 크기 등을 조절합니다. 그중에서도 가장 많이 사용되는 단위인 px, em, rem에 대해 자세히 살펴보겠습니
모든 셀의 너비를 같게 고정하는 방법예제화면코드결과
이 문서는 React 기반 SSR/CSR 렌더링에서 자주 등장하는 개념들인 hydration, layout shift, skeleton UI, chunk, @loadable/component, 그리고 Emotion에 대해 자세히 설명합니다. Hydration 시 La
한글 입력 시 React의 keydown 이벤트가 두 번 호출되는 문제는 주로 한글의 자음과 모음이 합성되는 과정에서 발생합니다. 이 현상은 입력 방식 편집기(IMD)의 특성으로 인해 발생하며, 이를 해결하기 위한 여러 방법이 있습니다.한글 입력 시, 사용자가 자음과
동일한 5개 API 호출에서 await는 5초, Promise.all은 1초가 걸렸습니다. 왜 이런 차이가 생기는지 Promise.all과 Promise.allSettled를 직접 구현해보며 비동기 병렬처리 원리를 파악했습니다.
JavaScript에서는 Number 객체의 toString() 메서드를 이용하면 손쉽게 숫자를 다양한 진법으로 변환할 수 있습니다. 이번 글에서는 10진수를 이진법(2진수)로 변환하고 다시 10진수로 되돌리는 방법을 알아보겠습니다.toString(radix) 메서드를
새로운 개발팀에 합류하고, CI/CD tool인 jenkins build가 git에 trigger되지 않아 불편했던 경험을 개선 후 그 과정을 기록으로 남깁니다. 개요 github의 push event 발생시 webhook을 통해 jenkins가 이것을 감지하고 b
프로젝트 번들 크기가 3MB를 넘어가면서 lodash를 대체하거나 최적화해야 했던 경험을 공유합니다. 실제 측정한 성능 차이와 대안 라이브러리들을 비교해봤습니다.
Nuxt3 \$fetch, useAsyncData, useFetch 차이 정리용도: 클라이언트 사이드 HTTP 요청 처리특징: ofetch 기반, Node.js 및 브라우저 환경 자동 감지주의사항: SSR 시 사용 시 중복 호출 위험, 초기 데이터 패칭에 부적합사용
자식 컴포넌트 각각의 상태와 한 버튼에대한 실행 함수가 다를때, 자식에서 버튼에 대한 실행 함수를 정의하여 실행되는 로직을 다르게 가지고갈 수 있다.부모 컴포넌트에 useRef를 정의한다. 자식 컴포넌트에서 실행할 함수 타입을 정의한다. 그리고 자식 컴포넌트에 ref
React를 사용하다 보면 컴포넌트가 언마운트(unmount) 될 때 특정 상태의 최신 값을 API로 전송해야 하는 상황이 종종 있습니다. 예를 들어, 입력 중인 내용을 저장하거나 페이지 이탈 직전에 데이터를 백엔드에 전송하는 경우입니다.하지만 단순히 useEffect
클라이언트에게 서버로부터 실시간 업데이트를 허용하는 웹 기술.text/event-stream 타입으로 서버에서 클라이언트에 단방향 통신을 할 수 있습니다. 클라이언트에서 매번 요청없이 한번의 연결을 통해 서버와 통신해야하는 경우WebSocket 방식보다 라이트한 방식을
회사 프로젝트의 TypeScript 빌드가 너무 느려서 SWC를 도입해봤습니다. tsc와 함께 사용하는 방법과 실제 성능 개선 결과를 공유합니다.
tabindex는 HTML 요소의 키보드 포커스 순서를 지정하는 속성입니다. 웹 접근성을 향상시키는 데 중요한 역할을 합니다.기본적으로 대부분의 form 요소(<input>, <button>, <a href> 등)는 자동으로 포커스를 받을 수 있음그 외
개발 서버가 느려서 커피 한 잔 마실 시간이 생긴다면? Turbopack과 Vite, 두 차세대 번들러의 진짜 성능을 비교해보고 Yarn Berry와의 호환성까지 실제 테스트 결과로 알아봅시다.
상대 경로로 인한 import 지옥에서 벗어나기 위해 Vite와 TypeScript에서 절대 경로 설정을 해봤습니다. 실제 적용 과정과 주의사항을 공유합니다.
디자인 시스템에서는 UI 구성 요소의 간격, 여백, 폰트 크기 등을 짝수 단위, 특히 8의 배수(예: 8px, 16px, 24px)로 설정하는 것이 일반적입니다. 이는 단순한 규칙이 아니라 해상도 대응, 일관성, 효율성, 시각적 안정성 등 다양한 관점에서 실질적인 이점
"어떤 상태 관리 라이브러리가 더 좋을까?"React에서 상태 관리는 필수적입니다. 오늘은 대표적인 상태 관리 라이브러리인 Jotai와 Zustand를 비교하며 각각의 장단점을 살펴보겠습니다.Jotai는 atomic 패턴을 기반으로 상태를 독립적인 단위(atom)로 관
개발을 하다 보면"이 모듈 응집도가 낮은데?","결합도 좀 줄이자","이건 의존성이 너무 강한데?"와 같은 말을 자주 듣게 됩니다. 이번 글에서는 이러한 개념들을 정리해보는 시간을 가져보려 합니다.이 세 가지 개념을 제대로 이해하면, 더 좋은 구조의 코드를 설계할 수
브라우저의 프린트 기능을 사용시 배경 그래픽이 빠지는 경우가 발생합니다. 이런경우 프린트의 옵션에 “배경 그래픽” 체크를 체크하여 진행하면 배경색이 채워진채 프린트됩니다. 하지만 매번 사용자에게 옵션 체크를 확인 시키고 요구하는 행위는 비효율적이므로 이것을 개발단에서
Promise는 JavaScript의 비동기 처리를 위한 핵심 개념입니다. 특히 여러 개의 비동기 작업을 동시에 처리할 때 Promise.all과 Promise.allSettled를 자주 사용하게 되는데, 이들이 내부적으로 어떻게 동작하는지 직접 구현해보면서 이해해보겠
React를 사용하다 보면 컴포넌트가 언마운트(unmount) 될 때 특정 상태의 최신 값을 API로 전송해야 하는 상황이 종종 있습니다. 예를 들어, 입력 중인 내용을 저장하거나 페이지 이탈 직전에 데이터를 백엔드에 전송하는 경우입니다.하지만 단순히 useEffect
새로운 개발팀에 합류하고, CI/CD tool인 jenkins build가 git에 trigger되지 않아 불편했던 경험을 개선 후 그 과정을 기록으로 남깁니다.
Nuxt3 \$fetch, useAsyncData, useFetch 차이 정리용도: 클라이언트 사이드 HTTP 요청 처리특징: ofetch 기반, Node.js 및 브라우저 환경 자동 감지주의사항: SSR 시 사용 시 중복 호출 위험, 초기 데이터 패칭에 부적합사용
tabindex는 HTML 요소의 키보드 포커스 순서를 지정하는 속성입니다. 웹 접근성을 향상시키는 데 중요한 역할을 합니다.
브라우저의 프린트 기능을 사용시 배경 그래픽이 빠지는 경우가 발생합니다. 이런경우 프린트의 옵션에 “배경 그래픽” 체크를 체크하여 진행하면 배경색이 채워진채 프린트됩니다. 하지만 매번 사용자에게 옵션 체크를 확인 시키고 요구하는 행위는 비효율적이므로 이것을 개발단에서
모든 셀의 너비를 같게 고정하는 방법예제화면코드결과
Turbopack은 Vercel에서 개발한 초고속 웹 번들러입니다. Rust 언어로 제작되어 Webpack 대비 최대 10배 이상 빠른 빌드 속도를 제공합니다. Turbopack은 Next.js를 기반으로 최적화되어 있으며, Cold Start, Hot Module R
이 문서는 React 기반 SSR/CSR 렌더링에서 자주 등장하는 개념들인 hydration, layout shift, skeleton UI, chunk, @loadable/component, 그리고 Emotion에 대해 자세히 설명합니다.
요즘 관심사인 디자인시스템 개발 및 유지보수 중에서 픽셀에 대한 내용을 정리하는 글입니다. CSS에서는 다양한 길이 단위를 사용하여 요소의 크기, 여백, 글꼴 크기 등을 조절합니다.
외부 라이브러리 사용이 많은 lodash. 바로 쓰기 편하고 평가가 높은 라이브러리이지만, 모든 프로젝트에서 무조건 사용하는 것이 좋은 선택일지는 고민이 따릅니다.이 글에서는 lodash의 성능 문제 여부와, 대안으로 고려할 만한 가벼운 유틸리티 라이브러리들을 소개해
디자인 시스템에서는 UI 구성 요소의 간격, 여백, 폰트 크기 등을 짝수 단위, 특히 8의 배수(예: 8px, 16px, 24px)로 설정하는 것이 일반적입니다. 이는 단순한 규칙이 아니라 해상도 대응, 일관성, 효율성, 시각적 안정성 등 다양한 관점에서 실질적인 이점
개발을 하다 보면"이 모듈 응집도가 낮은데?","결합도 좀 줄이자","이건 의존성이 너무 강한데?"와 같은 말을 자주 듣게 됩니다. 이번 글에서는 이러한 개념들을 정리해보는 시간을 가져보려 합니다.이 세 가지 개념을 제대로 이해하면, 더 좋은 구조의 코드를 설계할 수
"어떤 상태 관리 라이브러리가 더 좋을까?"React에서 상태 관리는 필수적입니다. 오늘은 대표적인 상태 관리 라이브러리인 Jotai와 Zustand를 비교하며 각각의 장단점을 살펴보겠습니다.Jotai는 atomic 패턴을 기반으로 상태를 독립적인 단위(atom)로 관
JavaScript에서는 Number 객체의 toString() 메서드를 이용하면 손쉽게 숫자를 다양한 진법으로 변환할 수 있습니다. 이번 글에서는 10진수를 이진법(2진수)로 변환하고 다시 10진수로 되돌리는 방법을 알아보겠습니다.toString(radix) 메서드를
SWC(Speedy Web Compiler) 는 매우 빠른 웹 컴파일러 입니다. Rust 언어로 개발되어 높은 성능을 제공합니다.JS, TS 코드를 트랜스파일하고 컴파일합니다.기존 Babel과 TSC 보다 성능이 좋으며 대체 가능합니다.컴파일과 번들링 모두를 처리할 수
자식 컴포넌트 각각의 상태와 한 버튼에대한 실행 함수가 다를때, 자식에서 버튼에 대한 실행 함수를 정의하여 실행되는 로직을 다르게 가지고갈 수 있다.부모 컴포넌트에 useRef를 정의한다. 자식 컴포넌트에서 실행할 함수 타입을 정의한다. 그리고 자식 컴포넌트에 ref
프로젝트 vite와 typescript를 사용하는 작업 공간에서 alias를 통해 절대경로를 설정하는 방법에대해서 설명한다.
한글 입력 시 React의 keydown 이벤트가 두 번 호출되는 문제는 주로 한글의 자음과 모음이 합성되는 과정에서 발생합니다. 이 현상은 입력 방식 편집기(IME)의 특성으로 인해 발생하며, 이를 해결하기 위한 여러 방법이 있습니다.한글 입력 시, 사용자가 자음과
hygen을 이용하여 미리 작성해둔 템플릿코드를 생성해주는 툴을 개발하고, 쉽게 사용하기 위해서 CLI 기반의 프롬프트 개발을 진행하는 내용을 정리하였습니다. Node package인 Hygen은 CLI를 이용하여 미리 만들어둔 템플릿을 원하는 위치에 원하는 형식으로
클라이언트에게 서버로부터 실시간 업데이트를 허용하는 웹 기술.text/event-stream 타입으로 서버에서 클라이언트에 단방향 통신을 할 수 있습니다. 클라이언트에서 매번 요청없이 한번의 연결을 통해 서버와 통신해야하는 경우WebSocket 방식보다 라이트한 방식을
React, Vue, Angular 세 프레임워크를 실제 사용 경험 기반으로 비교 분석한다.
정적 웹 페이지와 동적 웹 페이지의 차이점과 동작 방식을 설명한다.
git checkout을 이용하여 특정 커밋에서 개별 파일을 복구하는 방법을 설명한다.
git reflog를 이용하여 force push로 날아간 커밋을 복구하는 방법을 설명한다.
npm scoped package(@)의 개념과 React 프로젝트에서의 역할을 설명한다.
JavaScript에서 function 키워드 대신 화살표 함수를 사용해야 하는 이유를 설명한다.
프로덕션에서 발생한 this 바인딩 에러를 시작으로 코어 자바스크립트 개념들을 실무에 적용하며 해결한 구체적 사례들을 정리했습니다. 버그 발생률 85% 감소 효과를 확인했습니다.
고차함수의 정의와 JavaScript에서의 활용 방법을 설명한다.
JavaScript가 클래스 대신 프로토타입 기반 상속을 채택한 이유를 분석한다.
JavaScript Map 자료구조의 특성과 Object와의 차이점을 정리한다.
옵저버 패턴의 개념과 구현 방법을 디자인 패턴 관점에서 정리한다.
중간에서 흐름을 제어하는 프록시 패턴의 개념과 활용법을 정리한다.
여러 프로젝트를 오가다 작성자 설정을 실수해서 회사 이메일로 개인 프로젝트에 커밋했던 경험과 해결 과정을 정리했습니다.
순수 JavaScript로 가상 DOM을 직접 구현하는 과정을 설명한다.
Vue.js의 데이터 반응성 시스템의 동작 원리를 설명한다.
JavaScript 클로저의 개념과 실행 컨텍스트 기반 동작 원리를 설명한다.
웹 브라우저의 렌더링 과정과 내부 동작 원리를 단계별로 설명한다.
서버에서 엑셀 파일을 읽어 데이터를 처리하는 방법을 정리한다.
브라우저 이벤트의 전파 과정과 핸들링 방법을 정리한다.
싱글 스레드 기반 JavaScript의 동작 원리와 비동기 처리 방식을 설명한다.
프론트엔드에서 Modal 컴포넌트를 직접 구현하는 방법을 설명한다.
ESLint와 Prettier의 실무 설정 방법과 레거시 설정 개선 과정을 정리한다.
클라이언트 에러 로그 트래킹을 위한 Sentry 도입 과정을 정리한다.
프론트엔드 상태 관리의 개념과 다양한 관리 방식을 비교 정리한다.
텔레그램 Bot API를 이용하여 봇을 만드는 방법을 설명한다.
Git에서 파일명 대소문자 변경이 추적되지 않는 문제와 해결 방법을 정리한다.
사용자 인증 서비스 개발 과정에서 브라우저 저장소별 특성을 직접 테스트하고 적용한 경험을 바탕으로, 상황에 맞는 저장소 선택 기준을 정리했습니다.
JavaScript에서 캐싱을 적용하여 API 호출 성능을 개선하는 방법을 설명한다.
DOM의 개념과 HTML 문서를 프로그래밍적으로 조작하는 방법을 설명한다.
함수형 프로그래밍의 핵심 개념과 JavaScript에서의 적용 방법을 정리한다.
이벤트 위임, 버블링, 캡처링 등 이벤트 핸들링 개념을 정리한다.
Vue.js 프레임워크를 깔끔하게 사용하기 위한 코드 스타일 가이드를 정리한다.
프로그래밍 언어의 종류와 각 언어의 특성을 비교하여 정리한다.
JavaScript가 인터프리터 언어인 이유와 동작 방식을 설명한다.
Vue.js에서 대용량 데이터를 효율적으로 처리하는 성능 최적화 방법을 정리한다.
모듈 번들러와 트랜스파일러 등 현대 JavaScript 생태계의 발전 과정을 설명한다.
POST-Redirect-GET 패턴의 개념과 중복 요청 방지 원리를 설명한다.
Docker 컨테이너를 이용하여 로컬 환경에서 DB를 빠르게 셋팅하는 방법을 정리한다.