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을 입력하거나 클릭했을 때 그 경로를 찾아가 보여주는 것입니다. 기존처럼 링크를 클릭..

스벨트킷(SvelteKit) 프로젝트는 **"설정보다는 규약(Convention over Configuration)"**을 중요하게 여기기 때문에 구조가 직관적이고 일관적입니다. 비트(Vite)와 sv CLI를 통해 생성한 스벨트킷 프로젝트의 핵심 폴더 및 파일 구조는 다음과 같습니다. 1. src (소스 폴더) — 프로젝트의 심장개발자가 작성하는 코드의 99.9%가 위치하는 가장 중요한 폴더입니다.routes/ (라우트 폴더): 스벨트킷은 파일 시스템 기반 라우팅을 사용합니다. 폴더 구조가 그대로 웹사이트의 URL 주소가 되며, + 접두사가 붙은 파일들이 고유의 역할을 수행합니다.+page.svelte: 특정 경로의 화면(UI)을 렌더링하는 컴포넌트입니다.+page.js / +page.ts: 클라이언트..

2026.07.07 - [Svelte_SvelteKit] - 초보자가 스벨트 또는 스벨트킷 개발환경 구축하기 초보자가 스벨트 또는 스벨트킷 개발환경 구축하기먼저 초보자가 스벨트(Svelte) 개발 환경을 설정하는 방법은 다음과 같습니다. 순서대로 따라 해보세요. 1. Node.js 설치하기 스벨트 개발에 필요한 패키지들을 관리하고 개발 서버를 실행하기 위해wisdom.me.kr 앞선 글에서 개발환경을 구축할 때 vite를 사용하는 것을 보았습니다.npm create vite@latest 이렇게 vite를 사용하게 되면 기본적인 프로그램의 골격을 만들어줍니다.이것을 스캐폴딩이라고 합니다. vite를 모르신다면 아래 글 참고. 2026.07.03 - [바이브코딩] - 프론트엔드 빌드 툴 webpack 부터 ..

먼저 초보자가 스벨트(Svelte) 개발 환경을 설정하는 방법은 다음과 같습니다. 순서대로 따라 해보세요. 1. Node.js 설치하기 스벨트 개발에 필요한 패키지들을 관리하고 개발 서버를 실행하기 위해 Node.js가 필요합니다.Node.js 공식 웹사이트(nodejs.org)에 접속하여 가장 안정적인 버전인 LTS(Long Term Support) 버전을 다운로드하여 설치합니다.설치 시 npm(노드 패키지 매니저) 애플리케이션도 함께 설치됩니다.2. 코드 에디터(VS Code) 설치하기 코드를 작성할 프로그램으로 Visual Studio Code(VS Code)를 사용하는 것을 가장 권장합니다.Visual Studio Code 홈페이지에서 사용 중인 운영체제(Windows, Mac 등)에 맞는 버전..

스벨트(Svelte)와 스벨트킷(SvelteKit)의 관계는 리액트(React)와 넥스트제이에스(Next.js), 또는 뷰(Vue)와 넉스트제이에스(Nuxt.js)의 관계와 유사합니다. 간단히 말해, 일반 스벨트는 사용자 인터페이스(UI)를 구축하기 위한 컴포넌트 프레임워크이자 컴파일러이고, 스벨트킷은 스벨트를 기반으로 완전한 웹 애플리케이션을 만들기 위해 다양한 백엔드 및 라우팅 기능이 추가된 **공식 애플리케이션 프레임워크(메타 프레임워크)**입니다. 구체적인 차이점과 스벨트킷이 제공하는 추가 기능은 다음과 같습니다. 1. 렌더링 방식의 확장 (SSR, SSG 지원)일반 스벨트: 기본적으로 클라이언트 사이드에서만 렌더링(CSR)을 수행하여 단일 페이지 애플리케이션(SPA)을 만듭니다.스벨트킷: 서버..

안녕하세요! 웹 애플리케이션을 구축할 때 어떤 풀스택 프레임워크를 선택할지 고민 중이신가요? 오늘은 현대 프론트엔드 생태계를 주도하고 있는 두 대세, Next.js와 이에 대적하는 강력한 도전자 SvelteKit의 관계와 특징을 솔직하고 명확하게 비교해 보겠습니다. https://youtu.be/Pk5E7G5DgVI 1. 이들의 관계: "망치와 도구 상자", 그리고 두 거인의 동반자관계를 가장 직관적으로 설명하자면 다음과 같습니다."Svelte가 망치라면, SvelteKit은 완전한 도구 상자입니다." Svelte와 React가 단순히 화면에 보여지는 UI 컴포넌트를 그리는 도구라면, SvelteKit과 Next.js는 거기에 라우팅, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 엔..

스벨트(Svelte 5)와 리액트(React 19)는 현대 웹 개발에서 가장 뜨겁게 비교되는 두 기술입니다. 1. 스벨트 vs 리액트 핵심 장단점 요약구분 스벨트 5 (Svelte) 리액트 19 (React)동작 방식빌드 타임 컴파일러 (가상 DOM 없음)런타임 라이브러리 (가상 DOM 기반)번들 사이즈매우 작음 (초기 런타임 약 2KB)상대적으로 큼 (코어 라이브러리 약 42KB)코드 가독성보일러플레이트가 거의 없음 (코드량 약 40% 감소)JSX 및 상태 업데이트 함수로 인해 코드가 다소 복잡함반응성 시스템룬(Runes) 시스템 ($state, $derived, $effe..

안녕하세요! 오늘은 스벨트킷(SvelteKit)을 활용하여 사용자가 업로드한 이미지들을 하나의 PDF 파일로 병합하고 다운로드할 수 있는 웹 애플리케이션 개발 가이드를 정리해 보려고 합니다.특히 데스크톱뿐만 아니라 모바일 환경 최적화, 작업 진행 중 세련된 애니메이션, 그리고 서버 용량 관리를 위한 24시간 임시 파일 자동 삭제(TTL) 기능까지 포함된 완성도 높은 풀스택 프롬프트와 설계 구조입니다.🛠️ 기술 스택 및 개발 프레임워크Framework: SvelteKit (최신 안정 버전)Styling: Tailwind CSS (반응형 및 모바일 터치 최적화)PDF Library: pdf-lib 또는 jsPDF (서버/클라이언트 환경에 맞춤)Storage: Node.js 내부 스케줄러 기반의 24시간 자..

좀더 진도를 나가기 전에 자바스크립트 문법 몇 가지를 확인하고 가야 진도가 편해질 것 같다.왜냐하면 제대로 자바스크립트 문법을 공부한 적이 없으므로...우선 예제에 자주 등장하는 3가지. 1. let함수 내부나 특정 블록에서만 사용할 변수를 선언할 때 사용for 루프나 if, switch 같은 조건문 내에서 특정 조건에 따른 변수 선언 시 사용let x = 1;if (x === 1) { let x = 2; // 새로운 블록 범위에서 선언 console.log(x); // 2}console.log(x); // 1 2. const프로그램 내의 상수값을 저장할 때 사용const PI = 3.14;if (true) { const PI = 2.71; // 새로운 블록 범위에서 선언 console.log(P..

프로젝트 만드는게 뭔가 했더니 기본적인 템플릿을 내 로컬환경에 복제하는 것을 말했다.스벨트 공홈에서 다운로드 받는 방법도 있지만 깃허브에서 그대로 복제하는 방법이 더 편한다. 여기서부터는 VSC에서 새 터미널을 열고 하는 작업이다. 1. degit 설치degit 이란 명령을 사용하는데 깃허브의 파일들을 현재 경로로 복제하는 것이다.한번만 실행하면 되고, 전역으로 사용할 수 있게 해주는 것이다.npm install -g degit 여기서 잠깐!npm 이란 뭐지? npm(Node Package Manager)은 Node.js와 함께 설치되는 자바스크립트 패키지 매니저로, Node.js 프로젝트에서 필요한 패키지(모듈)를 설치, 관리, 삭제할 수 있는 도구다. 앞서 브라우저가 아닌 환경에서도 자바스크립트..

이전에 다른 교재같은 것을 봤을 때 Node.js 를 사용하는 것들이 많았는데 사실 뭔지도 모르고 그냥 예제 따라하기 해봤던 기억이 있다. 지금 내 노트북에도 왠지 모르지만 Node.js는 설치되어 있다.그런데, 제이펍 출판사의 책을 읽으면서 새삼 알게되었다. Node.js란 브라우저 외의 환경에서도 자바스크립트를 실행할 수 있게 해주는 런타임도구라고.일단 스벨트가 실행하는데 Node.js가 필요하다는 정도만 알면 된다. Node.js — 어디서든 JavaScript를 실행하세요 Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  Node.js 설치한..