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