WebApp
-
스벨트킷(SvelteKit) 프로젝트 구조 - 03SvelteKit 2024. 9. 29. 18:41
이번 글에서는 이전 강좌에서 만들어본 간단한 SvelteKit 애플리케이션의 파일과 폴더 구조에 대해 하나씩 살펴보도록 하겠습니다. 이미 "Hello World" 애플리케이션을 생성하고 실행하는 방법을 배웠으니, 이제 그 프로젝트 안에 포함된 파일들이 어떤 역할을 하는지 간단히 알아보겠습니다.프로젝트 디렉토리 구조 살펴보기먼저, VS Code에서 "Hello World" 프로젝트를 열면, 루트 디렉토리에는 아래 그림과 같이 폴더들과 파일들이 보일 것입니다. 1. package.json 파일이 파일은 Node.js 프로젝트에서 매우 중요한 역할을 하며, 프로젝트의 의존성(Dependencies) 및 실행 스크립트를 정의합니다.의존성: SvelteKit과 Svelte 관련 패키지가 여기에 나열되어 있습니다..
-
스벨트킷(SvelteKit) 프로젝트 시작하기 - 02SvelteKit 2024. 9. 29. 14:10
스벨트킷(SvelteKit)을 사용해 애플리케이션을 처음부터 만드는 과정을 알아보겠습니다. 이 과정에서는 개발 환경을 설정하는 방법부터 기본적인 애플리케이션을 실행하고 수정하는 방법까지 다룹니다.1. 개발 환경 설정하기스벨트킷을 사용하기 위해선 두 가지가 필요합니다:Node.js 설치개발툴(IDE) 선택1.1 Node.js 설치Node.js는 스벨트킷을 실행하는 데 필수적입니다. Node.js를 설치하려면 nodejs.org로 가서 최신 안정 버전을 다운로드하고 설치하세요.이미 설치되어 있다면 최신 버전으로 업데이트하는 것이 좋습니다.1.2 개발툴(IDE) 선택텍스트 에디터로는 VS Code를 추천합니다. code.visualstudio.com에서 VS Code를 다운로드하고 설치하세요.2. 프로젝트 폴..
-
스벨트킷(SvelteKit) 초보자를 위한 강좌-01SvelteKit 2024. 9. 27. 22:03
안녕하세요! 오늘은 스벨트킷(SvelteKit) 초보자를 위한 강좌 시리즈 첫 번째 글로, 스벨트킷이 무엇인지, 왜 배워야 하는지, 그리고 시작하기 위해 필요한 사전 준비 사항에 대해 알아보겠습니다.스벨트킷은 최근 웹 개발에서 큰 주목을 받고 있는 프레임워크로, 특히 성능 최적화와 개발 생산성 측면에서 강력한 장점을 가지고 있습니다. 이 글을 통해 스벨트킷의 핵심 개념을 이해해 보도록 하겠습니다. 그럼 바로 시작해보시죠!스벨트(Svelte)란 무엇인가?스벨트는 리액트(React)나 뷰(Vue)와 같은 사용자 인터페이스를 구축하는 프레임워크입니다. 하지만 가장 큰 차이점은 빌드 타임에 JavaScript 코드를 생성한다는 점입니다.일반적으로 리액트나 뷰는 브라우저에서 많은 작업을 처리하지만, 스벨트는 애플..