반응형 React3 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. AIKit #6 - React & Vue에서 AIKit 사용하기 AIKit — React & Vue 연동자주 받는 질문"React에서 어떻게 쓰나요?" — AIKit은 순수 JavaScript 라이브러리다. 모든 프레임워크에서 동일하게 동작한다. 핵심은 프레임워크의 상태 관리 패턴에 맞춰 감싸는 것이다.React 연동Custom Hook// useAIKit.jsimport { useState, useRef, useCallback } from 'react';export function useAIKit(config) { const aiRef = useRef(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [messag.. 2026. 2. 8. 이전 1 다음 반응형
