반응형 Web/Svelte6 Svelte 와 SvelteKit 비교 우리는 Svelte를 사용할 때 Svelte와 SvelteKit를 별도로 구분하지 않지만, 실제로는 Svelte와 SvelteKit은 조금은 다르다고 할 수 있다. Svelte는 코어적인 부분을 담당하고, Sveltekit은 코어 위에 올라가는 프레임워크라고 할 수 있다. .Net으로 생각한다면, .Net Framewark 위에 MVC 가 존재하는 그림이라고 할 수 있다. Svelte는 JavaScript를 기본적으로 사용하는 프레임워크이다. 그렇다보니 Svelte 자체만 사용해서는 완성도 높은 웹(다양한 동작을 하는)을 구성하기에는 태생적으로 한계가 있다고 할 수 있다. SvelteKit을 이용하지 않을 때에는 vite를 이용하여 빌드하면 SvelteKit을 제외하고 사용이 가능하다. Svelte 빌드.. 2024. 3. 13. Java - 비구조화 할당(Unpacking) 이해, 예제 포함 Java에서는 비구조화 할당이라는 기능을 제공하는데, 고급 개발 언어인 이유중 하나가 바로 비구조화 할당이라고 할 수 있다. Python에서도 제공하는 기능이지만 비구조화된 할당을 사용하면 다음과 같은 장점을 가지게 된다. 코드 가독성 향상 당연한 거지만 비구조화 할당은 코드를 더욱 간결하고 읽기 쉽게 만들어 줍니다. 변수명이 길거나 복잡한 객체를 다룰 때 유용하게 사용할 수있다. 코드 중복 제거 비구조화 할당을 사용하면 불필요한 중복 코드를 제거할 수 있는데, 반복적(for 문과 같이)인 객체의 속성을 추출해서 변수에 저장할 때 객체명을 계속해서 입력하는 것을 방지할 수 있다. 속도 향상 비구조화 할당은 작은 메모리 객체에서 더욱 효율적이다. 이유는 객체의 속성을 개별 변수로 바로 할당하기 때문이다. .. 2024. 3. 10. Svelte 3.5 2023년 하반기 업데이트 주요 기능 하이라이트 2023년 하반기에는 Svelte가 3.5로 업데이트하면서, 동시에 SvelteKit를 1.0을 발표하였다. 아래와 같은 주요한 업데이트가 있다고 하니 3.5버전을 적극적으로 사용해보고 싶다. SvelteKit 1.0 출시: 완전히 새롭게 디자인된 라우팅 시스템: 더 빠르고 유연하며 강력한 기능으로 새로운 라우팅 API 및 파일 기반 라우팅 제공 새로운 엔드포인트 API: 서버 측 렌더링 및 정적 사이트 생성 지원 향상된 Vite 통합: Vite 기반 빌드 시스템으로 빠른 빌드 속도 및 향상된 개발 경험 제공 새로운 adapter API: 다양한 플랫폼에 SvelteKit 애플리케이션을 배포 가능 Svelte 3.5 출시: 새로운 svelte.config.js 파일: Svelte 컴파일러 및 Vite 설.. 2024. 3. 10. Svelte - 3.x 2023 상반기 업데이트 new feature 하이라이트 필자가 좋아하는 Svelte 가 2023년 상반기에 주요한 업데이트 내용을 정리해 보았다. 현재 5월 기준 아래와 같은 기능 개선이 있었다. Improve detection of promises that are also functions (Svelte 3.55.1, #8162) Add missing types and properties for the global part attribute and on:submit, respectively (Svelte 3.55.1, #8181) Lots of performance and bug fixes (Svelte 3.55.1* and extensions-107.0.x) 2023년 4월에는 대부분 기능 개선의 업데이트만 존재한다. svelte/elements has .. 2024. 3. 10. Svelte - TinyMCE 사용하기, 주요 옵션들 TinyMCE는 Svelte에서 활용할 수 있는 가장 유용한 Editor중 하나이다. 실제 필자가 Svelte에서 사용할 만한 Editor를 비교한 글을 작성한 적이 있는데, 그중 당연히 제일 좋았던 기억이 난다. 기본 사용 먼저 가장 기본적으로 사용할 수 있는 코드는 아래와 같다. 먼저 npm을 이용해서 개발 의존성 모드로 tinymce-svelte 를 설치한다. npm i -D tinymce-svelte 설치가 완료되면, App.svelte와 같이 tinymce-svelte를 사용하고자 하는 svelte 파일에 아래내용을 기입하면 기본적으로 동작할 준비가 완료된다. Hello Tiny 위 코드를 저장하고, 콘솔에 npm run dev를 실행해서 정상적으로 나오는지 확인해보자. npm run dev 위.. 2024. 3. 2. Svelte - ko, en 사용 브라우저 별로 문자열 표시하기 아무래도 사이트를 개발하다보면, 다중언어를 지원해야 하는 상황이 종종 발생한다. 여기에서는 Svelte를 이용해서 다중 언어을 지원하는 가장 효율적인 방법에 대해서 고민한 내용을 정리해 보도록 하겠다. 다중언어는 필자는 다음과 같은 방식으로 개발할 예정이다. 언어 파일 생성 언어 파일 불러오기 브라우저의 언어를 확인하여 텍스트 출력하기 언어 파일을 생성하는 이유는 추후 관리의 편의성을 위해서 각 언어별로 파일로 생성하여 관리하는 것을 추천한다. 다음은 en.json과 ko.json 파일 생성한 예이다. 1. 언어 파일 생성 en.json { "title": "Hello!", "text": "English Support" } ko.json { "title": "안녕하세요!", "text": "한글 지원" .. 2024. 2. 28. 반응형
