본문 바로가기

Tech Notes123

Vite + React + Tailwind 와 Next.js 의 차이 ✅ 1️⃣ Vite + React + TailwindVite: 빌드 도구 (빠른 개발 서버 + 번들러)React: UI 라이브러리Tailwind: CSS 프레임워크 (유틸리티 클래스)👉 이렇게 쓰면 그냥 순수 React SPA(Single Page Application) 개발 환경이야.페이지는 클라이언트에서 렌더링(Client-Side Rendering, CSR)서버는 딱히 없음. API 필요하면 따로 Express나 Firebase 같은 걸 붙여야 해.정적 파일로 빌드해서 Netlify, Vercel 등에 배포.✔️ 특징:✅ 세팅 가벼움✅ 개발 서버 속도 빠름✅ 내가 직접 라우팅, SSR 같은 건 따로 설정해야 함✅ 2️⃣ Next.jsNext.js는 React를 기반으로 한 프레임워크야.Vite처럼.. 2025. 7. 4.
내 텔레그램 ID 찾는 가장 쉬운 방법! (봇으로 바로 확인하기) pip install requestsimport requestsBOT_TOKEN = "여기에_봇_토큰"CHAT_ID = "여기에_내_텔레그램_ID"def send_telegram(message): url = f"https://api.telegram.org/bot{BOT_TOKEN}/sendMessage" payload = { "chat_id": CHAT_ID, "text": message } response = requests.post(url, json=payload) return response.json()# 사용 예시send_telegram("서버 배포 완료!")send_telegram("에러 발생: NullPointerException")텔레그램에.. 2025. 7. 3.
배포 플랫폼 Firebase ✅ Firebase가 뭔데?Google이 제공하는 클라우드 플랫폼.DB, 인증, 스토리지 등 다 있지만 Firebase Hosting은 정적 사이트(HTML/CSS/JS) 빠르게 배포하는 데 많이 씀.React + Vite 빌드된 정적 파일도 여기에 올리면 끝.✅ 필수 준비1️⃣ Firebase 계정 (Google 계정으로 로그인)2️⃣ Firebase 프로젝트 만들기3️⃣ 로컬에 Node.js 설치 (이미 되어있으면 OK)✅ 배포 순서1️⃣ Firebase CLI 설치터미널에서:bash npm install -g firebase-tools 2️⃣ Firebase 로그인bash firebase login3️⃣ Firebase 프로젝트 만들기Firebase 콘솔(https://console.firebase.. 2025. 7. 3.
깃허브 액션(GitHub Actions) 완전 정복 ✅ 깃허브 액션이란?GitHub Actions는 코드를 자동으로 빌드하고, 테스트하고, 배포까지 해주는 자동화 도구(CI/CD)입니다.별도의 서버가 필요 없이, GitHub에서 제공하는 가상 머신(러너)이 자동으로 실행해줍니다.대표적으로 Push, Pull Request, Schedule(크론 스케줄러) 등 다양한 이벤트(Trigger)로 워크플로우가 돌아갑니다.📁 폴더 구조GitHub Actions는 프로젝트 루트에 .github/workflows/ 폴더를 만들어서 설정합니다.여기에만 넣고 github에 push 하면 알아서 스케줄이 돌아갑니다. (완전 신기!) .github : GitHub가 자동으로 인식하는 특별한 폴더workflows : CI/CD 자동화 스크립트(YAML)를 넣는 곳⚙️ 기본 .. 2025. 7. 1.
개발·코딩 AI 툴 총정리 🚀 2026 AI 코딩 툴 총정리AI 코딩 도구가 워낙 빠르게 늘어나서 뭘 써야 할지 막막하죠. 웹 채팅형, 터미널형, IDE 통합형, 앱 빌더형까지 — 용도별로 딱 맞는 툴이 달라요. 2026년 기준으로 실제로 쓸 만한 AI 코딩 툴들을 정리했어요.툴카테고리무료 여부핵심 특징추천 대상Claude CodeAnthropic터미널유료 (API)터미널에서 자연어로 코드 생성/수정. 파일 직접 편집 가능자동화, 리팩토링CursorIDE무료 플랜 있음VSCode 기반 AI IDE. 코드베이스 전체를 컨텍스트로 이해일반 개발, 코드 자동완성WindsurfCodeiumIDE무료 플랜 있음Cursor 대안. Cascade 기능으로 멀티파일 편집Cursor 대안 찾는 개발자GitHub CopilotIDE무료 플랜 있음VSC.. 2025. 7. 1.
# AI 툴 총정리 (무료 포함) 🚀 안녕하세요!오늘은 다양한 AI 툴들을 카테고리별로 정리해봤습니다.무료 플랜 유무, 특징, 추천 용도까지 한눈에 볼 수 있게 준비했으니 참고하세요!1. 자연어 처리 (NLP) 툴툴 이름주요 기능무료 플랜 여부특징 및 추천 용도OpenAI GPT텍스트 생성, 요약, 번역 등일부 무료최신 대화형 AI, 다양한 API 지원Hugging Face다양한 NLP 모델 제공무료직접 모델 선택·커스터마이징 가능Cohere텍스트 임베딩, 분류무료빠르고 가벼운 NLP 서비스 2. 이미지 생성 및 편집 AI툴 이름주요 기능무료 플랜 여부특징 및 추천 용도Midjourney고퀄리티 AI 이미지 생성제한적 무료디테일 높은 아트워크, 컨셉 디자인DALL·E 3텍스트 → 이미지 변환일부 무료쉽고 빠른 이미지 생성, OpenAI 기반.. 2025. 7. 1.
반응형

티스토리툴바