석봉노트 석봉노트

DEV/svelte

• svelte 데이터 불러오기, 불러온 데이터 사용하기

  DEV/svelte 2023. 11. 28. 15:49

  데이터를 불러올 route에 "+page.js" 파일을 생성하고 다음과 같이 데이터를 export한다. 본인은 src/routes/sample 에서 테스트하였다. svelte는 SSR(Sever Side Rendering) 또한 지원하기때문에 클라이언트에 노출되지 않고 사용하고 싶다면 "+page.server.js"로 파일을 생성하면 된다. DB접근이나 API키 사용 등 필요에 따라 사용하면 된다. ref) https://kit.svelte.dev/docs/routing Routing • Docs • SvelteKit Routing Edit this page on GitHub On this page On this page At the heart of SvelteKit is a filesystem-base..

  Read More
• svelte layout?

  DEV/svelte 2023. 11. 28. 15:11

  svelte의 레이아웃은 "+layout.svelte" 파일을 생성하여 적용 가능하다. 아래 예시를 보면 아주 쉽게 이해할 수 있다. ref) https://kit.svelte.dev/docs/routing Routing • Docs • SvelteKit Routing Edit this page on GitHub On this page On this page At the heart of SvelteKit is a filesystem-based router. The routes of your app — i.e. the URL paths that users can access — are defined by the directories in your codebase: src/routes is the ro ki..

  Read More
• svelte route와 page 생성 및 error page

  DEV/svelte 2023. 11. 28. 14:04

  svelte 프로젝트를 생성하면 기본적으로 다음과 같은 구조를 갖는다. (생성 방식에 따라 차이가 있을 수 있음) Routes 폴더에 "+page.svelte" 파일이 기본적으로 존재하며 svelte 로컬에서 나오는 페이지가 "+page.svelte" 임을 확인할 수 있다. 실제로 "routes/+page.svelte" 파일을 수정하면 로컬 브라우저에서 즉시 수정됨을 확인할 수 있다. 작성 방식은 기본적인 html 작성 방식을 따르면 된다. 여기서 확인한 것은 "src/routes/+page.svelte"은 localhost를 의미하는 것이다. 경로 기반 라우팅을 생각하면 된다. 그렇다면 다른 route 설정은 어떻게 할까? 그렇다고 합니다. + error page ref) https://kit.svel..

  Read More
• svelte 시작하기 (npm을 이용하여 svelte app 생성)

  DEV/svelte 2023. 11. 28. 11:48

  우선 svelte app을 생성하기 이전에 node와 npm이 필요하다. 시작 전 Node와 npm을 설치하자. (본인은 오랜만에 npm을 사용하니 버전에 대한 이슈가 있었다. 버전에 대한 에러가 발생하면 최신 버전으로 업데이트 해주도록 하자.) https://seokbong.tistory.com/38 Node js 설치하기 오늘은 node js를 설치하려고 한다. 원래 사용하던 M1 맥에는 이미 설치되어 있고 오랜만에 꺼내 든 2011년식 구형 인텔맥에 설치를 다시 해보려고 한다. (노인학대...) https://nodejs.org/ko/download/ 다운 seokbong.tistory.com Svelte App 생성하기 App을 생성하고 싶은 폴더에 진입하여 다음과 같이 입력. (새로운 프로젝트 ..

  Read More