JAN's History

최근 혼자서 사이드 프로젝트를 하고 있는데 SvelteKit를 사용하기로 했다.이유는 SSR를 사용해보고 싶었기 때문인데, 내 프로젝트는 화면도 적고 정~말 단순한 프로젝트라서 CSR를 할 필요가 없다고 느꼈고, SEO가 더 중요했기 때문이다.SvelteKit를 처음 사용해보기도 하고 CSR만 항상 사용해봤던지라 SvelteKit에서 SSR이 어떻게 동작하는지 알아보고자 정리해본다!먼저 SvelteKit을 처음 프로젝트에 시작하면 이렇게 routes에 +layout, +page.svelte가 보인다.SvelteKit의 파일 기반 라우팅SvelteKit은 파일 기반 라우팅과 통합 서버를 통해 SSR을 자동으로 처리한다.위 +layout은 React에 App.svelte처럼 공통 컴포넌트를 렌더링해야할 때 ..

이미 Svelte의 bind 문법에 대해서는 한번 다룬적이 있는데요! (아래 참고) Svelte의 bind 문법 완전 정복! 양방향으로 값을 주고받자! 🙌1. Svelte에서의 bind란?자, Svelte에서 bind는 양방향 데이터 바인딩을 가능하게 하는 아주 중요한 도구인데요. 여기서 양방향 바인딩은 Two-way Binding이라고 불리는데, 말 그대로 값을 주고받는 과정?shinjaeeun.tistory.com공부하다보니 조금 헷갈렸던 부분이 있어서 함께 공유해보고자 합니다. ㅎㅎ1. bind 문법이란?Svelte에서 bind는 매우 강력한 기능으로, UI 요소의 값과 JavaScript 변수 간에 양방향 데이터 바인딩을 쉽게 해줍니다. 즉, UI에서 값이 바뀌면 변수도 즉시 업데이트되고, 반대..

1. Slot이란 무엇인가요?Svelte에서 slot은 하위 컴포넌트가 상위 컴포넌트에서 어떤 내용을 채워넣을지 정의할 수 있게 하는 기능이에요. 즉, 하위 컴포넌트의 특정 영역을 비워두고, 상위 컴포넌트에서 그 안에 들어갈 내용을 동적으로 넣어줄 수 있다는 것이죠!간단히 말해서, 컴포넌트의 특정 부분을 동적으로 채울 수 있도록 빈 공간을 제공하는 거예요. 이렇게 하면 하위 컴포넌트를 재사용할 때 다양한 방식으로 활용할 수 있게 됩니다.2. Slot을 언제 사용할까요?반복적으로 쓰이는 컴포넌트를 재사용할 때: 예를 들어, 버튼 컴포넌트나 카드 컴포넌트 같은 것들을 만들 때, 내부의 콘텐츠만 달라지고 나머지 구조는 동일하다면, slot을 이용해 콘텐츠를 동적으로 채워넣을 수 있어요.동적으로 변경될 수 있는..

이번에는 Svelte 컴포넌트의 생명주기(Lifecycle) 함수인 onMount, onDestroy, beforeUpdate, afterUpdate에 대해 설명드릴게요. 이 함수들이 언제, 왜 필요한지와 메모리 관리와 관련된 내용까지 자세히 다뤄볼게요. 😊1. 컴포넌트 생명주기란?Svelte의 컴포넌트 생명주기(Lifecycle)는 컴포넌트가 생성되고 나서 화면에 나타나기까지, 또 사라지기까지 거치는 여러 단계들을 말해요. onMount, onDestroy, beforeUpdate, afterUpdate 같은 생명주기 함수들은 각각 특정 시점에서 자동으로 호출되어, 개발자가 컴포넌트의 상태나 DOM 요소들을 효과적으로 제어할 수 있게 도와줘요. 중요한 건, 이 함수들은 우리가 직접 호출하지 않아도 S..

이번에는 Svelte에서 제공하는 Transitions 기능에 대해 알아볼게요! 이 기능을 사용하면 컴포넌트나 요소가 화면에 나타나거나 사라질 때 애니메이션 효과를 정말 간단하게 추가할 수 있어요. in, out, 그리고 transition과 같은 키워드들을 이용해서 다양한 방식으로 화면 전환을 구현할 수 있답니다. ㅎㅎ1. Transitions란 무엇인가요?Svelte의 Transitions는 요소가 화면에 나타날 때, 사라질 때, 혹은 상태가 변경될 때 애니메이션을 적용할 수 있는 기능입니다. 요소가 변화할 때 자연스럽고 시각적인 피드백을 줄 수 있기 때문에 사용자 경험을 향상시키는 데에 많이 활용돼요.2. Transition의 종류Svelte에서 사용할 수 있는 Transition의 종류는 크게 두..

1. Svelte에서의 bind란?자, Svelte에서 bind는 양방향 데이터 바인딩을 가능하게 하는 아주 중요한 도구인데요. 여기서 양방향 바인딩은 Two-way Binding이라고 불리는데, 말 그대로 값을 주고받는 과정? 같은 거라고 생각하면 쉬워요. 사용자가 입력한 값이 즉시 변수에 반영되고, 그 변수의 변화도 화면에 실시간으로 나타나는 거예요.이걸 좀 더 쉽게 말하자면, 사용자가 input에 뭔가를 입력하면 그 값이 곧바로 자바스크립트 변수에 저장되고, 그리고 그 변수 값이 변하면 다시 화면에도 바로 반영되는 것처럼 svelte에서도 완전히 실시간으로 상호작용이 가능한 것으로 생각하면 됩니다!JavaScript에서의 bind는?JavaScript의 bind()는 함수와 관련된 용어예요. 특정 ..

1. Svelte에서 $로 값의 변화를 감지하고 업데이트하는 방법Svelte에서 $는 변수의 변화를 실시간으로 감지하고 화면에 바로 업데이트하는 역할을 해요. Svelte는 변수가 바뀌면 그 값을 다시 그려주기 때문에, 우리가 화면을 다시 새로고침할 필요가 없어요. 이 기능 덕분에 우리는 매우 간편하게 화면을 관리할 수 있게 됩니다. Svelte는 반응형(Reactive) 프로그래밍 방식을 가지고 있어요. 즉, 변수의 값이 바뀌면 자동으로 화면에 반영돼요. 여기서 중요한 게 $입니다. $는 반응형 선언문으로, 값이 바뀌었는지 계속 감시하고, 변하면 화면을 자동으로 업데이트해줘요.예시 코드 (숫자를 증가시키는 버튼 예시)현재 숫자: {count}숫자 증가if 문과 함께 사용하는 예시여기서 if문을 사용해 ..

안녕하세요! 오늘은 Svelte에서 상태 관리를 어떻게 하는지에 대해 이야기해볼 거예요. Svelte의 스토어는 여러 컴포넌트에서 데이터를 공유하고 관리하는 데 매우 유용한 도구랍니다. 그럼 하나씩 알아볼까요? 😊1. 부모 컴포넌트에서 자식 컴포넌트로 값 전달하기부모 컴포넌트의 데이터를 자식 컴포넌트와 공유하고 싶을 때는 setContext와 getContext를 사용해요. 이 두 함수를 사용하면 아주 쉽게 데이터를 전달할 수 있어요.1.1. setContext와 getContext 사용하기setContext(key, value): 이 함수는 부모 컴포넌트에서 사용할 데이터와 키를 설정해요. 이때 key는 데이터에 접근하기 위한 고유한 식별자 역할을 하고, value는 공유하고자 하는 데이터입니다.ge..