1. bind:this = {...} 로 엘리먼트와 바인드하기

2. 외부에서 가져오기

svelte.dev/repl/28f4b2e36e4244b8b23cae3d584c4c88?version=3.16.6

3. dispatch

4. props

5. package 만들기.

전문적인 개발자가 아닌 사람의 개인적인 생각이다.

자바스크립트가 한창 보급될 때 JQuery가 자바스크립트를 직접 입력하는 것 보다 쉽기 때문에 많이 사용되었다. 그러다 리액트가 유행하였고 기존 웹개발에 익숙한 개발자들은 좀 더 쉽게 쓸수 있는 vuejs를 선택 하였다.

간단하게 사용할 수 있었던게 점점 커지면서 점점 복잡해지게 되는 것 같다. vuejs도 방법들이 나누어지면서 복잡해졌다. 

Svelte는 정말 여러가지의 장점들을 잘 종합해서 나온 웹컴파일러라고 생각된다. 

컴파일러라고 불리는 이유는 뷰나 리액트가 가상돔에서 랜더링 하는 것과 다르게 Svelte는 자바스크립트로 컴파일한다.

그래서 프로그램의 크기와 속도가 체감 가능하게 빠르다. 

일단. Svelte공식 다큐먼트를 보면 느끼겠지만 쉽다. 군더더기가 없이 깔끔하다. 

굳이 영상을 보며 배울 필요 없이 홈페이지에 들어가서 30분 정도 예제를 읽어보고 따라 해보면 어렵지 않게 익힐 수 있다.

Svelte가 자체 라우터를 제공하지 않는데 여러가지 사용해본 결과 가볍게 개발할때는 page.js가 사용하기 쉽고 좋았다.

visionmedia.github.io/page.js/

물론.

여러가지 모듈들은 아직 리액트와 뷰에 비해 부족한것 같지만 그런걸 상쇄할 정도의 가치는 있다고 생각된다.

간단한 라우팅 예)

App.svelte

<script>
  import router from "page"
  import Navbar from "./components/Navbar.svelte"
  import Pages from "./Pages.svelte"
</script>

<Navbar/>
<Pages/>

Pages.svelte

<script>
  import router from "page"
  import Home from "./pages/Home.svelte"
  import About from "./pages/About.svelte"

  let page
  router('/', () => page = Home)
  router('/about', () => page = About)
  router.start()
</script>

<svelte:component this={page} />

Navbar.svelte

<div>
  <a href="/">home</a>
  <a href="/about">about</a>
</div>

About.svelte

<main>
	<h1>About</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

home.svelte

<main>
	<h1>Home</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

스벨트 공식홈페이지.

svelte.dev/

-----버튼 컴포넌트 만들기 예) ------

app.svelte

<script>
	import Button from './Button.svelte';
</script>

<Button btnName="button1" click={function (){alert('button1 clicked')}}/>
<Button btnName="button2" click={function (){alert('button2 clicked')}}/>

button.svelte

<script>
	export let click, btnName; 
</script>

<button on:click={click}>
	{btnName}
</button>

플러터로 어플리케이션을 제작하였고, 어플리케이션에 필요한 데이터를 제공할 수 있는 서버가 필요했다.

파이어베이스의 파이어스토어는 쉽고 다양한 언어로 SDK를 제공한다. 그래서 플라스크를 사용하여 데이터를 올리는 간단한 서버를 만들었다. (굳이 서버로 만들지 않아도 됨....)

1. 웹사이트에서 서비스 어카운트 키 다운 받기

1) 파이어베이스에 들어가 새로운 프로젝트를 만든다.

2) 

3) service accounts 탭에 들어가면 아래와 같은 화면을 볼 수 있고

파이썬을 클릭한다.

4) Generate new private key 다운로드

5) 받은 json형식의 파일을 serviceAccountKey라고 이름을 변경한다.

6) 파이썬이 있는 폴더에 함께 놓는다.

2. firestore 만들기

1) 좌측 클라우드 파이어스토어를 클릭하면

서버를 선택할 수 있고 한국에서 빠른 실행을 할 수 있도록 south east2 를 선택했다.

2)

3. 파이썬 코드

firebase_admin과 Flask를 설치하고 아래와 같이 코드를 만든 뒤 실행하면

firestore에 대량으로 데이터를 업데이트 가능하다.

from flask import Flask,
import firebase_admin
from firebase_admin import credentials
from firebase_admin import firestore
import json

#서비스어카운트키 파일에 있는 json을 불러옴
cred = credentials.Certificate("./serviceAccountKey.json")
firebase_admin.initialize_app(cred)
firebase_db = firestore.client()

app = Flask(__name__)

# localhost:8000/add 로 들어갈시 작동
@app.route("/add", methods=['GET'])
def start():
	# firestore에 올릴 json 파일 불러드림
    with open('./stock_code.json', encoding='utf-8') as f:
        datas = json.load(f)
        
    # 아래는 테스트를 해보기 위한 데이터
    # datas = [{'name': '당근','code': '012345'},{'name': '오이','code': '012341'}]
    # print(datas)

    for data in datas:
    	# document() 라고 하면 자동으로 다큐먼트의 ID가 생성됨. 
        document = firebase_db.collection('콜렉션이름적기').document()
        document.set(data)
    return 'success'
    
# 공개아이피와 포트8000번 디버그 모드로 열기
if __name__ == '__main__':
    app.run(host='0.0.0.0',  port="8000", debug=True)

혼자서 개발을 할때는 기획 역시 혼자서 해야 한다.  

사실 다른 사람들은 혼자 개발할 때 기획과 개발을 정확히 나누면서 하는지 그렇지 않은지 모르겠지만

난 그렇게 하지 않았다. 그래서 문제가 발생한 것이다.

모든걸 개발이라고 생각해 버린것...

정확한 기획 없이 코드를 만드려했다.  그러다 보니 애매하다... '어떻게 만들겠다' 정하지 못한체로 만들 생각이 끼어든다.

사실 코딩하는 것은 생각보다 단순하다. 왠만한건 구글에 다 나와있다.

명확한 목표가 있으면 그걸 구현하는건 그저 시간투자이다. (물론 깔끔하고 완벽한 코딩은 어렵겠지만)

하지만 기획에서 명확한 구현의 목표를 정하지 못하면 코딩이 막혀버리고 

코딩은 어렵다... 라고 잘못된 인식을 가질 수도 있다.

기획이 어려운게 정답이 없다...ㅠㅠ

이렇게 할까? 저렇게 할까? 애매하게 생각이 끝나는 경우가 많다... 

생각이 열린 상태에서 닫고 마무리 짓지 못한 것이다.

아마 이건 기획서라도 작성을 하면 도움이 될 것 같다.

그도 그럴것이.. 기획서를 만들지도 않으니..

그냥 '머리에 있으니 그대로 하지' 라고 생각하지만 얼마뒤 뭘하려는지 까먹게 되는거...

기술적인 것과 코딩이 더 어려울거라는 편견 때문에 기획에 집중하거나 시간과 공을 들이지 못한다.

어째튼 취미로 하는 코딩 머리아프면 재미 없다.

아이디어를 만드는 일 = 기획

이 기획을 명확히 생각하는게 더 중요할 것 같다. 

그래야 그 아이디어를 코드로 번역할 것 아닌가.......

* 기획아이디어 및 홍보 아이디어

매우 중요.

(

구현에서의 아이디어

생각하는 기능을 만들때에 만드는 방법에 대한 아이디어.

)

https://post.naver.com/viewer/postView.nhn?volumeNo=9080703&memberNo=25379965&navigationType=push

이미 엑셀로 잘 사용하고 있는데 프로그래밍적인 기능이 필요한 경우, 아마 세가지 중 하나를 선택해야만 할 것이다. 

1. 그냥 프로그래밍적인 기능을 포기하고 엑셀에서 기본적으로 제공되는 포뮬러만 사용한다.

2. 파이썬으로 옮기고 모든 기능들을 구현한다. 혹은 추가로 필요한 기능만 하는 파이썬 스크립트를 만든다.

3. 지금까지 잘 쓰던건 나두고 필요한 프로그래밍적인 기능만 VBA로 추가한다. 

파이썬으로 다 바꾸면 나중을 위해서는 좋을것이다. 실행도 빠르고 간편하고 코드도 간단하다.

필요한 기능만 파이썬으로 만들면 엑셀과 파이썬을 둘다 관리해야하는 번거로움이 생긴다.

그래서 생각한게 간단한건 VBA로 처리하는 것이다. 인터넷을 찾아보니 회사에 파이썬이 보안에 막혀서 VBA를 쓰는 경우도 있다고 한다.

(개인적으로, 만일 복잡한 코드를 만들어야한다면 그냥 파이썬을 사용하는게 더 효율적이고 빠르고 구조적으로 설계하는게 쉬울것 같다.)

1. 에디터 실행하기

ALT + F11 를 눌러 visual basic for applications를 실행한다.

2. 구조는 다음과 같다.

VBAProject
- Microsoft Excel Objects
--sheet1
--thisWorkBook

오른쪽 화면에는 VBAProject(파일명) 하위 요소는 Microsoft Excel Objects폴더, 그 안에 sheet1와 thisWorkBook이 있다.

또한, 오른쪽 마우스를 클릭하여 UserForm, module, class module 을 추가 할 수 있다.

3. 코드 작성하기

모듈을 만든 뒤 코드를 아래와 같이 작성해 본다.

Sub Cyan()
Cells.Interior.ColorIndex = 28
End Sub

4. 간단히 메크로를 통해 실행해보기

Alt + F8를 누루거나 저 Macros 아이콘을 클릭한다.

실행을 누르면 만들어 놓은 기능이 실행이 된다. 

참고로 모듈이 아니라 sheet object에 코드를 넣어도 되는데 이 경우 아래와 같이 이름이 나온다.

5. module과 sheet object 용도의 차이

아래의 코드를 보듯이 공용으로 사용될 수 있는 기능과 세부적인 로직은 모듈로 만들어 저장하고,

sheet object는 그 sheet에만 사용하는 코드와 모듈함수, 서브실행을 한다.

Module: DataAccess:

Function GetData(strTableName As String, strCondition1 As String) As Recordset
    'Code Related to getting data from the database'
End Function

Module: PopulateSheet:

Sub PopulateASheet(wsSheet As Worksheet, rs As Recordset)
    'Code to populate a worksheet '
End Function

Sheet: Sheet1 Code:

Sub GetDataAndPopulate()
    'Sample Code'
     Dim rs As New Recordset
     Dim ws As Worksheet
     Dim strParam As String
     Set ws = ActiveSheet
     strParam = ws.Range("A1").Value

     Set rs = GetData("Orders",strParam)

     PopulateASheet ws, rs
End Sub

Sub Button1_Click()
    Call GetDataAndPopulate
End Sub

6. function과 sub의 차이.

Sub로 만든 코드는 메크로를 통해 실행할 수 있다.

function으로 만든 코드는 셀에서 실행 할 수 있으며 반환값을 가져야 한다.

7. 저장하기

그냥 엑셀파일로 저장하게되면 만들어 놓은 메크로(기능)이 사라지게 된다. 

그러니 저장할땐 *. xlsm 로 저장해야한다.

JSON 형식의 데이터는 다음과 같이 라벨(KEY)과 그에 해당하는 값을 지니고 있는 형태의 데이터이다.

[
{'name':'김정희', 'height':163, 'weight':50},
{'name':'김남혁', 'height':183, 'weight':92},
{'name':'오준혁', 'height':173, 'weight':58}
]

우리가 JSON 형식의 데이터를 얻었을 경우 프로그래밍을 할 줄 알면 그 데이터를 사용이 쉽게 가능하지만 

그렇지 않으면 그 데이터를 어떻게 사용해야 할지 난감할 수가 있다.

쉽게 이 데이터를 위의 표처럼 얻어 낼 수 있는 방법 중 가장 쉬운 방법은 구글에서 json에서 테이블이나 CSV로 변환해 주는 사이트를 찾는 것이다.

JSON to CSV converter에 들어가서 쉽게 CSV를 다운 받을 수 있다!