전체 글 썸네일형 리스트형 [vibe coding] Web Hosting + Service 스택 재설계 + Hosting 서비스 (Hostinger 20% 쿠폰) Vibe Coding 으로 에이전트 만들고, 홈페이지도, 앱도 많이 만들고 있지요?그런데 호스팅은요? vercel 을 사용하기도 하고 여러 서비스들을 연결해야하지요.저는 Hostinger 호스팅 서비스를 추천받아서 쓰고 있어요.초보라서 중요한 것은 사용하기 쉬운가인데, 유튜브에도 사용법이 잘 나와있고, 웬만한 것은 chatGPT, Gemini, Claude에게 물어보면 잘 알려줍니다. 꿀팁은, 막히는 부분에서 화면을 캡쳐해서 물어보는 겁니다. 막막할 때 있잖아요. 어디를 눌러라.. 까지 알려줍니다. 가격도 사실 만만치 않아요. 도메인 구매부터 호스팅 서비스에 SSL 까지 갖춰야 어엿한 사이트로 살아가거든요. 다른 서비스도 사용해봤는데, 가격과 성능면에서 안 하면 손해일만큼 강력합니다. 아래 코드로 서비.. 더보기 [vibe coding] PDF 리포트 출력 구현 방법 Top 3 PDF로 결과를 출력해주는 서비스가 필요하다면,출력 구현 방법도 미리 설정해주어야 합니다.여러가지 방법 중 3가지를 비교 설명해드릴게요. PDF 리포트 출력 구현 방법진단 결과를 PDF로 저장하는 방법은 크게 3가지예요.방법 비교방법난이도품질비용추천 상황① 브라우저 Print⭐ 쉬움보통무료빠른 MVP② Puppeteer (서버)⭐⭐⭐ 어려움최상Vercel Pro 필요정교한 레이아웃③ React-PDF⭐⭐ 중간좋음무료최적① 브라우저 Print (가장 빠름) javascript// 버튼 하나로 끝 window.print()}>PDF 저장CSS에 @media print 스타일만 잘 짜면 꽤 깔끔하게 나와요. 단, 폰트/레이아웃 제어가 제한적.② React-PDF (추천) ⭐@react-pdf/renderer.. 더보기 아임웹에서 바이브코딩(AI 코딩 기반 커스텀)을 적용할 수 있는 3가지 핵심 루트 아임웹에서 바이브코딩(AI 코딩 기반 커스텀)을 적용할 수 있는 3가지 핵심 루트를 정리해 드립니다.1. 아임웹 '코드 위젯' 활용 (프론트엔드 확장)아임웹은 기본적으로 노코드 툴이지만, 특정 영역에 HTML, CSS, JavaScript를 넣을 수 있는 '코드 위젯'을 제공합니다.바이브코딩 적용: Cursor나 VS Code에서 구현하고 싶은 특수 효과(예: 화려한 애니메이션, 커스텀 계산기, 외부 API 연동 차트 등)를 코딩한 뒤, 그 코드를 아임웹 코드 위젯에 붙여넣는 방식입니다.장점: 아임웹이 제공하지 않는 독특한 UI/UX를 내 사이트에만 넣을 수 있습니다.2. '공통 코드 설정'을 통한 디자인 커스텀 (CSS/JS)사이트 전체의 분위기를 바꾸고 싶을 때 바이브코딩을 활용할 수 있습니다.바이브.. 더보기 Lovable → Hostinger 배포 방법 총정리 (Vite·React 403 Forbidden 해결 포함) Lovable에서 만든 사이트를 Hostinger로 옮긴 하루오늘은 Lovable에서 만든 Vite + React 기반 홈페이지를 Hostinger로 옮겼다.과정 자체는 단순해 보였지만, 실제로는 구조를 이해해야 풀리는 문제들이 있었다.(ChatGPT 의 도움을 받았다.)1. Lovable → GitHub → Hostinger먼저 Lovable에서 작업한 사이트를 GitHub에 연결했다. 1) GitHub에서 파일을 다운로드 받기 아래 그림에서 초록색 버튼 (Code) 를 누르고, Download ZIP 을 선택하면 파일이 다운로드 된다. 압축을 풀고, 그 폴더 안에서 터미널을 열고, 아래의 명령어를 실행한다. npm run build코드가 정상적으로 올라간 것을 확인한 뒤, Hostinger의 Node.. 더보기 Claude Code 입문 시리즈 · 2편 • 클로드에게 제대로 말 거는 법 ## 혹시 이런 경험 있으셨나요?> 😤 `claude` 실행은 했는데, 뭐라고 써야 할지 모르겠음>> 😤 일단 "앱 만들어줘"라고 썼더니 클로드가 뭔가 엄청 길게 만들었는데> 내가 원하는 게 아님>> 😤 근데 뭐가 문제인지도 모르겠음 🫠Claude Code는 강력하지만, **말을 어떻게 거느냐**에 따라 결과가 완전히 달라집니다.이번 편에서는 클로드를 제대로 써먹는 기본기를 다집니다.**🎯 오늘 배울 것**1. Claude Code를 어디서, 어떻게 시작하는지2. 파일/폴더를 읽게 하는 법3. 좋은 요청 vs 나쁜 요청의 차이4. 자주 쓰는 기본 명령어 패턴---## Claude Code는 "폴더 단위"로 일합니다가장 먼저 이해해야 할 핵심 개념이에요.> 🙋 "그냥 아무 데서나 `claud.. 더보기 Claude Code 입문 시리즈 · 2편 ## 클로드에게 제대로 말 거는 법*읽는 시간 약 8분 · 난이도 🌱 입문 · 1편 설치 완료 후 진행*---## 혹시 이런 경험 있으셨나요?> 😤 `claude` 실행은 했는데, 뭐라고 써야 할지 모르겠음>> 😤 일단 "앱 만들어줘" 라고 썼더니 클로드가 뭔가 엄청 길게 만들었는데> 내가 원하는 게 아님>> 😤 근데 뭐가 문제인지도 모르겠음 🫠Claude Code는 강력하지만, **말을 어떻게 거느냐**에 따라 결과가 완전히 달라집니다.이번 편에서는 클로드를 제대로 써먹는 기본기를 다집니다.**🎯 오늘 배울 것**1. Claude Code를 어디서, 어떻게 시작하는지2. 파일/폴더를 읽게 하는 법3. 좋은 요청 vs 나쁜 요청의 차이4. 자주 쓰는 기본 명령어 패턴---## Claude .. 더보기 Claude Code 입문 시리즈 · 1편 터미널이 뭔지도 몰랐던 내가 Claude Code를 쓰게 된 이야기읽는 시간 약 7분 · 난이도 🌱 입문 · Mac OK혹시 이런 상황이셨나요?😅 “Claude Code 써보면 코딩 엄청 편해진대” 들었는데…😅 근데 터미널을 열면 그냥 까만 화면만 나오고 뭘 쳐야 할지 모르겠음 🫠😅 npm이 뭔지, node가 뭔지, 왜 설치해야 하는지 아무것도 모르는데 일단 따라 치라고?저도 그랬어요. 그래서 “왜”부터 설명하는 글을 썼습니다.🎯 이 글에서 배울 것 ∙ 터미널이 뭔지 — 무서운 거 아님을 이해하기 ∙ Node.js를 왜 설치해야 하는지 이해하기 ∙ Claude Code 설치하고 실행하기 ∙ 클로드에게 첫 번째 말 걸어보기터미널, 알고 보면 별거 아닙니다처음 터미널을 열면 이런 생각이 들죠. .. 더보기 Claude Code 시작하기 A to Z — 비개발자도 따라할 수 있는 완전 초기 셋업 가이드 이 글은 claude.ai 채팅만 써보던 사람이 Claude Code를 처음 설치하고 실행하기까지의 과정을 정리한 글입니다. 개발자가 아니어도 괜찮아요. 순서대로만 따라오세요.Claude.ai vs Claude Code — 뭐가 다른가요?먼저 이 둘의 차이를 이해하고 시작하면 훨씬 수월해요.claude.ai (브라우저에서 채팅하는 것)는 AI한테 질문하고 텍스트로 답을 받는 도구예요. 글쓰기, 아이디어 정리, 질문 답변 등에 좋죠. 결과물이 텍스트로 끝납니다.Claude Code는 터미널에서 실행하는 도구로, AI가 내 컴퓨터 안에서 직접 파일을 만들고, 코드를 짜고, 실행까지 해줍니다. 결과물이 실제 파일과 프로그램으로 남아요.쉽게 비유하면, claude.ai는 "AI한테 물어보는 것"이고 Claude.. 더보기 이전 1 2 3 4 ··· 36 다음
