잡담소장소

Flask + Svelte + Rollup 본문

Study ;3

Flask + Svelte + Rollup

유부뽀 2020. 8. 25. 18:09

Flask를 이용해서 웹서비스 구현하려고 할 때  front를 뭘로 할까 고민하는 와중에 발견하게된 Svelte

Flask + Svelte 를 검색하니 떡하니 나온 github

 

cabreraalex/svelte-flask-example

Simple example of using Flask to serve a Svelte app - cabreraalex/svelte-flask-example

github.com

해당 repository에서 발견하게된 모듈 번들링 도구인 Rollup

 

rollup.js

rollup.js Introduction OverviewRollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6

rollupjs.org

 

rollup/rollup

Next-generation ES module bundler. Contribute to rollup/rollup development by creating an account on GitHub.

github.com

rollup.config.js 분석 

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

/** 
 * rollup plugin
 * alias		Define and resolve aliases for bundle dependencies
 * auto-install	Automatically install dependencies that are imported by a bundle
 * babel		Compile your files with Babel
 * beep			System beeps on errors and warnings
 * buble		Compile ES2015 with buble
 * commonjs		Convert CommonJS modules to ES6
 * data-uri		Import modules from Data URIs
 * dsv			Convert .csv and .tsv files into JavaScript modules with d3-dsv
 * html			Create HTML files to serve Rollup bundles
 * image		Import JPG, PNG, GIF, SVG, and WebP files
 * inject		Scan modules for global variables and injects import statements where necessary
 * json			Convert .json files to ES6 modules
 * legacy		Add export declarations to legacy non-module scripts
 * multi-entry	Use multiple entry points for a bundle
 * node-resolve	Locate and bundle third-party dependencies in node_modules
 * replace		Replace strings in files while bundling
 * run			Run your bundles in Node once they're built
 * strip		Remove debugger statements and functions like assert.equal and console.log from your code
 * sucrase		Compile TypeScript, Flow, JSX, etc with Sucrase
 * typescript	Integration between Rollup and Typescript
 * url			Import files as data-URIs or ES Modules
 * virtual		Load virtual modules from memory
 * wasm			Import WebAssembly code with Rollup
 * yaml			Convert YAML files to ES6 modules
 */

const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
        // iife 스크립트 내에 self-executing function 이 포함되어 있는 경우, 브라우저 전용
        // cjs  CommonJS 모듈을 컴파일 하는 경우(Node.js 에서만 쓸 라이브러리)
        // es   ES 모듈로 컴파일 하는 경우 (import/export 모듈, webpack 같은 번들러)
        // umd  모든 모듈방식 커버, 번들의 이름이 필요
		format: 'iife', 
		name: 'app',
		file: 'public/bundle.js'
	},
	plugins: [
		svelte({
			// 상용환경이 아닌 경우에 런타임 체크를 가능하게 함
			dev: !production,
			// 퍼포먼스 향상을 위해 모든 구성 요소 CSS를 별도의 파일로 추출
			css: css => {
				css.write('public/bundle.css');
			}
		}),

		// npm에서 외부 종속성을 설치한 경우 commonjs 플러그인 필요 
        // 경우에 따라 추가 구성이 필요할 수 있음
		// https://github.com/rollup/rollup-plugin-commonjs
		resolve({
			browser: true,
			dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
		}),
		commonjs(),

		// 상용이 아닐 때 `public` 디렉터리의 변경 내용을 감지하여 브라우저에 적용
		!production && livereload('public'),

		// 상용환경에서의 build (npm run dev 대신 npm run build), minify
		production && terser()
	],
	watch: {
    	//rebuild가 발생할 때 화면을 지울지 여부 (default:true)
		clearScreen: false
	}
};

 

page.js 사용하여 router 기능 추가

 

Svelte routing with Page.js, Part 1

Svelte doesn't have a built-in router, but it's really easy to build one

codechips.me

- 위의 코드 따라하던 도중에 `$$restProps`에 빨간 밑줄이 쳐져서 라이브러리 추가 문제도 추측해보고 열심히 없에려고 노력했는데 알고보니 VS Code의 플러그인인 `Svelte Intellisense`가 업데이트가 안되서 그런건지 `illegal variable name`으로 노출되는 것이었다 ㅠ 플러그인 지우고 다시 보니 문제 없음 ㅠㅠ

- Svelte 3.20 버전 이상이면 `$$restProps` 사용할 수 있음

 

svelte가 잘 정리된 글 

 

SvelteJS(스벨트) - 새로운 개념의 프론트엔드 프레임워크(updated)

Svelte는 Rich Harris가 제작한 새로운 접근 방식을 가지는 프론트엔드 프레임워크입니다. Svelte는 자신을 '프레임워크가 없는 프레임워크' 혹은 '컴파일러'라고 소개합니다. 이는 Virtual(가상) DOM이 없

heropy.blog

Mapbox.js 사용하는 페이지 만들고 싶어서 끄적여봄

 

Render world copies

Toggle between rendering a single world and multiple copies of the world.

docs.mapbox.com

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a default marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>

<script>
	// mapbox를 사용하려면 계정생성 후 token을 만들어야함
	mapboxgl.accessToken = '<your access token here>';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [12.550343, 55.665957],
        zoom: 8
    });

    var marker = new mapboxgl.Marker()
        .setLngLat([12.550343, 55.665957])
        .addTo(map);
</script>

</body>
</html>

 

국내 맵 API 중 카카오 맵 API나 네이버 맵 API 확인해보니

카카오는 1일 30만건 무료, 네이버는 월 300만건 무료라 무료로 쓰기엔 좀 더 나은듯 (..)

근데 왜 링크 썸네일 안뜨니....?? 티스토리인데 카카오페이지 안나오는 클라스.....=_=;

https://apis.map.kakao.com/

https://www.ncloud.com/product/applicationService/maps

 

NAVER CLOUD PLATFORM

cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification

www.ncloud.com

주소를 통해 좌표를 얻고 싶은데 카카오맵 API에 있는진 모르겠지만 따로 구글링해서 알아낸 방법 'ㅋ'

//POSTMAN 통해서 호출
type: POST
url: http://www.dawuljuso.com/input_pro.php
form-data: {
	refine_ty: 8,
    protocol_: '주소 블라블라'
}

//text로 아래와 같이 응답
// `|`로 파싱하여 사용하면 될듯 'ㅁ'
입력한 주소 | 도로명주소 | 우편번호 | 위도 | 경도 (위도/경도 순서는 확인안함)

 

웹페이지를 예쁘게 만들기 위해 ui framework를 검색해봤는데 svelte-material을 제일 많이 쓰는듯 하다 ㅠㅠ

 

Svelte Material UI

Material UI Components for Svelte 3, ready to use in your apps.

sveltematerialui.com

참고

 

A collection of web projects made with Svelte – Websites, Components, Frameworks, Apps and more!

A collection of web projects made with Svelte – Websites, Components, Frameworks, Apps and more!

madewithsvelte.com

 

반응형

'Study ;3' 카테고리의 다른 글

<a>의 download 속성 이슈  (0) 2020.11.30
mac os k8s  (0) 2020.10.04
Window 10에서 Docker 설치하기  (0) 2020.08.19
Window10에서 Ubuntu & Python & Flask 설치  (0) 2020.08.19
[python] Flask 시작해보기  (0) 2020.08.17
'Study ;3' Related Articles more
Comments