프론트엔드와 백엔드가 분리된 환경에서 구글 OAuth 로그인을 구현하는 방법 전체 아키텍처 사용자 → NextAuth (OAuth 처리) → 백엔드 API (사용자 정보 저장 + JWT 발급) → 이후 API 요청 시 JWT 사용 구현 단계 1. NextAuth 설정 프론트엔드에서 NextAuth를 사용해 OAuth를 처리하고, 로그인 성공 시 백엔드에 사용자 정보를 전송 // pages/api/auth/[...nextauth].js import NextAuth from 'next-auth'... Continue Reading →
REST API 캐싱과 ETag 가이드
캐시 vs 쿠키 많은 개발자들이 캐시와 쿠키를 혼동하는데, 이 둘은 완전히 다른 개념이다 캐시 (Cache) 저장 위치: 브라우저, CDN, 프록시 서버 등 목적: 성능 최적화 (같은 요청을 빠르게 처리) 저장 주체: 받는 쪽(클라이언트)이 자동으로 저장 데이터 종류: HTTP 응답 전체 (HTML, JSON, 이미지 등) 쿠키 (Cookie) 저장 위치: 브라우저의 쿠키 저장소 목적: 상태 관리 (로그인,... Continue Reading →
JavaScript 화살표 함수(Lambda) vs 일반 함수: this 바인딩의 모든 것
🎯 핵심 차이점 JavaScript에서 화살표 함수와 일반 함수의 가장 큰 차이점은 this 바인딩 방식 일반 함수: 호출 시점에 this 결정 (동적 바인딩) 화살표 함수: 정의 시점에 this 결정 (렉시컬 바인딩) 📋 일반 함수의 this 바인딩 function regularFunction() { console.log(this.name) } const obj1 = { name: 'Alice', fn: regularFunction } const obj2 = { name: 'Bob',... Continue Reading →
React Hooks 정리 (React 18+ 기준)
React Hook, 처음엔 복잡해 보이지만 한번 이해하면 정말 강력함. 기존 클래스 컴포넌트 없이도 상태 관리하고 생명주기 처리할 수 있어서 코드가 훨씬 깔끔해짐. 🎯 Hook? Hook은 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수들임. use로 시작하는 게 특징이고, React가 제공하는 기본 Hook들과 개발자가 만드는 커스텀 Hook이 있음. 🔥 기본 Hook들 마스터하기 1. useState... Continue Reading →
Bun vs Electron: 실행 파일 생성의 모든 것
Bun의 컴파일 기능이란? Node.js에서 npm run start로 스크립트를 실행하는 것과 달리, Bun은 **독립적인 실행 파일(.exe)**을 생성할 수 있음 npm vs Bun의 차이점 기존 npm 방식: # package.json { "scripts": { "start": "node src/index.js" } } # 실행 시 npm run start # Node.js 런타임이 필요 Bun 컴파일 방식: # 빌드 bun build --compile src/index.ts --outfile... Continue Reading →
Next.js에서 Grid Layout과 @layer를 활용한 모던 CSS 설계
요약 grid-template-areas는 Tailwind 임의값보다 권장되는 모던 CSS 방법 @layer를 활용해 CSS 우선순위를 체계적으로 관리 Next.js App Router의 layout.js와 globals.css 조합이 최적 @layer란 무엇인가? @layer는 CSS Cascade Layers의 핵심 기능으로, 스타일의 우선순위를 명시적으로 관리할 수 있게 해줌 CSS 우선순위 순서 (낮음 → 높음) @layer base, components, utilities; /* 1. base (가장 낮음) */ @layer base {... Continue Reading →
CSS 정렬 속성 완전 정복 – Flexbox vs Grid
CSS 정렬 속성들이 헷갈리는 이유와 Flexbox, Grid에서 각각 어떻게 사용하는지 체계적으로 정리했다. 속성FlexboxGridjustify-content✅ 전체 정렬✅ 전체 정렬justify-items❌ 효과 없음✅ 각 셀 내부justify-self❌ 효과 없음✅ 개별 아이템align-items✅ 전체 정렬✅ 각 셀 내부align-self✅ 개별 아이템✅ 개별 아이템align-content✅ 여러 줄✅ 전체 정렬 justify-items (Grid 전용) Grid에서 각 그리드 셀 안에서 아이템을 가로(주축) 방향으로 정렬합니다. .grid-container { display: grid;... Continue Reading →
CSS Position 완전 정복 가이드
CSS에서 요소의 위치를 제어하는 position 속성에 대한 완전한 이해를 위한 가이드다. position 속성과 값들 position은 속성명이고, 다음과 같은 값들을 가질 수 있다: .element { position: static; /* 기본값 */ position: relative; /* 상대 위치 */ position: absolute; /* 절대 위치 */ position: fixed; /* 고정 위치 */ position: sticky; /* 끈끈한 위치 */ } 각... Continue Reading →
실무에서 자주 마주치는 CSS 문제 해결법 10가지
개발하다 보면 "분명 맞는 것 같은데 왜 안 되지?"라는 상황들이 있다. 자주 발생하는 CSS 문제들과 해결법을 정리했다. 1. z-index가 작동하지 않을 때 문제 .modal { z-index: 9999; /* 아무리 높여도 안 됨 */ background: rgba(0,0,0,0.5); } 해결 .modal { position: relative; /* 또는 absolute, fixed */ z-index: 9999; background: rgba(0,0,0,0.5); } 이유: z-index는 positioned 요소(position이... Continue Reading →
CSS 비직관적 속성들과 Flexbox 핵심 해결책
CSS에는 논리적으로 이해하기 어려운 속성들이 존재한다. 이런 것들을 알고 있어야 실무에서 막히지 않는다. 비직관적 CSS 속성들 1. min-height: 0 - Flex 아이템 크기 제어 문제 .container { height: 100vh; display: flex; flex-direction: column; } .main { flex: 1; /* 자식 콘텐츠가 길어지면 부모까지 늘어남 */ } 해결 .main { flex: 1; min-height: 0; /* 필수... Continue Reading →
St991Cup's Blog 