괘종소리 세기

Sveltekit은 프론트와 서버 모두 개발할 수 있는 풀스택 프레임워크입니다. 그래서 이번 포스팅에서는 Rest API로 프론트에서 요청을 받고 응답을 주는 서버를 만들어보도록 하겠습니다. 핸들러가 들어갈 파일의 이름은 +server.js 라고 설정해주어야 합니다. api라는 디렉토리를 하나 생성합니다. 디렉토리 이름은 아무거나 하셔도 무방합니다. 그 디렉토리 아래에 +server.js 파일을 생성해주었습니다. // +server.js export function GET() { return new Response("Hello, World!"); } 그리고 GET 요청을 받을 수 있는 핸들러를 만들어줍니다. (함수명은 고정입니다) 참고로 위 내용이 +server.js 코드의 전문입니다. 보일러플레이트가 ..

1. +page.js Sveltekit에는 각 페이지마다 환경을 할 수 있는 +page.js라는 파일을 만들 수 있습니다. schedule이라는 페이지의 컴포넌트와 같은 레벨에 +page.js를 넣어주면 되는데요, 여기서 설정할 수 있는 것들을 대표적인 것만 짧게 소개해 드리겠습니다. - SSR, CSR 방식 선택 Sveltekit은 속도를 빠르게 하기 위해 초기 페이지 렌더링 시에는 SSR, 그 후에는 CSR로 동작한다고 저번 포스팅에서 다룬 바 있습니다. 그래서 기본적으로 두 가지 방식이 모두 사용되고 있는데요, +page.js에서는 이 둘 중 하나만 사용하도록 할 수 있습니다. export const ssr = false; 간단히 위 한 줄만 입력하면 페이지를 CSR 방식으로만 동작하도록 할 수 있..

이제 Sveltekit으로 넘어오겠습니다. Svelte와 Sveltekit이 뭐가 다른지는 아래 포스팅을 보고 오시면 되겠습니다. [Svelte] Svelte와 Sveltekit의 차이점 Svelte와 Sveltekit은 어떻게 다를까? Svelte 공식 홈페이지에선 Sveltekit을 권장하고 있는데, 어떻게 다른지 알아보았습니다. 읽기 전에, SSR과 CSR에 대해 생소하시다면 아래 게시물을 읽어보시는 것을 doringri.tistory.com Sveltekit은 Next.js처럼 폴더 라우팅 방식을 사용합니다. Next.js를 다뤄보지 않으신 분들이라면 생소한 방식일 수도 있는데요, 디렉토리 구조를 통해 프레임워크에서 자동으로 페이지 라우팅을 해주는 방식입니다. Sveltekit의 경우에는 rout..

이번에는 Svelte에서 컴포넌트 간 값을 전달 및 공유하는 방법에 대해서 알아보겠습니다. 방법에는 크게 4가지가 있습니다. 1. props (상위→하위로 상태값 전달) {name} 상위 컴포넌트에서 하위 컴포넌트로 state 값을 전달합니다. React의 props와 사용법이 거의 똑같습니다. 다만 중요한 것은, 하위 컴포넌트에서 반드시 export let [props명] 으로 받아야 합니다. 2. dispatch (하위→상위로 이벤트 발생 알림) 개인적으로 React에서 Angular에 비해 아쉬웠던 게 하위에서 상위 컴포넌트로 값을 전달할 때였는데요, setState라는 제한적인 방법을 통해서만 통신할 수 있다는 점이 여러모로 불편했었던 기억이 있습니다. 반면 Svelte에서는 이 dispatch라..

이번엔 Svelte에서 HTML 템플릿을 제어하는 방법에 대해 알아보겠습니다. React, Vue, Angular 등 이미 학습하신 프레임워크가 있다면 비교하는 것도 좋을 것 같습니다. 1. #if {#if message} {message} {:else } 메시지가 없습니다. {/if} message라는 state의 값이 존재한다면 2번째 라인의 템플릿을, 그렇지 않다면 else 아래의 템플릿을 표시합니다. 직관적인 if-else 문이라 가독성이 좋다는 특징이 있습니다. 2. #each {#each schedules as schedule} {schedule.type} {schedule.name} {:else } 스케줄이 없습니다. {/each} 리스트 안의 요소들을 차례로 순회하는 반복문입니다. Reac..

이번 포스팅에서는 Svelte의 state와 반응형 선언에 대해 알아보겠습니다. 1. state 선언하기 Svelte에서 state를 선언할 때는 아래와 같이 간단하게 선언합니다. let count = 0; 자바스크립트 일반 변수를 만들듯이 선언하지만, 리액티브하게 동작하는 엄연한 state입니다. 그래서 message의 값이 변하면 HTML 템플릿에서도 바로바로 반영이 됩니다. 2. 반응형 변수 반응형 변수란 state값이 변할 때마다 이를 자동 감지하여 함께 변경되는 변수입니다. 달러($) 표시를 통해 선언하며, let이나 const 같은 키워드는 사용하지 않습니다. $: double = count * 2; double이라는 반응형 변수를 선언했습니다. 이 변수는 count라는 state의 값이 변할..

Svelte와 Sveltekit은 어떻게 다를까? Svelte 공식 홈페이지에선 Sveltekit을 권장하고 있는데, 어떻게 다른지 알아보았습니다. 읽기 전에, SSR과 CSR에 대해 생소하시다면 아래 게시물을 읽어보시는 것을 추천드립니다. [IT] SSR과 CSR의 차이점 프론트엔드 개념 중 많이 헷갈리는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)에 대해 알아보겠습니다. SSR 일반적으로 MPA(Multi Page Application)에서 사용합니다. MPA는 각 페이지마다 파일이 존재하 doringri.tistory.com Svelte React와 같은 프론트엔드 프레임워크 기본적으로 CSR(Client Side Rendering) 로 동작함 ..

얼마 전에 Svelte 관련 세미나를 진행했었습니다. 그래서 여러가지로 조사하고 공부도 했었는데 그때 세미나 내용을 정리하고 다시 되새김질도 할 겸 블로그에 정리합니다. Svelte란? Svelte는 2016년 출시된 SPA(Single Page Application) 프레임워크입니다. 유명한 SPA 프레임워크의 종류로는 잘 알고 계실 React, Vue, Angular가 있습니다. Virture DOM을 사용하지 않는다 위의 세 가지와 Svelte의 큰 차이점이 있는데요, 바로 Virture DOM(가상 돔)을 사용하지 않는다는 겁니다. 가상 돔을 사용하는 이유는 웹 어플리케이션의 속도를 빠르게 하기 위해서인데요, 놀랍게도 Svelte는 가상 돔을 사용하지 않고도 가상 돔을 사용하는 다른 프레임워크들과..