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