node.js 설치
18.20.4 버전으로 설치하기
intellij 설치
svelte실행
정상적으로 생성이 안될 경우 cmd창에 입력하거나
npm cache clean --force
npm install --cache
C:\Users\PC-22\AppData\Roaming\npm 폴더 생성
생성이 완료 될 경우
우하단의 알림 install (모듈 설치)
cmd창(node_modules)
npm update
정상적으로 node_modules가 생성
cmd창(서버 실행)
npm run dev
build쪽 왼쪽 시작 버튼을 누르면 dist폴더가 생성
cmd창(dist 폴더 생성)
npm run build
해당 local 주소를 들어가면 기본 예제를 볼 수 있다
svelte파일 들어가서 해당 plugin설치하면 색상이 표시
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>main.js
import './app.css'
import App from './App.svelte'
const app = new App({
target: document.getElementById('app'),
})
export default appApp.svelte
<script>
import svelteLogo from './assets/svelte.svg'
import viteLogo from '/vite.svg'
import Counter from './lib/Counter.svelte'
</script>
<main>
<h1>Vite + Svelte</h1>
<Counter />
</main>Counter.sevlte
<script>
let count = 0
const increment = () => {
count += 1
}
</script>
<button on:click={increment}>
count is {count}
</button>sevlte는 count가 증가하면 자동적으로 변경 ( 변수와 화면의 값이 바인딩 )
js로 페이지 구현 (차이점)
js는 count가 변하면 해당 버튼값을 직접 변경(다시 그려줌)
(이러한 방식의 차이가 존재한다)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
let count = 0;
function myclick(){
var button = document.querySelector('button');
count++;
button.innerText = "count is "+count;
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<button onclick="myclick()">count is 0</button>
</body>
</html>Svelte예제
예제 - Good Morning 문자 변경
Morning.svelte
<script>
let state = "Good Morning"
const myclick = () => {
if(state === "Good Morning"){
state = "Bad Morning"
} else {
state = "Good Morning"
}
}
</script>
<div>{state}</div>
<input type="button" value="CLICK" on:click={myclick}>App.svelte
<script>
import svelteLogo from './assets/svelte.svg'
import viteLogo from '/vite.svg'
import Counter from './lib/Counter.svelte'
import Morning from "./lib/Morning.svelte";
</script>
<main>
<h1>Vite + Svelte</h1>
<Morning />
</main>예제 - Lotto 변경
Lotto.svelte
<script>
const arr = [1,2,3,4,5, 6,7,8,9,10,
11,12,13,14,15, 16,17,18,19,20,
21,22,23,24,25, 26,27,28,29,30,
31,32,33,34,35, 36,37,38,39,40,
41,42,43,44,45];
let num1 = "__";
let num2 = "__";
let num3 = "__";
let num4 = "__";
let num5 = "__";
let num6 = "__";
const lotto = () => {
for(var i=0; i<100; i++){
var rand = parseInt(""+Math.random()*45);
// var rand = Math.floor(""+Math.random()*45);
var tem = arr[0];
arr[0] = arr[rand];
arr[rand]=tem;
}
var lottoArr = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]];
lottoArr.sort((a,b) => a-b);
num1 = ""+lottoArr[0];
num2 = ""+lottoArr[1];
num3 = ""+lottoArr[2];
num4 = ""+lottoArr[3];
num5 = ""+lottoArr[4];
num6 = ""+lottoArr[5];
}
</script>
<table border="1">
<tr>
<td>{num1}</td>
<td>{num2}</td>
<td>{num3}</td>
<td>{num4}</td>
<td>{num5}</td>
<td>{num6}</td>
</tr>
<tr>
<td colspan="6">
<input type="button" value="로또생성하기" on:click={lotto}>
</td>
</tr>
</table>예제 - 전화기
Phone.svelte
<script>
let telnum = "";
function call(){
alert(telnum+"으로 전화거는 중...");
}
/*
function click(){
telnum+=this.value;
}
*/
const click = (event) => { // 화살표함수는 this불가능
var num = event.target.value;
telnum += num;
}
</script>
<style>
table{
text-align: center;
}
#it{
width: 100px;
}
</style>
<table border="1">
<tr>
<td colspan="3">
<input type="text" bind:value={telnum}/>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" class="btn" on:click={click}>
</td>
<td>
<input type="button" value="2" class="btn" on:click={click}>
</td>
<td>
<input type="button" value="3" class="btn" on:click={click}>
</td>
</tr>
<tr>
<td>
<input type="button" value="4" class="btn" on:click={click}>
</td>
<td>
<input type="button" value="5" class="btn" on:click={click}>
</td>
<td>
<input type="button" value="6" class="btn" on:click={click}>
</td>
</tr>
<tr>
<td>
<input type="button" value="7" class="btn" on:click={click}>
</td>
<td>
<input type="button" value="8" class="btn" on:click={click}>
</td>
<td>
<input type="button" value="9" class="btn" on:click={click}>
</td>
</tr>
<tr>
<td>
<input type="button" value="0" class="btn" on:click={click}>
</td>
<td colspan="2">
<input type="button" value="☎" on:click={call}>
</td>
</tr>
</table>예제 - 숫자 맞추기(Up & Down)
<script>
import { onMount } from 'svelte';
let num = "";
let result = "";
let correct = 0;
let cnt = 0;
onMount(async()=>{
correct = com();
console.log(correct);
// onload같은 역할
})
function com(){
return parseInt(""+Math.random()*99)+1
}
function updown(){
if(num==""){
num = "0";
}
let inum = parseInt(num);
if(inum>=100 || inum<=0) {
alert("1~99 숫자 사이를 입력해주세요");
num = "";
return;
}
if(inum==correct){
result += num + " 정답입니다 \n";
++cnt;
alert(num + " 정답입니다. \n"+cnt+"회차에 맞추셨습니다");
} else if(inum>correct){
result += num + " DOWN \n";
++cnt;
} else if(inum<correct) {
result += num + " UP \n"
++cnt;
} else {
alert("잘못된 입력입니다");
}
num = "";
}
</script>
<table border="1">
<tr>
<th>맞출 수</th>
<td>
<input type="text" bind:value={num} placeholder="1~99"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="맞춰보기" on:click={updown}>
</td>
</tr>
<tr>
<td colspan="2">
<textarea bind:value={result} rows="20"/>
</td>
</tr>
</table>
<style>
input[type="text"]{
width: 70px;
}
</style>Flask로 실행하기
해당 프로젝트 static폴더에 dist에 존재하는 파일 넣기
from flask import Flask, redirect
# app = Flask(__name__)
# url을 static을 생략하고 시작가능
app = Flask(__name__,static_url_path="",static_folder="static")
# localhost
@app.route('/')
def index():
return redirect("/index.html")
if __name__ == '__main__':
# app.run(debug=True)
app.run(host="0.0.0.0", port=80, debug=True)
'Python' 카테고리의 다른 글
| [Python] node.js - vue.js (0) | 2024.07.12 |
|---|---|
| 7/11 Homework - (svelte) 구구단, 가위바위보 (0) | 2024.07.12 |
| [Python] AJAX / fetch / axios (0) | 2024.07.09 |
| [Python] MVVM - js예제 / jquery예제 (0) | 2024.07.08 |
| [Python] Flask - MVC패턴 (1) | 2024.07.05 |
