공간 (Space)

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

https://www.reddit.com/r/sveltejs/comments/rllo3y/svelte_and_firebase_auth_question/

파이어베이스 로그인 구현이 새롭게 바뀌면서 기존에 있던 튜토리얼과 예제들이 작동되지 않아서 약간 애를 먹었다. 그러므로 파이어베이스 로그인을 구현할때 예전의 예제를 보기보단 파이어베이스 사이트에서 새로운 버전으로 보는것이 좋다. 스벨트에서 구현은 다음과 같이 했다. 맞는지 아닌지는 모르겠지만... 물론 추가로 수정해야 할 부분들이 있다. 1. 파이어베이스 사이트에 들어간 뒤 새로운 프로젝트를 만든다. 2. config 정보를 복사 3. __layout.svelte 파일에서 파이어베이스 init를 한다. import { initializeApp } from 'firebase/app'; import { getAuth, onAuthStateChanged } from "firebase/auth"; import ..

웹으로 회사전산 시스템을 만들때 필연적으로 문서를 프린팅을 해야하는 기능이 필요하다. 스벨트킷에서 프린팅 기능을 만들때 필요한 CSS태그를 알아보자 내가 원했던 방법은 특정 요소만 프린팅을 하고 싶었다. div가 두개가 있는데 하나는 인풋용 하나는 출력용 프리뷰인 셈이다. 또한 출력할 화면에는 내가 원하지 않는 Navigation bar가 들어있었다. 인터넷을 찾아보니 아래와 같은 방법이 있었다. function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printCo..

스벨트를 사용하면 쉽게 웹사이트를 만들수 있다. 호스팅은 하는법은 1. netlify.toml 파일을 만든뒤 다음을 입력 [build] command = "npm run build" publish = "build/" functions = "functions/" 2. 패키지 설치 npm i -D @sveltejs/adapter-netlify@next 3. svelte.config.js 파일 수정 /** @type {import('@sveltejs/kit').Config} */ import adapter from '@sveltejs/adapter-netlify' const config = { kit: { // hydrate the element in src/app.html target: '#svelte', ..

자신이 만든 패키지를 다른 사람과 공유할 수 있다면 만든거에 대한 보람을 느낄 수 있을 것 같다. 그리고 좋은 패키지들이 많이 생기면 스벨트에 더 많은 유저들이 관심을 가질 수 있을 것이다. 그래서 패키지를 만드는 방법을 찾아봤다. 정보가 많지 않았지만 좋은 블로그 포스팅이 있어서 테스트 해본 뒤 안되는건 수정해서 작성하였다. 아래의 블로그를 참고 하여 작성함 dev.to/agustinl/creating-a-package-for-svelte-262n 1. 패키지 파일 생성 npm init -y 이 명령어를 사용하면 package.json파일을 생성할 수 있다. 2. 패키지 파일 정보 채우기 { "name": "", "version": "1.0.0", "description": "", "main": "in..

netlify를 사용해서 호스팅을 할까 firebase로 호스팅 할까 생각하다. 더 익숙한 firebase로 호스팅을 해보기로 하였다. 1. firebase tools 설치 하기 npm install -g firebase-tools 2. 호스팅 관련 정보 초기화 (init) 하기 firebase init hosting 이렇게 클릭하면 질문들이 나온다. (1) Are you ready to proceed? (진행 준비가 됬나요?) 엔터 (2) use an existing project 이미 프로젝트가 있는경우 Create a new project 프로젝트를 새로 만들경우 선택 (3) What do you want to use as your public directory?(퍼블릭디렉토리로 사용할 것은?) 퍼..

스벨트로 슬라이더 컴포넌트를 만들어보면 재미있을 것 같았다. 직접 만들면 디자인이 좋지 않을 것 같아서 자바스크립트로 만들어진 슬라이더를 인터넷에서 찾아 스벨트 컴포넌트로 바꾸어 보았다. www.w3schools.com/howto/howto_js_slideshow.asp html Original 1 / 3 Caption Text 2 / 3 Caption Two 3 / 3 Caption Three ❮ ❯ Svelte {#each slideData as slide} {slide.id+1} / {slides.length} {slide.caption} {/each} plusSlides(-1)}>❮ plusSlides(+1)}>❯ {#each slideData as slide} currentSlide(slide)..

전문적인 개발자가 아닌 사람의 개인적인 생각이다. 자바스크립트가 한창 보급될 때 JQuery가 자바스크립트를 직접 입력하는 것 보다 쉽기 때문에 많이 사용되었다. 그러다 리액트가 유행하였고 기존 웹개발에 익숙한 개발자들은 좀 더 쉽게 쓸수 있는 vuejs를 선택 하였다. 간단하게 사용할 수 있었던게 점점 커지면서 점점 복잡해지게 되는 것 같다. vuejs도 방법들이 나누어지면서 복잡해졌다. Svelte는 정말 여러가지의 장점들을 잘 종합해서 나온 웹컴파일러라고 생각된다. 컴파일러라고 불리는 이유는 뷰나 리액트가 가상돔에서 랜더링 하는 것과 다르게 Svelte는 자바스크립트로 컴파일한다. 그래서 프로그램의 크기와 속도가 체감 가능하게 빠르다. 일단. Svelte공식 다큐먼트를 보면 느끼겠지만 쉽다. 군더더..