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