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

스벨트(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..

요즘 ChatGPT, 클로드(Claude) 같은 AI를 업무에 많이들 활용하지만 AI를 쓰다 보면 꼭 이런 답답한 순간이 찾아옵니다."이모티콘 쓰지 말고 표 형식으로 써달라고 어제 말했는데, 왜 오늘 새 대화창을 열니까 또 원래대로 돌아가 있지?" "처음에는 똑똑하게 일하다가 대화가 길어지니까 중요한 규칙을 자꾸 까먹네?" 매번 AI에게 똑같은 규칙을 설명하느라 피곤하셨다면, 오늘 소개해 드릴 하네스 엔지니어링(Harness Engineering)과 AI 에이전트 팀 설계 개념에 주목해 보세요! https://youtu.be/g4fZ_hT1Pfc 1. 하네스 엔지니어링(Harness Engineering)이 뭔가요?가장 알기 쉬운 비유는 **'야생마와 마구(Harness)'**입니다. 현재의 거대..

2026.07.06 - [바이브코딩] - 배포와 CI/CD 완벽가이드 배포와 CI/CD 완벽가이드내가 원하는 웹사이트를 만들었는데 다른 사람에게 보여줘야 한다면?웹브라우저에 나와있는 localhost://~ 이 주소를 보내줄건가요?이건 내 컴퓨터에서만 볼 수 있죠. 그래서 이렇게 내가 만든 웹wisdom.me.kr 이전 글에서 내가 만든 프로그램을 배포하기 위한 서비스를 소개한 적 있는데 여기서는 대표적인 3가지 서비스를 비교 분석해보겠습니다. 그에 앞서 전통적인 웹호스팅이나 클라우드 호스팅과 이러한 서비스들이 다른 점은 무엇이고 왜 써야하는지 알아보겠습니다. https://youtu.be/mQqlGK2nn2g 기존의 전통적인 웹호스팅이나 AWS, 오라클 클라우드 같은 인프라 중심(IaaS) 서비..

풀스택 개발자(Full-Stack Developer)란 웹 애플리케이션의 사용자 화면을 담당하는 '프론트엔드'와 눈에 보이지 않는 서버, 비즈니스 로직, 데이터베이스를 처리하는 '백엔드'를 모두 개발할 수 있는 사람을 뜻합니다. 원래 '풀스택 개발'은 웹 서버, 서버사이드 코드, 브라우저와 클라이언트 사이드 코드, 데이터베이스와 운영체제 등 시스템 전반을 아우르는 개발을 의미했으나, 오늘날 국내에서는 프론트엔드와 백엔드 양쪽을 넘나들며 시스템 전체를 연결할 줄 아는 멀티플레이어 개발자를 지칭하는 용어로 흔히 쓰이고 있습니다. https://youtu.be/T6lXPP9tkHs 웹 개발 생태계에서 가장 주목받는 변화는 바로 견고했던 '프론트엔드'와 '백엔드'의 경계가 빠르게 허물어지고 있다는 점입니다..

최근 IT 업계와 1인 창업 생태계에서 가장 뜨거운 화두는 단연 **'바이브 코딩(Vibe Coding)'**입니다. 코드를 직접 한 줄 한 줄 타이핑하는 대신, AI에게 내 비전과 목적을 전달하여 코드가 스스로 생성되도록 통제하는 개발 방식이죠. 하지만 많은 이들이 이 놀라운 도구를 쥐고도 실패를 경험합니다. "AI한테 홈페이지를 만들어 달라고 했는데, 결과물이 완전히 엉뚱하게 나와요"라는 탄식이 도처에서 들립니다. 이유는 단순합니다. **"입력 품질이 출력 품질을 결정한다(Garbage In, Garbage Out)"**는 원칙 때문입니다. AI 코딩 시대에 기획의 가치는 소멸한 것이 아니라, 오히려 성공과 실패를 가르는 절대적인 열쇠로 부각되고 있습니다. 이번 글에서는 서비스 기획부터 배포까지 AI..

2026.07.06 - [바이브코딩] - #1 REST API란? 앞서 REST API가 무엇인지 알아보았는데 실제로 PHP를 통해 어떻게 구현하는지 간단한 사례를 보겠습니다.server.php와 client.php 2개의 파일을 미리 만들고 구글 안티그래비티에서 실행하도록 시켜봤습니다. 작업을 시키면 안티그래비티에서 로컬 서버를 띄우고, 브라우저 상에서 테스트를 하고 스크린샷까지 찍어서 보고서를 만들어줍니다. 구동방법은 터미널을 열고 php -S localhost:8000 server.php 를 입력합니다. 1, "name" => "아메리카노", "price" => 3000], ["id" => 2, "name" => "카페라떼", "price" => 3500] ]; // JSO..

현대 웹개발에서 REST API 사용은 필수라고 이야기합니다.REST API는 무엇이고 왜 써야하는지 알아보겠습니다. https://youtu.be/5Z0PI5j_kxs?si=XURX-yJMJhKaBKLK REST API(Representational State Transfer API)는 웹의 창시자 중 한 명인 로이 필딩(Roy Fielding) 박사가 2000년 그의 박사 학위 논문에서 제시한 인터넷 지향 소프트웨어 아키텍처 스타일이자 설계 원칙입니다.쉽게 말해, 두 개의 서로 다른 소프트웨어가 웹의 통신 규약인 **HTTP(Hypertext Transfer Protocol)**를 활용하여 가장 효율적이고 직관적으로 데이터를 주고받을 수 있도록 정의한 약속이자 규칙 모음입니다.REST API를 ..