보급형 개발자의 웹개발 노트

2026.07.08 - [분류 전체보기] - #2 초보를 위한 바이브코딩으로 랜딩페이지 만들고 배포하기 (스벨트킷) #2 초보를 위한 바이브코딩으로 랜딩페이지 만들고 배포하기 (스벨트킷)2026.07.08 - [Svelte_SvelteKit] - #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트) #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)앞서 스벨트/스벨트킷으로 만든 프로젝트의 폴wisdom.me.kr 위에서 스벨트킷으로 만든 프로젝트의 폴더 구조를 한번 살펴보고 작동은 어떻게 하는 것인지 세부적으로 살펴보겠습니다. https://sveltekit-landingpage.vercel.app/ Aura Pro - 궁극의 청취 경험Aura는 음악이 단순히 들리는 것이 아니라 온전히 ..

2026.07.08 - [Svelte_SvelteKit] - #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트) #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)앞서 스벨트/스벨트킷으로 만든 프로젝트의 폴더 구조 등을 살펴봤습니다.백물이불여일견이라고 실제로 바이브코딩으로 웹사이트를 하나 만들어서 배포까지 진행해 보고 차이가 무엇인지 알wisdom.me.kr 앞서 순수 스벨트로 랜딩페이지를 만들어봤습니다.이번엔 스벨트의 프레임워크인 스벨트킷으로 똑같이 만들어 보고 차이점을 알아보겠습니다. https://youtu.be/O3lT3cHZCCw 1. PRD, TRD 만들기 PRD는 지난 편과 동일합니다.다만 TRD는 이번에는 스벨트킷으로 만들거라 제미나이에게 수정을 요청했습니다. TRD.m..

2026.07.08 - [Svelte_SvelteKit] - #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트) #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)앞서 스벨트/스벨트킷으로 만든 프로젝트의 폴더 구조 등을 살펴봤습니다.백물이불여일견이라고 실제로 바이브코딩으로 웹사이트를 하나 만들어서 배포까지 진행해 보고 차이가 무엇인지 알wisdom.me.kr 앞서 바이브코딩을 통해 실제 코드를 한 줄도 치지 않으면서도 그럴싸한 랜딩페이지를 만들어보았습니다.이제 이렇게 만든 랜딩페이지를 인터넷에 공개(배포)하려면 몇 가지 절차가 필요합니다. 1. 깃허브 가입하기 깃허브는 개발자라면 모를 수 없는 필수적인 사이트입니다.혼자 작업하든 여럿이 공동작업을 하든 소스를 내 컴퓨터와 동기화하고 ..

앞서 스벨트/스벨트킷으로 만든 프로젝트의 폴더 구조 등을 살펴봤습니다.백물이불여일견이라고 실제로 바이브코딩으로 웹사이트를 하나 만들어서 배포까지 진행해 보고 차이가 무엇인지 알아보겠습니다.여기서 사용한 AI는 구글의 제미나이와 안티그래비티 IDE입니다. ※ 안티그래비티가 업그레이드 되면서 클로드같은 채팅창만 있는 안티그래비티가 있고, 기존의 코드에디터인 IDE가 분리되었는데 여기서는 소스 코드 등을 보면서 확인하기 위해 IDE로 진행했습니다. 1. PRD, TRD 작성하기 프로젝트를 시작하기에 앞서 어떤 랜딩페이지를 만들 것인지 PRD(Product Requirement Document)를 작성할 필요가 있습니다.자세할 수록 좋겠지만 그냥 간단하게 제시어를 주고 TRD(Technical Requirem..

앞서 스벨트나 스벨트킷으로 만든 프로젝트의 폴더 구조 등을 알아보았습니다.그럼 이렇게 만든 웹사이트를 어떻게 외부에 공개할 수 있는지 그 배포과정에 대해 알아보겠습니다. 배포를 하기 전에 필요한 것은 1. 깃허브에 가입을 하고2. Vercel 또는 Netlify 에 가입할 때는 앞서 가입한 깃허브로 회원가입을 하는 것입니다. 그래야 코드 동기화부터 배포가 일련의 과정으로 이루어질 수 있습니다. 스벨트(Svelte) 단독으로 만든 정적 사이트(SPA)인지, 아니면 서버 기능이 포함된 풀스택 프레임워크인 스벨트킷(SvelteKit)인지에 따라 배포 방식이 달라집니다. 각각의 환경에 따른 배포 방법을 알려드리겠습니다.1. 일반 스벨트(Svelte) 프로젝트 배포 (정적 호스팅)일반 스벨트 앱은 빌드 시점에..

2026.07.07 - [Svelte_SvelteKit] - 초보를 위한 스벨트킷 프로젝트의 폴더 구조 설명 초보를 위한 스벨트킷 프로젝트의 폴더 구조 설명스벨트킷(SvelteKit) 프로젝트는 **"설정보다는 규약(Convention over Configuration)"**을 중요하게 여기기 때문에 구조가 직관적이고 일관적입니다. 비트(Vite)와 sv CLI를 통해 생성한 스벨트킷 프로젝트의wisdom.me.kr 앞서 스벨트킷으로 프로젝트를 생성했을 때 폴더구조에 대해 살펴보았습니다.여기서 파일 기반 라우팅이라는 얘기가 나오는데 좀 더 구체적으로 알아보겠습니다. 먼저 페이지 라우팅이라는 것은 사용자가 브라우저에 URL을 입력하거나 클릭했을 때 그 경로를 찾아가 보여주는 것입니다. 기존처럼 링크를 클릭..