개인이나 팀에서 무료로 사용할 수 있는 온프레미스 칸반보드 솔루션들을 알아봤습니다. Notion을 사용 중이지만, 자체 서버에서 운영하면서 API도 제공하는 도구들을 찾아보았습니다. 오픈소스 칸반보드 옵션들 Wekan MIT 라이선스 오픈소스 Trello 클론으로 UI가 매우 유사 Docker로 간편 설치 REST API 제공 카드 댓글, 라벨, 체크리스트 등 기본 기능 제공 실시간 업데이트 지원 특징: 심플하고 가벼우며 Trello에서 데이터 마이그레이션... Continue Reading →
프론트엔드-백엔드 분리 환경에서 OAuth 로그인 구현하기
프론트엔드와 백엔드가 분리된 환경에서 구글 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 →
St991Cup's Blog 