본문 바로가기
반응형

전체 글25

풀스택 앱 무료 배포 완전 가이드 — Vercel + Railway + MongoDB Atlas React + Node.js 풀스택 앱을 무료로 배포하는 방법은 크게 두 가지다. 백엔드를 Vercel Serverless로 처리하는 방법과 Railway에 독립 서버로 올리는 방법이다. 각각 장단점이 다르므로 프로젝트 성격에 맞게 선택하면 된다.두 방법 비교항목Vercel (Serverless)Railway (Express 서버)백엔드 형태Serverless Function항상 켜진 Express 서버콜드 스타트있음 (첫 요청 2~5초)없음Express 구조 변경필요 (listen() 제거)불필요 (그대로 사용)WebSocket불가가능무료 한도넉넉함월 $5 크레딧 제공적합한 경우간단한 REST API복잡한 서버, 상태 유지 필요 시간단한 CRUD API라면 Vercel Serverless로 충분하다. .. 2026. 2. 25.
JWT 인증 구현 — Node.js, Python, Go 비교 JWT(JSON Web Token)는 서버 세션 없이 인증 상태를 유지하는 방법이다. 구조와 흐름은 언어에 상관없이 동일하고, 구현 방식만 조금씩 다르다. Node.js를 메인으로, Python(FastAPI)과 Go도 함께 정리한다.JWT 구조JWT는 .으로 구분된 세 부분으로 이루어진다.eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 ← Header (알고리즘, 토큰 타입).eyJ1c2VySWQiOiIxMjMiLCJpYXQiOjE2OTk... ← Payload (실제 데이터).SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV... ← Signature (변조 검증)Header와 Payload는 Base64로 인코딩되어 있어 누구나 디코딩할 수 있다. 민감한 데.. 2026. 2. 25.
npm 패키지 배포 전 체크리스트 — npm pack 활용법 npm에 패키지를 배포하고 나서 "아, 이걸 빠뜨렸네"를 겪고 나면 버전을 올려야 한다. 배포 전에 확인할 것들을 한 곳에 정리해둔다.package.json 핵심 필드배포에 직접 영향을 주는 필드들이다.{ "name": "@lukaplayground/my-package", "version": "1.0.0", "description": "한 줄 설명", "type": "module", "main": "src/index.js", "bin": { "my-cmd": "bin/my-cmd.js" }, "files": [ "bin/", "src/", "README.md", "LICENSE" ], "engines": { "node": ">=18.0.0" }, "k.. 2026. 2. 25.
React + Vite 프로젝트 초기 세팅 — 매번 하는 것들 정리 새 프로젝트를 시작할 때마다 같은 설정을 반복한다. 검색하고 복붙하는 시간을 없애기 위해 한 곳에 정리해둔다.1. 프로젝트 생성npm create vite@latest my-app -- --template reactcd my-appnpm installTypeScript를 쓴다면 --template react-ts로 바꾸면 된다.생성 직후 폴더 구조:my-app/├── public/├── src/│ ├── assets/│ ├── App.jsx│ ├── App.css│ ├── index.css│ └── main.jsx├── index.html├── vite.config.js└── package.jsonApp.css와 index.css는 보일러플레이트 스타일이 들어있다. Tailwind를 쓸.. 2026. 2. 25.
Trip Planner - 지도 기반 여행계획 풀스택 앱 왜 만들었나여행 계획을 짤 때 구글 지도, 메모 앱, 엑셀을 동시에 열어두고 작업하는 게 불편했다. 지도를 보면서 순서를 정하고, 이동수단을 선택하고, 체크리스트처럼 관리하는 도구가 필요했다. 포트폴리오 목적도 있었고, 실제로 쓸 수 있는 앱을 만들고 싶었다.기술 스택레이어선택이유FrontendReact + Vite + Tailwind CSS v4빠른 개발, 최신 TailwindBackendNode.js + Express심플한 REST APIDBMongoDB유연한 스키마 (장소 데이터 구조가 자주 바뀜)지도Leaflet.js + OpenStreetMap완전 무료도로 경로Valhalla 공개 서버무료, 5개 교통수단 프로파일대중교통ODsay LAB버스+지하철 최적 혼합 경로인증JWT + bcrypt기본기배.. 2026. 2. 25.
CommitGen #3 - NPM 배포 & 회고 CommitGen — NPM 배포 & 회고이전 글 요약1편에서 설계, 2편에서 핵심 구현을 다뤘다. 이번 편에서는 NPM 패키지 배포 과정과 프로젝트 전체 회고를 정리한다.NPM 패키지 설정package.json 핵심 필드{ "name": "@lukaplayground/commitgen", "version": "1.0.0", "type": "module", "main": "src/index.js", "bin": { "commitgen": "bin/commitgen.js" }, "files": [ "bin/", "src/", "README.md", "LICENSE" ], "engines": { "node": ">=18.0.0" }}각 필드의 역할:필드값설명.. 2026. 2. 13.
반응형

티스토리툴바