※ Keep in mind
본 내용은 웹개발과정의 강의 중 내용을 복습을 위해서 메모한 것에 불과한 것입니다. 이러한 연유로 강의내용을 오인한 나머지 오기재 및 불기재가 있을 수 있으니 '참고'만 해주시길 바랍니다. 저의 경우에도 본 내용을 단순히 읽은 것이 결코 저의 것이라고 생각하지 않습니다. 본 내용은 복습을 위한 초기 내지 중간 과정에 불과한 것이고, 이후에 내용을 보충 후 인출 및 설명하기 과정이 있어야 비로소 복습의 단추가 어느 정도 마무리되어간다고 볼 수 있습니다.
따라서 당초에 본 내용은 비공개였습니다. 그럼에도 불구하고 본 내용을 공개한 점은 함께 공부하는 동료들과 나눔을 바탕으로 배움과 성장의 공진화라는 소기의 목적을 달성에 어느 정도 도움이 될 수 있기 때문이라고 생각합니다.
I. Vue
1. 들어가며
(1) Vue 2.0
1)
2.0은 인기가 덜했던 이유가 멀티플랫폼 지원을 안했어
2)
2.0 에는 new Vue로 해서 썻어! 지금과는 큰 차이는 없어
Vue안에서 는 Vue 객체가 가지고 있는 속성 등에 대해서는 이고,options 이라고 해
내가 어떻게 Methods로 데이터 속성 어떻게 활용할지에 따라 행위가 달라지는거야!
3)
지금까지 data, methods만 썻자나! 이제 Component쓰고, LifeCycle 관련된거도 써야해
이게 아까봤던것 처럼 el, data,methdos 야 이런것을 options api라고해
data라는 녀석에 들어가는것은 function이야
Vue라는 어플리케이션이 CteateApp으로 행동하는데, Data function호출해서 Model로 가져가
우리가 배운것은 옵션들을 하나씩 채우면서 기능을 배우는거야!
<- 보충 설명 ->
우리가 쓰는 Vue.js는 MVC 프레임웍이야
MVC라는건 곧 view를 직접 컨트롤 안하고 model로 binding하는거야
우리가 생각해야할 것은 model을 view에다가 어떻게 전달할 것인가를 이해하는것이 첫번째야
어떻게 구현하기보다, 어떻게 전달해서 내가 view를 어떻게 다루느냐! 뷰에서 얘를 바인딩 할 때 어떻게 하는지를 이해해야해
즉 Vue 엔진을 어떻게 활용할지
방법에 이용하려면 model을 반환함수가 있어야해
전달할게 많으면 묶어서 전달하자나 묶으면 뭐가사용돼? 오브젝트가 사용돼!
그래서 오브젝트 사용하면 이런 묶은 도구가 사용이 돼!
그리고 오브젝트의 key,value 세트 각각은 다 옵션들이야
4)
Vue가 가진 객체가 기본객체가 뭐냐 이 객체에 대한 옵션이 뭐냐 이런 것들이야
MVC는 2way인데, 리액트는 1way야 그래서 dom을 써야해
jsx라는 이상한표기법으로 XML규칙에 맞추고 주석을 못쓰고 다 고쳐야해 Vue는 그냥 쓸 수있어
options API로 있는 2.0을 쓰다가 3.0을 쓰면 차이가 약간있어
2.0 에서는 Vue객체 만드는거부터 시작하지만 3.0 은 달라졌어
위가 2.0 아래가 3.0이야
좌 3.0인데 마운트 방법이 달라졌어 다른건 큰 차이가없어
(2) 3.0
1)
function을 넣어도 되지만 안써도 되면 안쓰는게 좋아
< function O >
Vue
.createApp({
data : function(){
return{
test:"hello"
};
}
})
.mount("#main-section");< function X >
Vue
.createApp({
data(){
return{
test:"hello"
};
}
})
.mount("#main-section");가급적 아래 처럼 하는게 좋아
2)
일단 수제청 누르면 실행되는 함수 만들거야!
Vue
.createApp({
data(){
return{
test:"hello"
};
},
//인스턴스의 행위
methods:{
//이름설정하고 핸들러 받기!
categoryClickHandler(e){
console.log("clocked");
},
}
})
.mount("#main-section");methods 로 handler 만든다.
<ul>
<li class="menu-selected">
<a href="/menu/list">전체</a>
</li>
<li>
<a href="">커피음료</a>
</li>
<li @click.prevent="categoryClickHandler">
<!-- default 에 대한 prevent -->
<a href="">수제청</a>
</li>
<li>
<a href="">샌드위치</a>
</li>
<li>
<a href="">쿠키</a>
</li>
</ul>이를 받아줄 수있는 onclicked을 만든다.
이거를 @ 지시자로 하며 V-on 을 의미해
그래서 @click를 하면 onclicked랑 같아
3)
<ul>
<li class="menu-selected">
<a href="/menu/list">전체</a>
</li>
<li>
<a href="">커피음료</a>
</li>
<li data-id="2" @click.prevent="categoryClickHandler">
<a href="">수제청</a>
</li>
<li>
<a href="">샌드위치</a>
</li>
<li>
<a href="">쿠키</a>
</li>
</ul>원래 data-id는 thymeleaf로 심어야하는데 임시로 심어보자!
//인스턴스의 행위
methods:{
//이름설정하고 핸들러 받기!
categoryClickHandler(e){
console.log("clocked");
this.load(e.target.dataset.id);
},
load(cid){
console.log("load");
//XHR (XmlHttpRequest)
//-callback을 이용한 비동기처리
//Fetch API
//-promise 이용한 비동기처리
}
}여기다가 load() 함수를 클릭됐을 때 호출하는거야
이 경우 클릭한 data-id가 2인것을 가지고 호출하는거야
서버에다가 데이터를 요청하는건 두가지야
외부에서 오는 라이브러리가 아냐
브라우저가 제공하는건 기본 두가지야 하나는 XHR, Fetch API야!
<XHR>은 나중에 호출해달라는 콜백함수로 비동기처리하는거야!
그러면서 부탁 혹은 위임 이라고해서 delegation function이라고 해!
어쨋든 나중에 콜백하려면 delegation 위임이 기본이야!
4)
콜백의 문제 콜백이 콜백세상때문에 동기로 가고싶어졌어 그래서 promise가 대두됐어
그런데 동기로 쓰려면 반드시 비동기는 하나 가져야해
메인을 안먹는 한도에서 거기서 빠진흐름으로 가면서 거기서 블록킹하는 동기형으로 쓰는거야
화면에 보면 복잡해 promise해보자
methods:{
//이름설정하고 핸들러 받기!
categoryClickHandler(e){
this.load(e.target.dataset.id);
console.log("click");
},
async load(cid){
console.log("load");
//XHR (XmlHttpRequest)
//-callback을 이용한 비동기처리
//Fetch API
//-promise 이용한 비동기처리
}
}함수 앞에다가 async를 붙여주자!
잠깐! -//
비동기 처리하는 방식으로 하면 순서가 반대로 나와
categoryClickHandler(e){
this.load(e.target.dataset.id, function(){
console.log("데이터 도착?");
});
console.log("click");
},
// async load(cid){
load(cid, callback){
//콜백함수를 사용하는 request객체의 send();
setTimeout(() => {
console.log("load");
callback();
}, 3000);
//XHR (XmlHttpRequest)
//-callback을 이용한 비동기처리
//Fetch API
//-promise 이용한 비동기처리
}골치 아픈경우야!
비동기처리를 promise에 감싸고 기다리게 해!
기다리다가 데이터 가져오면 실행되게 하는 등으로 동기형으로 바뀌는거야!
2. Promise
(1) 들어가며
1)
2)
<- 우측방식 ->
console.log("clicked");
// load를 호출한다 인수로 2와 data2를 인수로 가진 함수를 인수로 넣어서 호출한다
let data = load(2, function(data2){
console.log("도착한 데이터 : " + data2.name);
console.log("도착한 데이터 : " + data2.yes);
});
//두개의 매개변수를 가지고있다.
function load(cid, callgo){
//비동기함수인 settimeout호출함(1000뒤 호출 위임))
setTimeout(() => {
//1000뒤 log 찍음
console.log("데이터 도착함");
callgo
(
// callgo 함수 인수의 data2 타입은 객체야!
{
name : "hello",
yes : "bye"
}
);
}, 1000);
}콜백방식은 함수로 전달받아서 하는방식으로 해
3) <promise 방법 1번>
<- 좌측방식 -> :
a.
console.log("click");
let data = await load(2); //비동기를 가지는 함수
console.log("도착한 데이터 : "+data.name);
function load(cid){
return new Promise (resolve =>{
setTimeout(() => {
console.log("데이터가 도착하였습니다.");
//return {name:"hello"}; ??
}, 2000);
})
}primise는 JS에서 비동기처리에서 이용되는 거야 주로 서버에서 요청한 데이터를 받아와서 화면에 표시할 때 사용하는거야!
이 방식은 Promise를 쓰는 방식이야 promise는 약속을 해 어떤약속이냐 하면,
"데이터를 다 받아오기 전"까지 "다른것을 실행하지 못하게끔" 하는거야
(즉 화면 출력은 데이터를 받아오기 전에 출력못하게 해서 출력오류를 막는거야!)
<위 코드 load 함수 선언부에서>
promise 인스턴스를 선언하고, 데이터를 받아오는 시간처럼 2초간 딜레이를 주고 데이터 도착log를 띄우는거야
<load 함수 호출부에서 : awiat - 비동기를 가지게끔 하는 함수로>
load를 호출하는데, 2초간 딜레이가 있어 이 경우 await가 없으면 아래의 log("도착...") 을 띄우게 돼 그런데, data.name에는 아직 아무런 데이터 도착이 없기 때문에 undefined가 출력이 돼
이런 경우를 해결하기 위해서 await는 promise와 친구로 있는거야
b.
그런데 await를 쓰는경우 async()가 있어야해 await와 anync() 함수는 같이 가야해 다만 최상위 단에는 있으면 안되기 때문에 별도로 함수로 블럭을 만든뒤에 호출해야해!
(async()=>{
console.log("click");
let data = await load(2); //비동기를 가지는 함수
console.log("도착한 데이터 : "+data.name);
})();
function load(cid){
return new Promise (qq =>{
setTimeout(() => {
console.log("데이터가 도착하였습니다.");
//return {name:"hello"}; ??
qq({name : "hello"});
}, 2000);
})
}async() 우선 화살표 함수로 정의를 해
그리고 곧바로 호출하기위해서 우선 ()로 블럭을 만들고 나서 바로다음에 ()을 만들어서 호출을 하는 방식이야
c.
그런데 사실 log로 "도착한데이터..." 는 출력이 안돼
왜냐하면 promise의 인자가 사용되지 않아서 return 되지 못하고 무한 loop 상태야
(async()=>{
console.log("click");
let data = await load(2); //비동기를 가지는 함수
console.log("도착한 데이터 : "+data.name);
})();
function load(cid){
return new Promise (resolve=>{
setTimeout(() => {
console.log("데이터가 도착하였습니다.");
//return {name:"hello"}; ??
resolve({name : "hello"});
}, 2000);
})
}다른건 다 됐는데 "도착한 데이터"는 출력이 안돼! 즉 반환은 return 으로 하는게 아니야
Promise의 인자인 resolve()를 호출함으로서 반환되는거야 (왜냐하면 라이브러리에서 그렇게 하게끔했기 때문이야)
resolve()는 함수야 반환받는 return 값이 있어 result로 호출하지 않으면 계속 기다리는거야
그래서 다음라인 실행이 안돼 resovle 로 반환하는 hello을 해주면 돼
3. fetch API
(1) fetch 개념
1) 들어가며
XHR 이 아닌 FetchAPI는 promise기반 요청도구야 await등을 쓸 수있어 이게 편하면 promise기반을 쓰면 돼
그런데 최근들어서는 코드 복잡도가 callback을 넘겨주는 방식을 불편해하는경향이있어
promise가 나와서 많은 사람들이 좋아헀어
promise기반으로 요청도구를 써보자!
2) fetch 사용해보기
menus url로 api 를 가져다 써
methods:{
let response = await fetch("/menus");
let list = response.json();
console.log(list);
},
fetch()는요청으로 promise가 return 이 돼! 도착하면 바꿔주는거야
await 가 붙으면 앞서 본것처럼 promise가 데이터를 불러오는동안 await는 기다리면서 아래의 list 등이 실행안되게 "동기적"으로 기다려
fetch는 XHR콜백함수 방식에서 open() send()작동을 한번에 하는거야!
methods:{
//이름설정하고 핸들러 받기!
async categoryClickHandler(e){
let response = await fetch("/menus");
let list = await response.json();
console.log(list);
},list 변수 값에다가 await를 붙여서 response가 도착할 때 까지(마찬가지로 promise) 같이 기다리게 하면 돼
await는 비동기적인것을 동기적으로 바꿔버릴때 (출력오류를 막기위해) 이용되는거야!
(2) fetch 방법 1
1)
<- promise 방법 1 : async await ->
보편적이고, 코드가 짧다.
methods:{
categoryClickHandler(e){
this.load(2);
},
async load(cid){
// menus 에다가 요청함
let response = await fetch("/menus");
let list = await response.json();
console.log(list);
}
}
이제 load에다가 클릭이벤트가 발생했을 때 출력되게끔 하자
이경우 await가 있기 때문에 asnyc를 붙여주어야해!!
<다시 정리>
fetch가 반환하는게 promise객체야
fetch 가 반환하는 promise고 같이 await를 쓰는거야
fetch 는 비동기처리 함수라서 promise반환하는거야
그리고 promise는 awiat만나서 reslove(promise의 인자 리턴) 호출할 때 까지 기다려
즉 await는 비동기흐름을 쓰지 않게 하는거야!
요청을 현재 이 흐름에서 처리하게 하는거야 그게 가능한건 promise라는 객체가 await 만나는거야
2)
여기는 XHR 에서는 send 등이 있는데
fetch는 간소화 해서 이거 하나로 XHR에 open send둘다 같이에 중요한건 둘다 비동기 함수야
Callback 담는 전용으로 promise로 둔거야
await로 하는것도 있지만 비동기식으로 callback 이용해서가능해
: 내가 실행할게 약속할게 약속해 했어? 그러면 해줄게
load(cid){
//이 함수를 이렇게 하는건 불편해
//따로 담을 그릇 만들겠다고
//이게 promise야!
// let promise = fetch("/menus", function(response) {console.log("도착?")});
//콜백 주워담는걸 만들자 이게 promise의 또 다른 방식이야
let promise = fetch("/menus");
promise //그래서 promise에다가 함수를 담아주자!
.then(qq => {
console.log("도착했니?");
console.log(qq.json());
}
);
// , function() {console.log("도착?")});
}위 fetch() 의 인수를 보면 url 인자와 동시에 콜백funtion을 받아 그런데 선언도 그렇고 너무 불편해!
이거를 줄여서 간단하게 해보자
fetch 로 promise 객체를 let promise 에 담아줘
그리고 그 promise 에서 .then 을 써서 다음
(3) fetch 방법 2
1)
<- promise 방법 2 : promise 안 promise ->
load(cid){
//콜백 주워담는걸 만들자 이게 promise의 또 다른 방식이야
let promise = fetch("/menus");
promise //그래서 promise에다가 함수를 담아주자!
.then(qq => {
console.log("도착했니?");
let promise = qq.json();
promise
.then(ww=>{
console.log(ww);
})
}
);
// , function() {console.log("도착?")});
}이렇게 하면 되긴한데, 중첩돼서 싫어
(4) fetch 방법 3
1)
<- promise 방법 3 : fetch-then 연속 ->
load(cid){
//콜백 주워담는걸 만들자 이게 promise의 또 다른 방식이야
let promise = fetch("/menus");
promise //그래서 promise에다가 함수를 담아주자!
.then(qq => {
return qq.json();
})
.then(ww =>{
console.log(ww);
});
// , function() {console.log("도착?")});
}<then> 은 비동기처리가 끝났다는거야 그리고 끝나고 함수를 실행한다는거야
return 이 있으면 이것을 담아서 다음 then을 보내는거야
2)
then 절은 두번 째 인자도 가능해
.catch 는 오류가 발생하면 처리가 가능한거야!
에러는 여러가지야 만약 요청했는데 시간이 오래걸려서 문제가 있을 수도있고
거기에 따라서 error에 따라서 출력을 할 수도있어! error은 어떻게 처리할까?
then은 바로앞 catch는 바로 에러발생시 점프
let promise = fetch("/menus99");
promise //그래서 promise에다가 함수를 담아주자!
.then(qq => {
return qq.json();
// console.log("도착했니?");
// let promise = qq.json();
// promise
// .then(ww=>{
// console.log(ww);
// })
})
.then(ww =>{
// console.log(ww);
return ww[0];
})
.then(ee =>{
console.log(ee.name);
})
.catch(error=>{
console.log("12345678987654321");
console.log(error);
})
fetch 에서 menus99 라는 존재하지 않는 url을 요청한다
만약 존재하지 않으면 catch로 가서 다음과 같이 출력을한다. (name 자체가 존재하지않음)
1. 보충
(1) promise
주로 서버에서 받아온데이터를 출력하기 위해서 이용이 되는것
promise 와 await는 함께 가서 비동기 속에서 동기화 시키는것이고 이 경우 await가 있으면 async로 엮어주는거야
(2) fetch API
XMR 방식은 callback이었다면 fectchAPI는 promise방식으로 하는거야!
2. 회고
1) 오늘 낯선 ES6 방식으로 혼란스러웠다
오늘 모처럼 긴 복습시간을 가졌는데,, 그나마 오늘 수업한것이 정리되어서 다행이다
'배움 __IL > TIL 1기' 카테고리의 다른 글
| TIL : 82번째- 230403 [4-1-월] (0) | 2023.04.03 |
|---|---|
| TIL : 81번째- 230331 [3-4-금] (0) | 2023.03.31 |
| TIL : 79번째- 230329 [3-4-수] (0) | 2023.03.29 |
| TIL : 78번째- 230328 [3-4-화] (1) | 2023.03.28 |
| TIL : 77번째- 230327 [3-4-월] (0) | 2023.03.27 |