FrontEnd/Javascript (26) 썸네일형 리스트형 생성자 함수, 객체 메서드(Object method), 계산된 프라퍼티(computed property)에 대하여 https://www.youtube.com/watch?v=8hrSkOihmBI&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=2 생성자 함수의 내부 실행절차 new함수명(); ==>> 빈객체를 만들고 this에 할당함. ==> this객체 안에 property들을 추가 ==>>this를 반환(실제로 위와 같은 코드는 당연히 없음) 단 어떠한 함수라도 위와 같이 new를 붙여서 생성하면 위와 같은 알고리즘이 동일하게 적용됨. 따라서 생성자 함수는 첫 앞글자를 대문자로 해주는 것이 관례임. 객체 메서드에 대하여 //앞서 배운 내용 몽땅 적용해 보기 let n="name"; let a="age"; const user={ [n]:"Han", [a]:29, [5]:6,//키가 .. 프로토타입을 이용한 객체의 상속 JS에서 상속을 할수 있는 방법은 2가지가 있다. 프로토타입을 이용한 상속과 extends를 이용한 클래스 상속. 여기서는 프로토타입을 이용한 상속을 알아본다. 프로토타입을 이용한 상속은 xxx.__proto__=yyy 를 통하여 계속하여 이루어질수 있다. //최고조상이 될 car객체 const car={ wheels:4, drive(){//이름지어보기. 지어짐. 하지만 이렇한 형식으로 객체안의 함수를 정의할 수 있음. console.log("Driving..."); } } //car객체를 상속할 bmw, audi, Lamborghini const bmw={ color:"red", navigation:1, }; const audi={ color:"blue", } const Lamborghini={ col.. Class, Class에서의 상속과 생성자 호출 참고: https://www.youtube.com/watch?v=OpvtD7ELMQo&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=15 //생성자 함수에 의한 객체 생성 예 // 예1. const User=function(name, age){ this.age=age; this.name=name; this.showName=function(){ console.log(this.name); } } let joe=new User("Joe", 30); console.dir(joe); // 예2 function User2(name,age) { this.name = name; this.age=age; this.showName=function(){ console.log(this.na.. async, await 2 참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17 const f1=()=>{ return new Promise((resolve, reject)=>{ setTimeout(() => { resolve("1st order is completed"); }, 1000); }); } const f2=(message)=>{ console.log(message); return new Promise((resolve, reject)=>{ setTimeout(() => { resolve("2nd order is completed"); // reject(new Error("Error occurred ba.. async, await 참고: https://www.youtube.com/watch?v=Uh8u20MD978&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=17 async, await 를 사용하면 promise의 then메서드를 체인형식으로 사용하는 것보다 가독성이 좋아짐. 기본적으로 함수선언문 앞에 async를 붙여주면 promise를 반환함(단, 물론 반환값이 없으면 아무것도 반환하지 않음). await 키워드는 반드시 async 함수 안에서만 사용할 수 있음. 일반함수에서 사용하면 에러 발생함. await키워드 다음에는 Promise객체가 옴. 그 Promise가 처리 될때까지 기다림(기다린다는 것은 setTimeout과 같은 딜레이 함수가 종료될때까지 기다린다는 것을 의미). asyn.. 프로미스(Promise)2 https://www.youtube.com/watch?v=3Ao3OroqQLQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=16 const f1=(callback)=>{ setTimeout(() => { console.log("1st order is completed"); callback(); }, 1000); }; const f2=(callback)=>{ setTimeout(() => { console.log("2nd order is completed"); callback(); }, 3000); } const f3=(callback)=>{ setTimeout(() => { console.log("3rd order is completed") callback(); },.. Java와 JS의 동기적 비동기 구현방식 참고: https://velog.io/@pllap/Java%EC%97%90%EC%84%9C%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 간단히 요약하면 비동기 구현을 한다고 말로는 표현하지만 두 언어 모두 그 안에는 동기함수인 콜벡함수가 공통적으로 쓰인다. 다만 문법의 이름이 다르다는 것이다. JS는 Promise, async, await라는 문법이 있고 Java에는 Thread, ExecutorService, CompletionHandler등등이 있는 것이다. 비동기 처리한다고 하여 순수히 비동기로 구성하는 것이 아니다. 글에서 나와 있다시피 비동기로 작동하는 코드 사이에 동기 함수를 끼워넣어서 코드.. 프로미스(promise) https://www.youtube.com/watch?v=3Ao3OroqQLQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=16 콜백함수란(callback)? 어떤 일이 완료된 후 실행되는 함수(=어떤 행위에 뒤이어 연이어 실행되는 함수). 즉, resolve는 성공한 후 실행되는 함수이므로 콜백함수이고 reject역시 실패한 후에 실행되는 함수이므로 콜벡함수이다. 여태까지한 코드(위의 것들)는 판매자의 코드임. =========================================================================================== 지금부터는 소비자의 코드. const pt=new Promise((resolve, reject.. 이전 1 2 3 4 다음
