반응형 Svelte14 Svelte URL 파라미터 사용 특정 검색 내용을 페이지로 넘겨서 지속적으로 제공하고자 하는 경우 URL 파라미터를 이용하게 되는데, Svelte역시 이를 활용할 수 있다. svelte-spa-router를 사용하여 어떻게 URL 파라미터를 사용할 수 있는지 알아보자. GitHub - ItalyPaleAle/svelte-spa-router: Router for SPAs using Svelte 3 Svelte에서 SPA를 구성하는 방법은 아래 링크에서 확인하기 바란다. Svelte - SPA routes 설정 (asecurity.dev) SPA 구성을 완료하고 이제 URL 파라미터를 사용하고자 한다면, 사용하고자 하는 페이지에 svelte-spa-router에서 제공하는 querystring 을 이용하여 구성할 수 있다. The curr.. 2022. 3. 31. Google Font 사용/적용하기 Google에서는 웹 개발에 사용할 수 있는 다양한 폰트를 무료로 제공하고 있다. 오늘은 해당 폰트를 사용하는 방법에 대해서 간단히 정리해보도록 하겠다. 구글 폰트를 사용하기 위해서는 먼저 구글 폰트 사이트로 접속을 한다. Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 접근을 하게 되면 현재 Google에서 이용할 수 있는 폰트를 확인할 수 있으며, 보통은 자주 사용하는 폰트에 대해서 검색을 통해서 확인 할 수 있지만, Sort 기능을 이용해서 최신 Trend에 맞는 폰트라거나, 최신(Newest)등을 선택해서 정렬과 Ca.. 2022. 3. 31. Svelte - SPA routes 설정 Web은 우리가 특정 사이트의 페이지를 방문하면 해당 페이지의 모든 내용을 서버에 요청을 하고 응답 받아 화면에 보여주는 하나의 사이클로 연결성이 없는 단일 요청 방식으로 구성되어 있다. 이렇다 보니 페이지를 요청할 때, 다양한 웹 화면에 구성된 이미지를 비롯해서 모두 새로 가져오기 때문에 서버에서는 적지 않은 부담이 된다.(브라우저에서 캐쉬를 가지고 있다고 하더라도 여러 사용자가 이와 같은 페이지 전체 요청을 하는 경우 서버에게 큰 부담이 될 수 밖에 없다.) 하지만 Front-End의 기술이 발전하면서, 실제 요청시 필요한 데이터만 요청을 하는 방식을 통해 보다 서버의 부하를 줄이고, 효율적으로 사용할 수 있는 방식이 개발 되었고, 이를 SPA(Single-Page-Application)이라고 한다... 2022. 3. 30. Svelte - 쓸만한 OpenSource Editor 찾기 2022년 기준으로 Svelte에서 사용해볼 만한 Editor가 어떤것이 있는지 확인한 내용들을 정리해 본다. 필자 기준으로 Editor를 사용할 때 글쓰는것은 대부분 WYSIWYG( 위지위그: What You See Is What You Get, "보는 대로 얻는다")이라고 하는 기능을 마크다운 기준으로 대부분 지원을 해주기 때문에 이부분 보다는 조금은 고급 기능이라고 할 수 있고, 필자가 평상시 기본값에서 편집기를 이용할 때 주요하게 본 기능중 몇가지를 살펴보았고, 해당 기능은 다음과 같다. 1. 클립보드 그림 붙여넣기 그림 파일은 Base64로인코딩을 해서 실체 본문에 포함하는 것이 가능하다. 이러한 기능을 이용해서 많은 에디터들이 그림을 클립보드에서 바로 붙여넣기가 가능했고, 편리하게 웹에서 문서.. 2022. 3. 28. Svelte - Windows 환경 구성 NodeJS, Git, Visual Studio Code Svelte 라는 언어를 사용하기 위해서 윈도우에 환경을 구성한 내용을 정리해 본다. 정리에 앞서 필요한 내용은 다음과 같다. NodeJS Visual Studio Code Git 1. NodeJS 설치 아래 링크에서 설치가 가능하다 설치시 특별히 지정할 추가 옵션은 없으나, Add to PATH를 지정해야 명령 프롬프트에서 명령어 사용이 가능하므로, 이 부분을 꼭 포함해서 설치하기 바란다. Next를 통해 설치를 누르면 된다. 다운로드 | Node.js (nodejs.org) 명령 프롬프트에서 npm 명령을 사용해, 설치가 정상적으로 되었는지 확인하자. 정상적으로 설치가 되었다면, 아래 그림과 같이 현저 설치된 버전을 확인할 수 있다. npm -v 2.Visual Studio Code 설치 대부분의 개.. 2022. 3. 27. 이전 1 2 다음 반응형
