주관적인 추천이다. 하지만 Jquery라이브러리를 시작으로 여러가지 프레임워크를 통해 작은 프로젝트를 해본 결과를 바탕으로 추천해 본다. 

추천하고 싶은 프레임웍은 바로: 스벨트이다. 

영번째 재미있다.

첫번째 이유는 매우 쉽다.
다른 프레임웍에 비해 러닝커브가 완만하다. 자바스크립트만 어느정도 알면 바로 시작할 수 있을 정도로 쉽게 배울 수 있다. 예전에 웹을 점령했던 JQuery도 이러한 장점이 있었다. 예전에 웹을 배우는 방식은 자바스크립트로 아주 조금 맛배기를 보곤 바로 jquery로 넘어갔던 기억이 있다. 왜냐면 jquery가 자바스크립트 자체를 배우는것 보다 쉽고 실전에서 써먹기 좋았기 때문이다.

스벨트도 jquery와 같이 쉽게 배울 수 있다는 점에서 추후 사용자들을 흡수 할 것으로 예상 할 수 있다.

두번째 이유는 빠르다.

스벨트를 설치해보면 알겠지만 설치도 쉽다. 그 설치 자체도 빠르다. 새로운 프로젝트를 계속해서 만들어 내는 사람들에게 특히나 좋아 할 수 있다. 설치만 빠르면 좋은게 아니다. 실행도 빠르고, 동작도 빠르게 빠르게 움직인다.

얼마나 가볍고 빠르게 동작하는지를 보고 싶다면 스벨트 프로젝트들을 모아둔 이 사이트에 들어가서 구경해보길 바란다. 게임에서 부터 쇼핑몰, threejs를 적용한 svelte 패키지까지 구경할 수 있다.  

https://madewithsvelte.com/

이렇게 빠르게 동작할 수 있는 이유는 svelte는 vuejs와 reactjs처럼 virtual DOM을 사용 하는게 아니라. 스벨트가 컴파일러 역활을 하여 작성한 코드를 순수한 자바스크립트로 컴파일 해주기 때문이다. 

세번째 이유는 가볍다

위에서 말했듯 순수한 자바스크립트로 컴파일을 해준다는 말은 필요없는 패키지들을 불러오지 않고 딱 필요한 코드만 생성해내는 것이다. 그렇기 때문에 빌드된 파일의 크기는 매우 작다. 이는 실행이 빠르게 되도록 만들어준다.

네번째 이유는 간결하다.

리액트를 사용하면 간단한 프로젝트도 많은 보일러플레이트 코드가 필요하다. 플러터에 관심이 있어서 사용해 플러터웹을 사용해서 작은 관리자 앱을 만들었는데 플러터웹을 이용해서 만든걸 후회 하고 있다. (물론 플러터는 모바일에서는 좋다.) 둘다 보일러플레이트 코드량이 많다. 그런데 스벨트코드를 보면 너무나도 심플하다. 스토어도 기본적으로 제공해주는데 심플하게 사용할 수 있다. 예전에 리덕트를 배우려고 머리 아픈것에 비하면 심플해서 머리 아플게 없다. 

다섯번째 제공 repl

간단하게 코드를 작성할 수 있는 repl을 제공하는데 깃 계정을 통해서 심플하게 만든 앱을 저장 할 수 있다. 잘 사용하면 생각보다 쓸만하다.

https://svelte.dev/repl

나는 이 repl를 통해 업무에 필요한 단순한 유틸 파일을 만들어 사용하거나, 심심할때 간단한 디자인이나 아이디어를 구현해보기도 한다. 그런데 아쉽게도 repl에서는 타입스크립트는 지원이 안된다.

Ex) repl을 사용하여 그냥 재미로 만들어본 네이버 주식 그래프 검색기

아래는 비교 해본 다트패드이다. 뭐 하나 실행하는데도 오래 걸린다. 저장기능도 없다. 플러터로 만들어 볼만한 간단한 아이디어를 구현해 보려 했는데 다트패드로는.....ㅠㅠ

https://dartpad.dev/

마지막 결론

어째튼 스벨트는 정말로 좋다. 특히나 개인 프로젝트로 아이디어를 구현하는 것에 스벨트를 사용하면 빠르게 프로토타이핑을 할 수 있다. 기업 내부에서 사용하는 시스템을 만든다고하면 또 추천해 보고 싶은데. 빨리빨리 필요한 기능들을 만들어내기 좋기 때문이다.

기업 입장에서도 프로그래밍 어느정도 할 수 있는 사람(나 같은)을 구해서 결과물을 만들어내기 쉽다. 다큐먼트와 튜토리얼도 잘 되어있어서 금방 배울 수 있다. (영어지만... 어렵진 않다.)

vuejs를 사용자라면 스벨트를 사용하면 뷰에서 조금 아쉬웠던 간결함을 스벨트에서 찾을 수 있을 것이라 생각한다. (물론 스벨트에서는 커뮤니티의 크기가 아쉽지만..ㅠ)

플러터웹으로 웹사이트를 만드는 건.. '왜 힘든길로 ㅠㅠㅠ' 라고 생각된다. - 플러터가 유명하긴하지만 플러터웹은 자료가 정말 없다.

리액트는 좋다 커뮤니티도 크고 자료도 많다. 리액트네이티브를 통해 앱을 만드는 자료도 많다. 그런데... 왜 그리 공부할게 많은지..ㅠ '익숙해지면 좋은거 아닌가????' 생각이 든다.  

firebase 9 버전이다.

app.js를 만들기.

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "xxxxxxxxx-gG2DEYRrdnOx-Jtw7PRoso",
  authDomain: "xxxx.firebaseapp.com",
  projectId: "xxxxx",
  storageBucket: "xxxx.appspot.com",
  messagingSenderId: "xxxx",
  appId: "xxxxxxx",
  measurementId: "xxxxx"
};

//named export를 사용해서 필요한 것들을 내보냄
// Initialize Firebase

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();

stores.js 만들기

import { writable } from "svelte/store";

export const user = writable({})
export const isLoggedIn = writable(false)

index.svelte

<script>
  import {auth, provider} from '../lib/app.js'
  import {signInWithPopup, onAuthStateChanged, signOut} from "firebase/auth";
  import {user, isLoggedIn} from '../stores'
  
  let isLoading = true

  async function loginInGoogle(){
    await signInWithPopup(auth, provider).then((result)=>{
      console.log(result.user)
      $user = result.user
      $isLoggedIn = true
    }).catch((error) => {

    })

  }
  async function logOut(){
    signOut(auth)
  }
 

  onAuthStateChanged(auth,(currUser) => {
    isLoading = false
    if (currUser) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      $user = currUser
      $isLoggedIn = true

      
    } else {
      $isLoggedIn = false
      $user = currUser
      // ...
    }
  });

</script>


{#if !isLoading}
  {#if $isLoggedIn}
    {$user.displayName} <button on:click={logOut}>log out</button>
  {:else}
    <button on:click={loginInGoogle}>login</button>
  {/if}
{/if}

아이오닉사용해서 sveltekit 안드로이드 앱만들기

이미 스벨트로 만들어 놓은 코드가 있어서, 굳이 플러터 flutter를 사용하지 않고 기존 코드를 이용하여 앱을 만들어 보고 싶었다. 처음 앱으로 빌드할 때 좀 느렸지만 이후엔 빠르게 빌드가 됬다. 

오래 사용해보지 않아 얼마나 좋은지 나쁜지는 잘 모르겠지만 가벼운앱을 만들땐 괜찮을 않을까 싶다.

1. 기존에 있던 프로젝트에 capacitor 설치하기

npm install @capacitor/core @capacitor/cli

2. capacitor init 하기

capacitor를 init할때 스벨트킷의 빌드할 폴더는 build이기 때문에 기본값 www대신 build로 적어 준다..

(혹시라도 init 때 www로 설정해놓더라도 capacitor.config.ts의 webDir에서 나중에 바꿀 수 있으니 걱정할 필요 없다.)

npx cap init

3. 안드로이드나 IOS 플랫폼 설치

npm i @capacitor/ios @capacitor/android
npx cap add android //안드로이드 추가
npx cap add ios //ios 추가

4. 싱글페이지 빌드용 어뎁터 설치하기

npm i -D @sveltejs/adapter-static

https://github.com/sveltejs/kit/tree/master/packages/adapter-static

5.  싱글페이지로 빌드하기 위해 svelte.config에 아래와 같은 코드를 넣어준다. 

import adapter from '@sveltejs/adapter-static';

아래 코드를 보듯 기존 import adapter from '@sveltejs/adapter-auto'; 를 대체하였다.

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(
        {fallback: 'index.html'}
        )
	}
};

export default config;

6. routes/+layout.js 파일 만들고 

export const prerender = true

7. 스벨트 빌드하기

npm run build

8.실행시키기

//안드로이드 스튜디오에서 실행
npx cap open android 

//실기기 실행
npx cap run android

-----------------------------------------------------

라이브 리로드

1. capacitor.config.ts의 내용을 아래로 대체함

import { CapacitorConfig } from '@capacitor/cli';

const appId = '앱.아이.디';
const appName = '앱이름';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
console.log(server);
const webDir = 'build';

const config: CapacitorConfig = {
  appId,
  appName,
  webDir,
  server
};

if (process.argv.includes('-hmr')) console.log('WARNING: running capacitor with livereload config', config);

export default config;

2. svelte를 디버깅 모드로 실행

npm run dev -- --host //호스트를 넣어서 아이피를 오픈해줘야함

3. 실기기에서 실행

cmd창을 하나 더 열고 아래의 명령어를 입력함

npx cap run android

참조

https://capacitorjs.com/docs/cli

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 {isLogin} from '../store'


onMount(()=>{
    const firebaseConfig = {
        #config들어갈 정보 복사
        };
        // Initialize Firebase
        initializeApp(firebaseConfig);
        
        
        // 로그인 정보가 체인지가 될때 실행되는 리스너 함수
        const auth = getAuth();
        onAuthStateChanged(auth, (user) => {
        if (user) {
            // User is signed in, see docs for a list of available properties
            // https://firebase.google.com/docs/reference/js/firebase.User
            const uid = user.uid;
            console.log(user)
            $isLogin = true
        } else {
            // User is signed out
            // ...
        }
   });
})

4. 스토어에 등록한 isLogin 변수를 사용하여 로그인상태를 변경함

//store.js

import { writable } from 'svelte/store';
export const isLogin = writable(false);

5. 로그인로그아웃 필요한 페이지에서 구글로그인 로그아웃 함수 사용

import { getAuth, signInWithPopup, GoogleAuthProvider, signOut } from "firebase/auth";
import {isLogin} from '../store';

  async function loginWithGoogle() {
    const auth = getAuth();
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider)
    .then((result) => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
        // The signed-in user info.
        const user = result.user;
       console.log(user)
    }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // The AuthCredential type that was used.
        const credential = GoogleAuthProvider.credentialFromError(error);
        // ...
    });
  }
  
 async function signOutGoogle(){
    const auth = getAuth();
    console.log(auth)
    signOut(auth).then(() => {
        $isLogin = false
        }).catch((error) => {
        // An error happened.
        });
   }

웹으로 회사전산 시스템을 만들때 필연적으로 문서를 프린팅을 해야하는 기능이 필요하다.

스벨트킷에서 프린팅 기능을 만들때 필요한 CSS태그를 알아보자

내가 원했던 방법은 특정 요소만 프린팅을 하고 싶었다. 

또한 출력할 화면에는 내가 원하지 않는 Navigation bar가 들어있었다.

인터넷을 찾아보니 아래와 같은 방법이 있었다.

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

즉, 출력할 요소만 html로 만든뒤 출력 후 복사해낸 원래의 화면을 넣어주는 것이다. 프린팅은 되지만 원래 화면을 넣어줬을때 더 이상 스벨트킷이 아니게 된다. 

그래서 다른 방법을 적용하기로 하였고 이것은 CSS를 사용하는 방법이다.

프린팅 시 CSS에서 원하는 요소만 visible을 해주고 원하지 않는 요소는 display none을 해주는 방법이다. 여기에도 작은 문제가 있었다. layout에 추가한 navigation 까지 출력이 되는 것이였다. 어떻게 해결해야할지 몰라서 아는 방법으로 임시방편으로 링크를 통해 문서를 출력하는 페이지로 가게 만들고 그 스벨트 폴더에 __layout.reset.svelte를 추가해서 그페이지만 레이아웃 자체를 초기화 시켜버렸다.

  @media print { 
  
      @page {
          size: a4;
      }     
      #main_page{
        display: none;
      }
      #print-area {
        margin: auto;
        width: 220mm;
        min-height: 300mm;
        visibility: visible;
      }
   
     
  }

그렇게 쓰고 있다가 문제는 결국 CSS가 적용되는 scope의 문제 였다는게 떠올랐다. (문제가 뭔지 모르면 뭘 구글링 해야할지도 모른다.) 문제를 정확하게 알게 되니 답은 이미 나와있었다.

navigation 요소에 id를 만들고 css에 :global(#nav){} 를 추가한다. 여기서 :global()을 사용시 모든 컴포넌트의 # . 요소명이 있으면 CSS에 적용이 된다.

이 방법을 통해 컴포넌트파일 이외의 영역의 스타일을 변경하였다.

이래저래 검색하다가 찾게된 :not(요소명){} 저 요소명 빼고 다 스타일 적용도 유용하게 쓰일거 같다.

주의할것은 부모요소를 display: none해버리면 정작 출력하려는 자식요소도 안보여지게 되므로 프린트 하지 않을 형제요소와 다른 특정요소를 display: none하는 방법을 사용한다.  

  @media print { 
  
      @page {
          size: a4;
      }
      /* 추가 */
      :global(#nav){
        display: none;
      }
      #main_page{
        display: none;
      }
      #print-area {
        margin: auto;
        width: 220mm;
        min-height: 300mm;
        visibility: visible;
      }
   
     
  }

스벨트를 사용하면 쉽게 웹사이트를 만들수 있다.

호스팅은 하는법은

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 <div id="svelte"> element in src/app.html
		target: '#svelte',
    adapter: adapter()
	}
};

export default config;

4. 깃을 사용해서 깃허브에 올림

1) git init

2) git add --all

3) git commit m"메시지"

4) git remote add origin https://github.com/계정명/프로젝트명 

5) git push origin master 

다른 방법

5. 넷틀리파이 홈페이지에서 깃프로젝트와 연결 (간단함)

dev.to/danawoodman/deploying-a-sveltekit-app-to-netlify-5dc3

추가 - 7월 13일 2021

다시 해보니 안된다. 

넷틀리파이에서 node버전을 수정해야했다. 아래 처럼 Enviroment variables에 NODE_VERSION을 16으로 추가해준다.

그뒤

문제에 따라서 로컬에서 빌드를 먼저 한뒤 생성된 파일들을 깃에 올린뒤 넷틀리파이에서 끌어와 호스팅 해야 할 수도 있다.

자신이 만든 패키지를 다른 사람과 공유할 수 있다면 만든거에 대한 보람을 느낄 수 있을 것 같다.

그리고 좋은 패키지들이 많이 생기면 스벨트에 더 많은 유저들이 관심을 가질 수 있을 것이다. 

그래서 패키지를 만드는 방법을 찾아봤다. 정보가 많지 않았지만 좋은 블로그 포스팅이 있어서 테스트 해본 뒤 안되는건 수정해서 작성하였다.

아래의 블로그를 참고 하여 작성함

dev.to/agustinl/creating-a-package-for-svelte-262n

1. 패키지 파일 생성

npm init -y

이 명령어를 사용하면 package.json파일을 생성할 수 있다.

2. 패키지 파일 정보 채우기

   {
      "name": "",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

생성된 package.json파일의 name, description, keywords, author, license 부분을 체운다.

3. 스벨트 관련 디팬던시 추가

npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

패키지파일에 아래와 같이 추가가 된다.

    "devDependencies": {
        "rollup": "^1.28.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-svelte": "^5.1.1",
        "svelte": "^3.16.7"
    }

4. index.js파일 만들기

src폴더를 만들고 그 안에 index.js 파일을 만든다.

index.js 파일에서 사용할 컴포넌트를 export 할 것이다.

5. index.js에 사용할 컴포넌트 export하기

export { default as Calendar } from './Calendar.svelte';

즉, index.js 파일이 위치한 폴더에 Calender.svelte파일을 찾아서 익스폴트 해주는 것.

6. package.json파일을 이와 같이 수정해준다.

    "main": "dist/index.js",
    "module": "dist/index.mjs",
    "svelte": "src/index.js",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w"
    },

7. rollup.config.js파일 만들기

 import svelte from 'rollup-plugin-svelte';
    import resolve from 'rollup-plugin-node-resolve';

    const pkg = require('./package.json');

    export default {
        input: 'src/index.js',
        output: [
            { file: pkg.module, 'format': 'en' },
            { file: pkg.main, 'format': 'umd', name: 'Name' }
        ],
        plugins: [
            svelte(),
            resolve()
        ],
    };

8. 로컬에서 테스트하기

사용할 스벨트 프로젝트 폴더에서

npm link 만든패키지 경로 복붙

9. npm에 퍼블리쉬

위의 링크에 방법 나옴.

1. npm 로그인

npm adduser

2. 퍼블리쉬

npm publish

주의 패키지의 이름이 중복되면 퍼블리쉬가 안됨

이제 로컬에서 설치한 패키지를 지우고 (npm uninstall 패키지명)

npm에서 받아서 되나 테스트 해보자. (npm install 패키지명)