[Tutorial] Part 3-3. Forms
1. The element 목표: to-do 앱을 만들어보자. 일단 lib/server/database.js에 in-memory DB가 있다고 가정하자. // In a real app, this data would live in a database, // rather than in memory. But for now, we cheat. const db = new Map(); export function getTodos(userid) { if (!db.get(userid)) { db.set(userid, [{ id: crypto.randomUUID(), description: 'Learn SvelteKit', done: false }]); } return db.get(userid); } export fun..
[Tutorial] Part 3-1. SvelteKit, Routing, Loading
1. What is SvelteKit? Svelte: 컴포넌트 프레임워크 SvelteKit: 앱 프레임워크 SvelteKit이 제공하는 기능 Routing 서버 렌더링, 서버 작업 Data fetching 등등... 2. Routing SvelteKit은 파일 시스템 베이스 라우팅을 사용한다: 즉, URL로 라우팅한다. home about home this is the home page. about을 누르면 -> about으로 이동(about 폴더 속의 +page.svelte로 이동) 서로 다른 페이지들이 공통 UI를 공유하는 경우, +layout.svelte로 같은 경로에 있는 라우터들이 UI를 공유할 수 있다. 예를 들어 +layout.svelte에 다음과 같이 공동으로 쓸 컴포넌트를 넣으면 하위 폴..
[Tutorial] Part 1-4. Logic
1. If blocks Log in 버튼을 눌렀을 때 -> Log out 버튼으로 변경 Log out 버튼을 눌렀을 때 -> Log in 버튼으로 변경 {#if user.loggedIn} Log out {/if} {#if !user.loggedIn} Log in {/if} # 기호: Block opening tag를 의미 / 기호: Block closing tag를 의미 : 기호: Block continuation tag를 의미 2. Else blocks if user.loggedIn과 if !user.loggedIn은 mutually exclusive이기 때문에 else 블록을 사용할 수 있다. {#if user.loggedIn} Log out {:else} Log in {/if} 3. Else-if ..
[Tutorial] 1-3. Props
Props란: - 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터(Properties) - export: 하위 컴포넌트로 데이터 전달 - import: 하위 컴포넌트에서 props 받아서 사용 1. Declaring props 1-1. Nested.svelte: answer라는 속성을 받아서 이 값을 출력하는 역할. The answer is {answer} 1-2. App.svelte: answer를 import로 들고와서 answer를 42로 설정 -> Nested.svelte에서 이 속성을 받아서 화면에 출력함 2. Default values 기본값을 명시할 수 있다. The answer is {answer} 3. Spread props object prop를 출력할 때: 하나씩 명시하는 것 대신 ..
[Tutorial] Part 1-2. Reactivity
1. Assignments on: 이벤트이이름 = "{핸들러함수}" : 이벤트 리스너 등록 이벤트 이름에는 click, change와 같은 DOM event가 들어간다. 버튼을 누를 때마다 숫자 증가 Clicked {count} {count === 1 ? 'time' : 'times'} 2. Declarations 다른 반응성 declarations를 사용하여 변수를 동기화할 수 있다. $ 표현식: 반응성 변수/함수에 사용 선언형 문법: 리액티브 변수를 정의(변수가 변경될 때마다 자동으로 업데이트 된다.) 아래의 코드와 같이 count값이 바뀔 때마다 업데이트되는 doubled를 정의할 수 있다. 실행형 문법: 참조된 값이 변경될 때마다 $: 의 자바스크립트가 실행된다. 예를 들어) $: console...
[Tutorial] Part 1-1. Introduction
1. Adding data Hello world 대문자로 출력하기 Hello {name.toUpperCase()}! 2. Styling p element에 스타일 추가하기 This is a paragraph. 3. Nested components 모든 컴포넌트를 하나의 파일에 넣는 건 비효율적이다. 다른 파일에서 컴포넌트를 import해서 들고오자. .svelte 파일: HTML, CSS, JS를 캡슐화한 코드를 가짐. 이 코드 블럭들은 재사용 가능. 3-1. Nested.svelte 파일: p 컴포넌트 This is another paragraph. 3-2. App.svelte: Nested를 가져와서 화면에 넣음 이때 Nested는 p 컴포넌트이지만 App.svelte의 style에 영향을 받지 않는..
