20240327 Vue.js 2

Leafy·2024년 3월 27일
0

중앙_자바

목록 보기
64/76

JS

스크립트 설명

temp 밑에 만들었던 파일 index.
이렇게 하면 작동하는가?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h1>연습1</h1>
    <div id="app">
        {{ message }}
    </div>
    <button onclick="num()">넘버 실행</button>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message:'안녕? Vue?'
        }
    });
    function num() {
        let num = 10;
        if(num == 10) {
            alert('true');
        }
    }
</script>
</html>

저장하고 돌려보면 작동함.

얘는 왜 작동하나?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h1>연습1</h1>
    <div id="app">
        {{ message }}
    </div>
    <button onclick="num()">넘버 실행</button>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message:'안녕? Vue?'
        }
    });
    let num = function() {
        let num = 10;
        if(num == 10) {
            alert('true');
        }
    }
</script>
</html>

이런 모양도 많이 등장할 것임.

let num = function() {
        let num = 10;
        if(num == 10) {
            alert('true');
        }
    }

자주 볼 부분.

호이스팅!

추론 타입 (타입 안 적어줘도 된다)

//var let const
var n = 10;
let nn = 'A'; //ES6
const nu = 100; //const 변수는 초기값을 변경할 수 없지만 const 객체/배열은 그 요소를 변경할 수 있다.
//변수값 재할당X, 내부요소 변경 O
  • const -> 상수 타입.
    object, 객체 타입은 내용물 바꿀 수 있다.

여기서 nu를 바꾸면 에러가 날까?

nu = 10;

보다시피 재할당 불가능

이건 된다.

const group = {name : "애플이", age : 38}
group.age = 250;

출력해보기

const group = {name : "애플이", age : 38}
group.age = 250;
console.log(group.name, group.age);
// ES6??
let {name, age} = group;
console.log(name, age);


둘다 잘 나온다

연산자 순서...

  • 산술 연산자
  • 문자 연결 연산자 + console.log("HI " + "JS");
  • 할당 연산자 (값 대입) var v = 10;
  • 비교 연산자 1 > 7
  • 논리 연산자 true && false
  • 삼항 연산자 조건문 ? 참 : 거짓;

화살표 함수 =>
파라미터... 는 파라미터 여러 개 라는 뜻.
let 함수 이름 = (파라미터...) => 명령문

check = () => {
	console.log('check');
}
check();
//화살표 함수 : ES6때 도입, function 키워드로 만들어지는 것보다 화살표를 사용해 함수를 더 간단히 표현.

자바 람다식

//콜백 함수 : 파라미터로 함수를 전달받아 내부에서 실행하는 함수

function timeCheck() {
    setTimeout(() => {
        console.log('timeCheck함수가 실행됩니다.');
    }, 3000);
}

function lastCheck(){
    console.log('lastCheck함수가 실행됩니다.');
}

timeCheck();
lastCheck();

lastCheck()이 먼저 실행, 다음에 timeCheck()

lastCheck()을 timeCheck()에 콜백함수로 넣으면

//콜백 함수 : 파라미터로 함수를 전달받아 내부에서 실행하는 함수

function timeCheck(callback) {
    setTimeout(() => {
        console.log('timeCheck함수가 실행됩니다.');
        callback();
    }, 3000);
}

function lastCheck(){
    console.log('lastCheck함수가 실행됩니다.');
}

timeCheck(lastCheck);

timeCheck() 다음에 lastCheck()이 실행.

promise

https://www.lydiahallie.com/blog/promise-execution
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

//프로미스 : 대기, 이행, 실패 상태를 가짐. (비동기 관련 객체)
// 통신 완료하고 진짜 성공했을 때 -> 이행? 새로 만들어줄 수 있다.

let promise = new Promise(function (resolve, reject){
    resolve(value);//성공
    reject(err);//오류
});

// 성공했을 때는 then으로 가져올 수 있다.
promise.then(function(value){// 성공
    console.log(value);
});

promise.catch(function(err){// 실패
    
});

async, await

이거 하고 나면 JS 기본은 끝난 것.

//콜백 함수와 프로미스의 단점을 극복하고 가독성을 높인 async, await
//async는 함수 앞에 붙여요
//await은 async 함수 내에 작성해요. 동기식처럼 프로미스 처리가 끝날 때까지 기다립니다.

async function print1() {
    let promise2 = new Promise(function (resolve, reject){
        setTimeout(() => resolve('성공'), 1000);
    });

    let result = await promise2; // promise2를 기다려서 그 결과를 반환받을 것.
    console.log(result);
}
print1();

결과는
1초 뒤 성공이 출력된다. 이 성공은... 어떻게 들어가게 되는건지..
-> resolve()에 전달된 값은 PromiseResult에 들어간다고 한다
(print()는 이미 있는 함수)

https://velog.io/@seul06/JavaScript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5

//예외처리
async function 함수() {
	try {
    	await 실행함수();
	} catch (error) {
    	//예외 발생 시 처리할 내용;
	}
}

배열

//배열
// arr01 1, 2, 3, 4, 5 저장
const arr01 = [1, 2, 3, 4, 5];
alert(arr01[0]); // 1
alert(arr01.length); // 5

arr01.push(6);
console.log(arr01);

arr01.unshift(0);
console.log(arr01);

//pop 마지막 요소를 꺼냄. = 배열 요소 삭제
console.log(arr01.pop()); // 6
console.log(arr01); // [0, 1, 2, 3, 4, 5]

// pop push == 스택(stack) == 후입선출(LIFO)

// shift() = 배열의 첫 번째 요소를 삭제합니다.
// 10 제거
console.log(arr01.shift()); // 0
console.log(arr01); // [1, 2, 3, 4, 5]

//splice() == 배열에서 특정 위치에 새로운 요소를 추가 / 특정 요소에 있는 값을 수정

//배열명.splice(추가/삭제할 위치, 삭제할 수, 추가할 요소)

arr01.splice(0, 0, 100); // unshift() 같은 효과
console.log(arr01); // [100, 1, 2, 3, 4, 5]

arr01.splice(1, 1);
console.log(arr01); // [100, 2, 3, 4, 5]

//맨 뒤에 있는 요소를 삭제해서 [100, 2, 3, 4]
console.log('삭제 전: ' + arr01);
arr01.splice(arr01.length-1, 1);
console.log('삭제 후: ' + arr01);

Vue

cmd에서

cd c:\
cd vue
dir
vue create mar27

그러면 mar27 이름의 vue 디렉터리가 생긴다.

cd mar27
npm run serve

npm: 기본적인 명령어

npm --version
npm -v
npm help
npm install
npm serve

localhost:8080 <- 나온다.
localhost:80 <- 줄일 수도 있다.

MVC 패턴

그동안 배워온 거. 전통적
V : jsp, thymeleaf
M : DB에서...
C : 흐름 들어오는 거 제어

이제는 V가 빠질 것

백단: M, C
프단: V -> react, vue

스벨트가 새로나왔다?? 현업에서 어떻게 될지 모름..

vue - MVVM 패턴
Model-View-ViewModel
데이터담당 Model = 자바랑 동일
UI담당 View = 자바랑 동일
상태, 동작을 정의, 데이터 바인딩 ViewModel = 새로움

vue는 재사용할 수 있는 UI를 묶어 화면을 컴포넌트로 구성

독립적인 기능, 상태를 가질 수 있게 하고
필요시 컴포넌트를 조합하여 사용하는 템플릿 기반

백단으로는 M, C만 만든다.
프론트단에서는 V를 한다.

조금 더 바뀐다면...
자바 없이도 다 할 수 있을 것. vue

자체 서버 구동할 수 있는 express가 있다. tomcat같은 애
자체 서버가 되고 자체 db도 되고 자체 컨트롤러, 자체 뷰

확장 스크립트까지 배우면 다 할 수 있다고,,,
node 덕분에 가능해졌다.

아직까지는 MVC를 많이 사용한다.

Vue 시작

VSCode에서 vue 폴더 열고 terminal 열고

npm run serve

public/index.html
기본 틀에 

<div id="app"></div>

이것만 알면 됨.

noscript는 script 동작 안하는 브라우저에서 나오는 거

src/App.vue
템플릿 기반.

template -> 진짜 화면에 뿌려줄 것.
script -> 약간 변경된 js 문법
style

import 컴포넌트
화면에 불러올 단위

게시판 컴포넌트, 로그인 컴포넌트 등

index.html 고치는 게 아니라 컴포넌트 교체.
컴포넌트 교체하는 명령을 내리기 위해서 새 페이지 만들기도 할 거다.

import로 불러온 컴포넌트는 template에서 쓴다.

틀에서 컴포넌트가 바뀌고 들어오고 하는 건데 전체가 바뀐듯한 느낌인 것.


이러면 그 어떤 뷰도 부르지 않고 안보이는 것.

index.html div app에 script, style, template이 들어가는 것.
script가 먼저 읽어서...(?)

import -> export -> template (HelloWorld...) App.vue에 그린 그림
지금은 안쓴다


App.vue

<template>
  <h1>연습중</h1>
  <div>
    이름 : {{ name }}<br>
    나이 : {{ human.age }}<br>
    사는 곳 : {{ human.addr }}<br>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {}, 
  data(){
    return{
      //jsx
      name : '김채원',
      human : {name : '쟝원영', age : 38, addr: '한양'}
    }
  }
}
</script>

jsx라고도 한다고 한다.

템플릿 밑줄은 h1태그를 div 안에 넣으면 해결.
하나의 div로 묶여야한다고 저번시간에 들은거같다.

v-text

v-어쩌구 => vue니까 전부 이런 식. 타임리프랑 비슷하다

<template>
  <div>
    <h1>연습중</h1>
    이름 : {{ name }}<br> <!-- 머스타치 -->
    이름 : <span v-text="name"></span> <br>
    나이 : {{ human.age }}<br>
    사는 곳 : {{ human.addr }}<br>
  </div>
</template>


mustache와 결과는 같다.

v-html

html 코드 쓰는 거

<template>
  <div>
    <h1>연습중</h1>
    이름 : {{ name }}<br> <!-- 머스타치 -->
    이름 : <span v-text="name"></span> <br>
    이름 : <span v-html="name + '<br>'"></span>
    나이 : {{ human.age }}<br>
    사는 곳 : {{ human.addr }}<br>
  </div>
</template>

이렇게도 된다.

이름 : <span v-html="name + '<br>' + '같이 사용합니다'"></span>

v-bind

스타일 주기.
data 뽑아오기.

<template>
  <div>
    <h1>연습중</h1>
    이름 : {{ name }}<br> <!-- 머스타치 -->
    이름 : <span v-text="name"></span> <br>
    이름 : <span v-html="name + '<br>' + '같이 사용합니다'"></span>
    나이 : {{ human.age }}<br>
    사는 곳 : {{ human.addr }}<br>
    <div v-bind:id="test">id="test"</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {}, 
  data(){
    return{
      //jsx
      test : 'test1',
      name : '김채원',
      human : {name : '쟝원영', age : 38, addr: '한양'}
    }
  }
}
</script>

class도 된다.

줄이면 :class="test"까지도 된다.

profile
Leafy
0o0
이전 포스트

20240325 Vue.js

다음 포스트

20240328~29 Vue.js 3

4개의 댓글

comment-user-thumbnail
쑹바오
2024년 3월 27일

트리님 오늘은 자바스크립트에요!!!! 너무 재밌지여~~~?

1개의 답글
comment-user-thumbnail
한솔범
2024년 3월 29일

헉 38세 장원영 ㄷ

답글 달기