# sveltekit
svelte 스터디 #5 Events
on 지시어를 이용하여 어떤 이벤트라도 수신할수 있다고 설명한다.이벤트 핸들러를 아래 예제와 같이 인라인으로 선언도 가능하다.따옴표는 선택사항이고, 강조의 의미로 유용하다고 한다.일부 프레임워크는 성능상의 이슈로 인라인 핸들러를 지양하지만,svelte에서는 컴파일러에서
svelte 스터디#4 Logic
{{/if}로 닫는다. 닫을때는 "{:else} 를 사용하여 else 블럭을 표현한다.{:else if 컨디션} 블럭을 사용하여 else-if 표현을 할수 있다.{{/each}로 닫는다.if 문과 규칙이 동일하다.추가로 as 뒤에 변수를 하나 추가하여 index까지 f
svelte 스터디#3 Props
Declaring Props 지금까지는 내부상태만 다루었다. 즉, 동일 콤포넌트 내에서만 적용된다. 타 컴포넌트로 상태를 전달하기 위해서는 props라고 불리는 properties를 선언해야 한다.
svelte 스터디#3 Reactivity
버튼에 이벤트 핸들러를 연결하고, 변경된 값을 html에 다시 표현하는 예제이다.역시 간다하다.첫번째 예제와 비슷하다.doubled 라는 변수가 count 값이 변경되면서 같이 변경된다.이때, 간접적으로 변경된 변수도 반응성을 보이려면 $: 문법을 사용해서 변수를 선언
svelte 스터디#2 Introduction
svelte는 무엇인가에 대해 소개한다.But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your ap
svelte 스터디#1
스터디 배경 일단 백엔드 개발을 주로 하며, 프론트 알못이다. 백엔드 개발자 이지만 어드민 페이지등 프론트를 어느정도 담당하게 된다. 프론트 개발와 달리 "업무 데이터 처리" 관점에서 조회,입력,수정이 목적이다. 당연히 쉽고, 빠르고면 최고다. 그럼점에서 난 rea
React는 Virtual Dom! Svelte는!?
브라우저 렌더링 과정과 Virtual DOM 브라우저 렌더링 과정 크롬이나 사파리, 파이어폭스 같은 것들을 브라우저라고 한다. HTML 문서는 내가 원하는 웹페이지의 요소들과 그 구조를 마크업으로 작성하여 보낸다. body 태그 안에 header, main, foo
[Svelte] 사랑만하고 사용하지않는 스벨트에 대하여,
좋아한다 사랑한다 해놓고 정작 사용하지 않는 스벨트를 알아보자. 다르다는 건 두렵기도 하지만 때론 기회일 수도 있다. 스벨트를 알아보자.
React 개발자의 Svelte 간단 소감
최근에 SvelteKit으로 아주 작은 서비스를 하나 만들었다. 이에 간단한 소감을 남겨본다.일단 Svelte 에서 즐거웠던 점은 다음과 같다:React 에서의 여러 번잡스럽던 boilerplate 코드들이 한층 간결해졌다. 예를 들어, React에서 useState
[sveltekit] sveltekit에 stroybook 설치
프론트작업해서 넘기고 컴포넌트가 의도대로 사용되지 않는 경우가 많이 발생하여 도입sveltekit 은 @next를 붙여줘야한다아래와 같은 에러가 뜬다면 node-fetch 버전문제라고 한다.storybook > main.cjs > require(...)을 import(
Leaflet with SvelteKit (vite)
SSR 에서 제대로 import 되지 않는 모든 패키지에 참고할 수 있습니다. Leaflet 과 같은 지도 컴퍼넌트는 현재 보고 있는 화면의 크기 및 위치에 따라 클릭 이벤트 등이 연동되어야 하기 때문에 Client 의 window 를 참고해서 동작한다. 하지만 SSR
SvelteKit Hooks + Node Adapter 버그
@sveltejs/kit/hooks 모듈의 sequence 함수 사용 후 단독 서버 실행 시 팅기는 현상이 있다. 현재 버그 확인했고 아직 수정되지 않았으며, 현재 임시방편을 제공하고 있으니 본문을 읽도록.
SSR은 풀스택이 아니다.
내가 지금 Next.js 프로젝트로 삽질하고 있었는데,내가 여태까지 SSR에 대해 알고있는 지식과 달리 진실은 오히려 좁았다.일단 너희들이 알고 있는 대략적인 SSR 특징에서 딱히 벗어난 건 아니지만,나처럼 오바하지 말라는 의미에서 글을 싸지르도록 하겠다.
헤더에서 주소로 제목 배열 값 불러오기 SVELTEKIT
앱을 만들다보면 자동으로 url 주소에 해당하는 해더를 배열로 불러오려고 하는 경우가 있습니다.이때 변경되는 url 알기 위해서 $page.url.pathname 을 사용하는데요.이부분이 변경될때 같이 변경되도록해야하는데, 잘 안되는 경우가 있습니다.이렇게 하면 첫페이
로그인후 백버튼에서 로그인 안나오개하기 SVELTEKIT
로그인한후에 백버튼을 누르다보면 다시 로그인 페이지가 나오게 됩니다. 그래서 백버튼을 일일이 주소를 기입하는 경우도 있는데요. 간단하게 로그인 페이지로 백버튼을 회피하는 방법을 알아보고자합니다.SVELTEKIT에서는 navigation 기능을 제공합니다.아마 그전에는
sveltekit 으로 하이브리드앱 만들기
하이브리드앱을 좀 아시는 분들은 cordova 나 ionic등등을 들어봤을 것이다.ionic은 cordova기반을 유료버전으로 만든 사업자정도로 이해하고 있는데, react-native 나 fullter 가 생겨나서면서 견제차원에서 인지capacitor 이라는 cord
Sveltekit에 Tailwind CSS 적용하기
Front CSS Framework 중에서 최근 가장 애용하고 있는것이 TailwindCSS 이다.과거 부트스트랩보다 세밀하고 폭넓은 설정들을 할 수 있어서생상성이 늘어나고 시간이 단축되고 CSS 작성할일이 거의 없어졌다.웬만한 애니메이션까지 처리되다보니 더욱 그러하다
Svelte Kit
React 에 Next.js 가 있다면Svelte 에는 SvelteKit 이 있다.SvelteKit 은 고성능 웹 앱을 구축하기 위한 프레임워크 이다.SSR / SSGloadhookendpointSvelte 는 UI를 쉽게 만들게 해줄 수 있는 컴파일러 or 라이브러리