스벨트킷 4

[sveltekit] +page.js가 필요한 이유

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다. 하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다. (스벨트킷은 자동으로 $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기..

웹프레임웍 추천 (vue.js, reactjs, futterweb, sveltejs)

주관적인 추천이다. 하지만 Jquery라이브러리를 시작으로 여러가지 프레임워크를 통해 작은 프로젝트를 해본 결과를 바탕으로 추천해 본다. 추천하고 싶은 프레임웍은 바로: 스벨트이다. 영번째 재미있다. 첫번째 이유는 매우 쉽다. 다른 프레임웍에 비해 러닝커브가 완만하다. 자바스크립트만 어느정도 알면 바로 시작할 수 있을 정도로 쉽게 배울 수 있다. 예전에 웹을 점령했던 JQuery도 이러한 장점이 있었다. 예전에 웹을 배우는 방식은 자바스크립트로 아주 조금 맛배기를 보곤 바로 jquery로 넘어갔던 기억이 있다. 왜냐면 jquery가 자바스크립트 자체를 배우는것 보다 쉽고 실전에서 써먹기 좋았기 때문이다. 스벨트도 jquery와 같이 쉽게 배울 수 있다는 점에서 추후 사용자들을 흡수 할 것으로 예상 할 수..

스벨트킷 sveltekit에서 tailwindcss와 daisyUi 사용하기

HTML 스타일을 할 때 tailwindcss를 사용하면 직접 css를 작성하는 것 보다 쉽고 자유롭게 스타일을 할 수 있다. https://tailwindcss.com/ 그리고 이미 테일윈드를 통해 스타일이 만들어져 있는 daisyUi를 사용하게 된다면 예전에 부트스트랩을 사용하 듯. 쉽게 디자인을 만들어 낼 수 있다. https://daisyui.com/ 1. tailwindcss 설치 이 글에서는 스벨트킷에 적용하는 방법을 설명 하려고 한다. 스벨트킷을 스켈레톤으로 설치하고 실행하게 되면 아래의 화면을 볼 수 있을 것이다. 스벨트킷에 tailwindcss를 설치하는 방법은 사실 아래의 주소에 아주 잘 나와있다. https://tailwindcss.com/docs/guides/sveltekit 홈페이..

카테고리 없음 2022.05.10

[SVELTEKIT] capacitor 사용하여 안드로이드 앱 만들기

아이오닉사용해서 sveltekit 안드로이드 앱만들기 이미 스벨트로 만들어 놓은 코드가 있어서, 굳이 플러터 flutter를 사용하지 않고 기존 코드를 이용하여 앱을 만들어 보고 싶었다. 처음 앱으로 빌드할 때 좀 느렸지만 이후엔 빠르게 빌드가 됬다. 오래 사용해보지 않아 얼마나 좋은지 나쁜지는 잘 모르겠지만 가벼운앱을 만들땐 괜찮을 않을까 싶다. 1. 기존에 있던 프로젝트에 capacitor 설치하기 npm install @capacitor/core @capacitor/cli 2. capacitor init 하기 capacitor를 init할때 스벨트킷의 빌드할 폴더는 build이기 때문에 기본값 www대신 build로 적어 준다.. (혹시라도 init 때 www로 설정해놓더라도 capacitor.co..