반응형

SvelteJS 사용 이유?

빠르다니깐, 궁금해서~! 그런데 모르겠다. react, vue, svelte 모두 빌드한 js 소스를 서버에 올리고 다운로드 받아서 사용하는 진짜 프론트엔드 사이드 스크립트다. 중간의 내용이야 어찌저찌 해서 팩키징 결과물이 조금씩 틀려지기는 하겠지만, 그렇다고 속도 측면은 잘 모르겠다.  react는 안써보고, vue랑 별반 차이가... 그냥 빠르다니깐.. 그런가? 하는데.. 알아서들 참조하시고~

아직 vite, rollup 차이를 구분 못하고, 실무에 sveltejs를 적용해 보면서, 맨땅에 헤딩하는 심정으로 진행하면서 실무에 필요한 내용 중에 빠져 있거나, 샘플에서 커스터마이징이 필요한 내용들을 정리해서 올려 보겠다.

typescript를 사용하는 이유?

정형화된 틀에 맞춰보려고 하는데, 생각보다 쉽지 않다. typescript에서 제일 중요한 것은 받거나 보낼 데이터 뭉치에 대한 선언(type)이다. 이런 데이터를 받겠으니, 이런 포맷으로 주세요~~. 그런데.. 이건 디비에 넣을때나 중요한 거지, 막상 실무에서는 any만 열심히 쓴다. 특히 프론트에서는 더더욱 그렇더라. basic, php를 먼저 다룬 개발자로서 부정형 데이터에 대한 자유도를 놓칠 수 없더라. 물론 이것도 개인차라.. 알아서들 잘~ ^^

HTML 에디터 - QUILL 샘플

참조사이트: https://svelte.dev/repl/e2bbe94abb19419892442729752ee308?version=3.19.1 

 

Quill Demo • REPL • Svelte

 

svelte.dev

몇 안되는 주요 샘플코드이다. svelte 소스들이 대부분 보여주기식인 경우가 많아서, 이 소스도 안타깝게 보여주기만 한다. "에디터 이렇게 연결할 수 있다~!!" 더욱이 quill 을 잘 모른다. vue에서는 ckeditor를 주로 사용해서... 일단 있으니 감사하면서 사용했고, 에디터에 등록한 데이터를 가져오는 방법을 아래에 추가함

// quill 설치 (^1.3.7)
yarn add quill

// 에디터에서 소스 가져오기
<script lang="ts">

....

  let text
  let html
  
  onMount(async () => {
    const { default: Quill } = await import("quill");
	
    let quill = new Quill(editor, {
      modules: {
        toolbar: toolbarOptions
      },
      theme: "snow",
      placeholder: "Write your story..."
    });
 
    // 에디터 데이터 수집 소스
    quill.on('text-change', function() {
      text = quill.getContents()     // 에디터에 사용된 구조 데이터
      html = quill.root.innerHTML    // html 결과물
    })
  })
  
....

</script>

SEO를 적용할 수 있다고?

물론 아니다. 처음에는 나도 깜빡 속았다. 요새 구글 로봇이 js도 읽는다고 하지만, SSR에서 강제로 꽂아 주는 것이 속이 편하다. 단지, 백엔드 개발자인 나는 자주 SEO 태그를 멀 넣어야 하는지 고민이다. 나같은 분들에게는 좋은 샘플이 될 거 같아서 가져와 봤다.

참조 페이지 : https://svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42?version=3.49.0 

 

Including SEO metadata in Svelte • REPL • Svelte

 

svelte.dev

위 샘플 소스에 대한 결과물이다. 잘만 정리하면 내가 원하는 데이터만 잡아서 SSR 단에서 꽂아 주면 될 거 같다.

오늘은 이 정도로 정리해 봤다.

다음은 서버 스크립트와 연동을 얘기해 볼까? 참고로 현재 sveltejs 와 연동 중인 언어는 python + flask 를 사용 중이다.

오늘도 좋은 하루 보내시길~

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

댓글을 달아 주세요

반응형
React

맥에서 입맛에 맞는 에디터 찾기가 쉽지 않습니다. 특히나 맥맹인 저로써는 Visual Studio for Mac도 그리 좋아하지 않습니다. 애초에 텍스트 에디터나 리치 에디터 쪽에는 애플이 별로 신경을 쓰지 않은 것으로 보이네요. 적어도 맥맹인 저에게는 그렇습니다. =_=;;

그나마 마음에 드는 녀석이 바로 WebStorm 이네요. 코딩의 즐거움을 줄이기? 위해서 ReactJS용 템플릿을 만들어 보았습니다. 만든 김에 귀찮아서 package.json, webpack.config.js 템플릿도 만들었습니다. 지우고 다시 설정하면 되도록 계속 조정을 할 생각입니다. ^^

Preferences > Editor > File and Code Templates > + (add)

1. React File (js)

import React, { Component, PropTypes } from 'react';


export default class ${NAME} extends Component {

  static propTypes = {


  };

  

  constructor(props) {

   super(props);

   this.state = {

    

   };

  }

  

  componentWillMount() {


  }


  componentDidMount() {


  }


  componentWillReceiveProps() {


  }


  componentWillUpdate() {


  }


  componentDidUpdate() {


  }


  componentWillUnmount() {


  }

  

  render() {

    return (

        <div>

        </div>

    );

  }

}


2. React Package File (json)

{

  "name": "kanbanboard",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "history": "^4.6.3",

    "react": "^15.6.1",

    "react-dom": "^15.6.1",

    "react-router": "^4.1.1"

  },

  "devDependencies": {

    "babel-core": "^6.25.0",

    "babel-loader": "^7.1.0",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "react-hot-loader": "^1.3.1",

    "react-scripts": "1.0.7",

    "webpack": "^3.0.0",

    "webpack-dev-server": "^2.5.0"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject",

    "dev": "webpack-dev-server --progress --hot"

  }

}


3. React Webpack File (js)

var webpack = require('webpack');


module.exports = {

  entry: './src/index.js',


  output: {

    path: __dirname + '/public/',

    filename: 'bundle.js'

  },


  devServer: {

    hot: true, // 파일이 수정할때마다 리로드

    inline: true,

    port: 7777,

    contentBase: __dirname + '/public/'

  },


  module: {

    loaders: [

      {

        test: /\.js$/,

        loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({

          cacheDirectory: true,

          presets: ['es2015', 'react']

        })],

        exclude: /node_modules/

      }

    ]

  },


  plugins: [

    new webpack.HotModuleReplacementPlugin()

  ]

};


반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

댓글을 달아 주세요