Web과 프로그래밍 언어/JavaScript25 [SVELTEKIT] 스벨트킷을 시작해보자! (youtube) svelte kit은 공식 홈페이지의 자료와 youtube 강의를 참고했습니다.우선 youtube 강의 내용을 정리한 것부터! 레이아웃src/+page.svelte 파일 내에서 html 문법 그대로 작성하면됨- css 디자인이나 html 레이아웃 작성, 기능을 넣고 싶을 때에는 script tag 열어서 js 코드 작성 라우팅1) "/about 접속 시 다른 페이지를 보여주고 싶다?"-> src/routes 내에 about 이라는 이름의 폴더 생성-> about 폴더 하위에 +page.svelte 이름의 파일을 만든 후 작성하면 http://localhost:5173/about 주소로 접근 시 about 화면 출력된다2) "메뉴바 등과 같이 모든 페이지에서 보여지는 contents를 하나하나 하드코딩 .. 2023. 3. 24. [SVELTE] Special tags- The @debug tag, HTML tags special tag 1. the @debug tag {@debug user}Hello {user.firstname}! 2023. 3. 17. [SVELTE] Module context- Sharing code, Exports Module context 1. Sharing code {title} {composer} / performed by {performer} let current는 현재 재생되는 오디오를 저장하고 있으며, stopOthers 함수로 현재 실행되고 있는 오디오가 현재 인스턴스에서 실행되는 오디오가 아니라면 일시정지시켜준다. 2. exports stop all audio {title} {composer} / performed by {performer} const elements에는 이제까지 등록된 오디오들이 저장된다. stopAll 함수는 내에서 export 되었기 때문에, 부모 컴포넌트에서 stopAll를 import하여 사용할 수 있다. 2023. 3. 17. [SVELTE] Special elements - svelte:self, component, element, window, window bindings, document, body, head, options, fragment Special elements 1. svelte:self 는 컴포넌트가 재귀적으로 자신을 포함할 수 있게 하는 요소이다. 폴더 트리구조와 같은 형태를 표현해야 할 때 유용하다. {name}{name}{#if expanded} {#each files as file} {#if file.files} 이지만 자기 자신을 import 하는 것은 불가능 하기 때문에 .. --> {:else} {/if} {/each} {/if} 2. svelte:c.. 2023. 3. 17. 이전 1 2 3 4 5 ··· 7 다음
