여느떄처럼 코딩하고 있었는데, prettier 설정을 잘못 건드린건지 .svelte 에서만 prettier 가 적용되고, .ts 파일에서는 적용이 되지 않는 현상이 있었다. 일단, prettier 가 적용이 안되면 다음과 같은 명령으로 prettier 가 정상 작동중인지 확인해보자.npx prettier --write . 이 코드를 실행하니 아니나 다를까, 다음과 같이 에러가 발생했다. 에러를 보니 svelteSortOrder 에러이다. prettirrc 파일에서 저 옵션을 건드려주자.본문에서는 저 옵션을 scripts-markup-styles-option 로 수정하니 정상작동하였다. 그리고 방금 실행한 명령어를 다시 입력하면 다음과 같이 pritter 가 실행된다. 다시 코드를 작성하면 prettier..

sveltekit 기반 프로젝트 진행 중, server.ts 부분에서 redirect 를 추가하고 build 하니 다음와 같은 에러가 발생했다. 서칭 결과, 이 오류는 해당 경로(또는 상위 레이아웃, 페이지의 경우)가 export const prerender = true로 설정되었지만, 사전 렌더링 크롤러가 그 페이지를 찾지 못해 사전 렌더링이 되지 않았기 때문에 발생한다고 한다. 이러한 경로들은 동적으로 서버 렌더링될 수 없기 때문에, 사용자가 해당 경로에 접근하려고 할 때 오류가 발생할 수 있다.이를 해결하는 방법은 다음과 같다.  SvelteKit의 config.kit.prerender.entries 또는 entries 페이지 옵션에서 링크를 따라 해당 경로를 찾을 수 있도록 설정.동적 경로(즉, ..

저번 시간에는 스벨트란 무엇인지, 그리고 스벨트 Template 설치에 대해서 알아보았습니다. 이번 시간에는 스벨트에서 사용하는 문법에 대해서 간단히 알아보도록 하겠습니다. svelte 기본 구성 기본적으로 하나의 svelte 파일 내에서 script 태그, html 태그, style 태그를 사용할 수 있습니다. Html 태그에서 {} 를 사용하면 js 문법이 사용 가능합니다. (선언적 렌더링 가능) 예시 코드 bind 데이터의 양방향 연결(양방향 데이터 바인딩) –단방향 바인딩 앞에 bind: 를 붙여준다. => ex) input 에서 값을 입력하면 다른 태그의 값도 바뀐다. on:input 과 value 로 묶어주는 역할을 bind: 하나로 수행 가능 // 일반적인 방법 {text = e.target..

svelteKit 에서 npm run dev 로 테스트를 하려고 하면 localhost 에서만 접속이 가능한데, package.json 에서 명령어 하나만 수정해주면 컴퓨터 ip 를 통해서 접속이 가능하다. package.json 의 scripts 에서 dev 명령어를 아래와 같이 수정해주면 컴퓨터 ip 를 통해서도 접속이 가능해진다. ( --host 0.0.0.0 를 추가 )

스벨트로 하이브리드 앱을 만들 때, adapter-static 을 사용하는데, 아래와 같은 에러가 발생하여 기록을 남기고자 글을 남깁니다. @sveltejs/adapter-static: all routes must be fully prerenderable, but found the following routes that are dynamic: 이 에러는 해당 페이지에 prerender 설정이 되어있지 않아서 발생하는 에러로, 해당 route 에 +page.ts 파일을 만들고, export const prerender = true; 로 설정해주면 해결된다.