TIL : 79번째- 230329 [3-4-수]

배움 __IL/TIL 1기

TIL : 79번째- 230329 [3-4-수]

Mo_bi!e 2023. 3. 29. 19:47

※ Keep in mind

본 내용은 웹개발과정의 강의 중 내용을 복습을 위해서 메모한 것에 불과한 것입니다. 이러한 연유로 강의내용을 오인한 나머지 오기재 및 불기재가 있을 수 있으니 '참고'만 해주시길 바랍니다. 저의 경우에도 본 내용을 단순히 읽은 것이 결코 저의 것이라고 생각하지 않습니다. 본 내용은 복습을 위한 초기 내지 중간 과정에 불과한 것이고, 이후에 내용을 보충 후 인출 및 설명하기 과정이 있어야 비로소 복습의 단추가 어느 정도 마무리되어간다고 볼 수 있습니다.
따라서 당초에 본 내용은 비공개였습니다. 그럼에도 불구하고 본 내용을 공개한 점은 함께 공부하는 동료들과 나눔을 바탕으로 배움과 성장의 공진화라는 소기의 목적을 달성에 어느 정도 도움이 될 수 있기 때문이라고 생각합니다.

I. Vuw

1. 들어가며

Ajax로 화면 직접 갱신하는건 비효율적이야 그래서 어제 vuw의 탄생비화를 이야기했어

2. ways of using Vue

(1)들어가며

앵귤러에서 플랫폼 가리지않고 다양하게 응용프로그램을 만들 수있다고했어

성능도 좋아지고 다 좋아졌는데 문제는 node.js 환경을 알아야해

node.js에서 만들기 위한 스크립트가 안정성이 필요해서 typeScript를 강요하고, 추가적으로 공부해야할게생겼어

Vue 는 이전 작업을 번거롭지않게 하기위해서 했어

우리가 하고자하는건 SPA와 관련된게 아냐 우리는 standalone script방식으로 할거야

(2)standalone script

build step이 필요하지않아 (빌드스텝은 멀티플랫폼용)

(3) MVC프로그램이용한 DOM계산기 프로그래밍

뷰는 MVC를 지원하는 프레임웍이야

백엔드에서 스프링이 지원하는게 프론트컨트롤러인데 프론이 MVC가 지원하는 라이브러리야

백 MVC는 절름발이야

모델 기반으로 view를 사용할수있게해주는것은 mvc특징은 맞는데 one-way방식이야

컨트톨러가 데이터 준비 해, 준비데이터가 출력데이터임 출력데이터는 모델임

모델만들어서 view에서 소비되는걸로 끝나 이것을 one-way라고해

반대로 화면에서 사용자가 텍스트박스나, 콤보박스로 입력을 해

모델에서 값 x로 텍스트박스를 심어 모델 x 변수에다가 3을넘어서 출력이 돼

js에서는 바인딩된 x값이 바뀌면 모델이 바뀌는 two-way야!

원래 이것이 MVC야!

MVC는 윈도우에서 사용하는 표준 프레임웍이야

처음에 만들어진거도 윈도우 프로그램만들기 위한 방법론이야!

우리는 JS로해서 간단한 계산기로 MVC경험해보자!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>

<section id="calc">
	<h1>덧셈 계산기</h1>
	
	    <form>
			<fieldset>
				<legend>계산기{{x}} 입력폼</legend>
				<div>
				<label>x:</label>
	                <input dir="rtl" v-model.trim.numbers="x" @input="calcHandler">
	                <label>y:</label>
	                <input dir="rtl" v-model.trim.numbers="y">
	                <span>=</span>
	                <span v-text="z"></span>
	            </div>
	
	            <hr>
	
	            <div>
	                <input type="submit" value="초기화" @click.prevent.onece ="resetHandler">
	                <input type="submit" value="계산하기" @click.prevent.onece ="calcHandler">
	            </div>
	        </fieldset>
	    </form>
	</section>
</body>
</html>

window.addEventListener("load", function () {
        const inputs = document.querySelectorAll("input");
        const xInput = inputs[0];
        const yInput = inputs[1];
        const resetButton = inputs[2];
        const submitButton = inputs[3];
        const resultSpan = document.querySelector("form span:last-child");
        resetButton.onclick = (e) => {
            e.preventDefault();
            xInput.value = 0;
            yInput.value = 0;
            console.log(e);
        };
        // 1way binding
        submitButton.onclick = (e) => {
            e.preventDefault();
            let x = parseInt(xInput.value);
            let y = parseInt(yInput.value);
            let result = x + y;
            resultSpan.innerText = result;
            console.log(e);
        };
        // 2way binding
        xInput.oninput = (e) => {
            let x = parseInt(xInput.value);
            let y = parseInt(yInput.value);
            let result = x + y;
            resultSpan.innerText = result;
        };
        yInput.oninput = (e) => {
            let x = parseInt(xInput.value);
            let y = parseInt(yInput.value);
            let result = x + y;
            resultSpan.innerText = result;
        };
    });

1way 방식으로만 하면 출력밖에 못하는 절름발이이다

2way 방식으로 하면 입력한것이 oninput 때문에 즉시 입력이 성공하는 방식이다.

(4) vuw 대려오기

<title>Insert title here</title>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src ="./calc2.js" defer="defer"></script>

</head>

라이브러리 받어오기

defer 를 넣어서 load 다 된다음에 js코드를 읽을 수 있게금해주어야한다.

3)create API

Vue
.createApp({ //이거는 객체야 함수나 속성이 들어가! //mount를 조작할거야

})
.mount("#calc"); // 뷰 영역을 의미해

css셀렉터 가능해

데이터 반환은 모델을 반환하는거야 얘가 반환하는게 mount에서 사용할거야

여기서 createApp은 vue app을 생성하는것이다

이 경우에 html코드에서 특정 태그와 연결하는것으로 mount를 이용한다.

json객체 es6방식

아래쪽이 ES6에서 하는 방법이야! 변수로 JSON오브젝트 만어

(5) Vuw : data() - 정보속성

Vue
.createApp({ //이거는 객체야 함수나 속성이 들어가! //mount를 조작할거야

    data(){

        let x = 20;
        let y = 30;
        let z = 50;

        return{x,y};
    }

})
.mount("#calc"); // 뷰 영역을 의미해

여기서 data()는 vue 인스턴스가 가져야할 정보를 담는 속성(model)이다

이런 방식은 객체형식과 함수형식 두가지 방식으로 있다.

2) bind 는 동적으로

<legend>계산기{{x}} 입력폼</legend>
<div>
    <label>x:</label>
    <input dir="rtl"  v-bind:value="x">
    <label>y:</label>
    <input dir="rtl" value="0">
    <span>=</span>
    <span>0</span>
</div>

v-bind:value를 하면 동적으로 20 이 들어간다

즉 모델설정하고 바인딩만 하면 끝!!이야!

지금까지는 백엔드에서 하는 방식과 비슷해 (원웨이 : 모델만들고 심어서 출력)

원웨이 문제점있어

(6) Vuw : methods() - Vue 인스턴스의 함수저장 속성

스프링처럼 모델을 만들어서 return 만 하면 알아서 뷰에서 활용이 가능해! 이건 스프링처럼 비슷해

methods 란 Vue인스턴스가 사용할 함수를 저장하는 속성이야

<div>
    <input type="submit" value="초기화" v-on:click="calcHandler">
    <input type="submit" value="계산하기" v-on:click="calcHandler">
</div>

methods : {
    calcHandler(e){
        e.prevnetDefault();
        console.log("hello");
    },
    resetHandler(e){
        console.log("reset");
    }

}

이제 input클릭 때 연산이 가능해!

태그의 기본기능에 대해서 e.peventDefault() 할필요없이 쉽게 돼

v-on 조차도 번거롭자나 @로 쉽게 가능해

bind 대신 ':' 로가능해

<div>
    <label>x:</label>
    <input dir="rtl" :value="x">
    <label>y:</label>
    <input dir="rtl" :value="y">
    <span>=</span>
    <span>0</span>
</div>

<hr>

<div>
    <input type="submit" value="초기화" @click.prevent ="resetHandler">
    <input type="submit" value="계산하기" @click.prevent ="calcHandler">
</div>

이제 굳이 querySelector 필요없어

methods : {
    calcHandler(e){
        let z = this.x + this.y;   
        console.log(z);
        console.log("hello");
    },
    resetHandler(e){
        console.log("reset");
    }

}

이렇게 하면 손쉽게 z출력이 가능해

이 경우에 x,y 에다가 this 를 써주자!

1-way는 화면에 출력만 해주는거야! 결과에도 값이 바뀌지않아

즉 모델로 바인딩된 xy값을 사용자가 바꿔도 반영돼서 결과가 안나와

2-way로는 가능해 bind가 아니라 model 로 해!

model 은 input 요소에대한 two-way 바인딩 방식일때 이용하는거야

이런 3 경우에 가능해! 그런데 문자열 더하기가 돼

calcHandler(e){
    let z = parseInt( this.x) + parseInt( this.y);   
    console.log(z);
    console.log("hello");
},

parsInt 하면 돼!

왜 문자열로 받을까?

DOM을 대신 작성해서 가져와보면 알지만 input태그 자체가 가져올 때 문자열이야

5)
이제 결과값을 html에 뿌려주자!

<div>
<label>x:</label>
    <input dir="rtl" v-model="x">
    <label>y:</label>
    <input dir="rtl" v-model="y">
    <span>=</span>
    <span v-text="z"></span>
</div>

v-text를 해서 출력이 가능하다

vue 속성에 methods의 값을 넣어줄 수 있는 변수아용방법이다.

calcHandler(e){
    this.z = parseInt( this.x) + parseInt( this.y);   
    // console.log(z);
    // console.log("hello");
},

v-text: 에 태그 사이에 값이 있으면 오버라이드 관련해서 물어본다.

태그 컨텐트를 지워주자

modifier 에서 prevent를 주로 쓰는데 그 외 once는 한번만 하는게 가능해

이전 calc.js 보다 clac2.js 를 보면 코드량이 1/3로 줄었어

- 한편 입력 즉시 버튼안눌러도 바로 계산되게끔 하려면

<input dir="rtl" v-model="x" @input="calcHandler">

oninputd을 해주면 돼!

<input dir="rtl" v-model.trim.numbers="x" @input="calcHandler">
<label>y:</label>
<input dir="rtl" v-model.trim.numbers="y">
<span>=</span>

이렇게 하면 돼!

trim 은 빈공백을 잘라주는거야!

3. 알렌드

(1) 들어가며

HTML 은 지시자가 두개가 섞일수있어 타임리프와 뷰 두개야 서버 클라이언트 각자 지시자가 혼란될수도 있어!

타임리프 안쓰고 뷰로 쓰면 컨트롤러가 아니라 api를 써야해!

(2) admin 설정

1) homecontroller 만들기

@Controller("adminHmoeController")
@RequestMapping("/admin")
public class MenuController {
	
//	@Autowired
//	private MenuService service;

	@GetMapping("index")
	public String index() {
			
		
		return "/admin/index";
	}
}

안보고 그대로 할 수있어야해!

컨트롤러 이름중복 방지위해서 별도로 넣어주자

2) html 에서 메뉴관리로 갈 수 있게끔하자

<div>
    <a href="">공지추가</a>
    <a href="">주문관리</a>
    <a href="menu/list">메뉴관리</a> 
    <!-- 상대경로로! -->
</div>

thymeleaf 레이아웃 맞춰주자!

이 경우 css, 이미지경로 가 상대경로면 절대경로로 바꾸기!

그런데 detail.html 을 신경쓰자

list에서 해당 커피의 쿼리스트링을 넣어주자

<h1>알랜드 커피</h1> 
<div class="menu-img-box">
    <a href="detail?id=617"><img class="menu-img" src="/image/product/12.png"></a>
</div>

그리고 이를 detail 페이지를 띄어주자

@GetMapping("detail")
public String detail(
        int id,
        Model model) {

    Menu menu = service.getById(id);
    model.addAttribute("menu",menu);

    return "admin/menu/detail";
}

이렇게 하면 detail.html 페이지에서 객체를 받을 수있어!

(3) Vue 설정

vue를 쓰자! 쓰지말라고 하는게아니면

공용으로 쓸수있게끔 layout에다가 vue를 import한다

<link href="/css/deco.css" type="text/css" rel="stylesheet" >

<link href="../css/utils.css" type="text/css" rel="stylesheet" >  

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
</head>


<body>

이후 list.html에 스크립트를 import한다

<!-- ---------------------------------------------------------------------- -->   
<main layout:fragment="main">
<script src="/js/admin/menu/list.js"></script>

Vuw가 됐는지 테스트해보자

Vue
.createApp({
	data(){
		return{
			test:"hello"
		};
	}
})
.mount("#main-section");

테스트로 모델을 만들었다

<section id="main-section">
<header class="search-header">
    <h1 class="text-title1-h1">알랜드 메뉴 
        <span v-text="test"></span>	
    </h1>

그리고 section 에다가 붙여주는거야!

내일은 콜백이없는 동기식 비동기를 해보자

1. 보충

(1) data methods 차이

1)data

Vue 인스턴스의 정보에 대한 속성

2) methods

Vue 인스턴스의 함수에 관한 정보이다.

2. 회고

1) Vue 를 처음으로 배우는데 낯선방식이다.

자주 사용해서 익숙해지게끔 하고싶다!

'배움 __IL > TIL 1기' 카테고리의 다른 글

TIL : 81번째- 230331 [3-4-금] (0)	2023.03.31
TIL : 80번째- 230330 [3-4-목] (0)	2023.03.30
TIL : 78번째- 230328 [3-4-화] (1)	2023.03.28
TIL : 77번째- 230327 [3-4-월] (0)	2023.03.27
TIL : 76번째- 230324 [3-3-금] (0)	2023.03.24

현재글TIL : 79번째- 230329 [3-4-수]

모-코드

Today :
Yesterday :

모-코드