04-2. JavaScript 고급문법(promise, async await, module 등) with 자바스크립트 제대로 배워볼래?(Section 03)

스터디 4주차 🐬
-JS 강의 섹션3 (자바스크립트 고급 문법)까지 듣기

JavaScript

Section 03. 자바스크립트 고급 문법

11. promise

• promise가 필요한 상황

만약에 다음과 같은 코드가 있다고 해보자

var x=1;
y=callServerData();//서버 호출해서 데이터 받아오는 함수

var z=x+y;

위와 같은 코드에서 y에 함수값 받기전에 다음코드로 넘어가서 y가 비었다고 에러가 날수 있다! 이걸 방지하기 위해 y값 받기전까지 우리는 진행하지 않을게 -> promise!!!

mock server 다운받아서 사용했다. 자세한 설치방법은 개발자의 품격선생님의 유튜브 강의에 나와있다~

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
  var url=
  "https://08fe256f-b1a1-470a-a1d3-0e22ec9aa918.mock.pstmn.io/userList";
    //mock server에 만든 데이터의 request url
    
   // promise
   
   function getData(){
   
   //resolve는 정상적으로 처리됬을때, reject는 무언가 잘못되었을때
   
   return new Promise(function(resolve,reject){
   	axios.get(url).then(function(response){
    console.log(response.data);
    resolve(response.data);
    	});
   
   });
   
   }
   
   //getData 호출 후 리턴값이 resolve로 오고난 후
   getData().then(function(data){
 		for(var item of data.userList){
        console.log(item.name);
        }  
   });
    
</script>

12. async await

async(비동기)-await(기다려줄게!)는 한쌍이다😊

<script>
async function getData2(){
	return (await axios.get(url)).data;
//(await axios.get(url))을 받은 후 그것의 data를 리턴

//위의 url을 일반화 한 코드
async function getData2(path){
	return (await axios.get(path)).data;
}

async function calculateSum(){
	var data=await getData2();
    
    var total=0;
    for(var item of data.products){
    total+=item.price;
    }
    
    console.log(total);
    
}

calculateSum();

</script>

13. module

module 쓰기 전 코드
3-13. beforemodule.js 코드

function log(message){
console.log(message);
}

function error(message){
console.error(message);
}

3-13.beforemodule.html 코드

<script src="./3-13.beforemodule.js">
log("log로 메시지 출력");
error("error로 메시지 출력");
</script>
//이렇게 하면 내가 script에 적은 모든 함수와 변수가 import됨

내가 script에 쓴 함수나 변수중에 일부만 사용하고 사용하고 싶다면? -> module 이용!!!

module 사용 후 코드
3-13.module.js

  export function log(message){
  console.log(message);
  }
  
  export function error(message){
  console.error(message);
  }
  
  export const PI=3.14;

3-13.module.html

<script type="module">
import {log,PI} from "./3-13.module.js";

log(PI);
log("log로 메시지 출력");
</script>

출력값:

• module 사용이 언제 필요할까?

  우리팀이 만든 함수를 가져와서 쓰는데 난 거기서 한두개만 쓸거다 근데 그걸 위해 다 import는 ,,굳이?
  그리고 그 위에 다른사람이 정의한건 다 알진 못하니까 내가 같은 변수명으로 또 선언해서 꼬일수도 있는 불상사 방지!

다른 js가 또다른 js import 하는 경우

3-13.ref.js

import {log,error,PI} from "./3-13.module.js";
log("ref에서 출력하는 메시지");

3-13.module.html

<script src="./3-13.ref.js" type="module"></script>

출력값:

14.class

바로 예시 코드를 봅시다아

• Car class 선언 및 항목별 getter setter 설정

class Car{
	constructor(modelName,modelYear,type,price){
		this.modelName=modelName;
        this.modelYear=modelYear;
        this.type=type;
        this.price=price;
        //this는 이 class를 의미
}
	//modelName getter
	getModelName(){
    return this.modelName;
    }
    
    getModelYear(){
    return this.modelYear;
    }
    
    getPrice(){
    return this.price;
    }
    
    //price setter
    setPrice(price){
    this.price=price;
    }
    
}

let car=new Car("iconic","2021","e","4000");
console.log(car.getModelName()); //iconic 출력

let car2=new Car("genesis","2021","e","7000");
car2.setPrice("7700");
console.log(Car2.getPrice()); //7700 출력

• Class 상속(Car을 상속받은 ElectronicCar 구현)

class ElectronicCar extends Car{
	constructor(modelName,modelYear,price,chargeTime){
    super(modelName,modelYear,"e",price);
    //부모 class인 Car의 생성자를 이용한 super
    
    this.chargeTime=chargeTime;
    }
    
    setChargeTime(time){
    this.chargeTime=time;
    }
    
    getChargeTime(){
    return this.chargeTime;
    }
}

• chargeTime 설정 방법 1 (생성자 이용)

let elecCar1=new ElectronicCar("ionic5","2022","9000",60);

• chargeTime 설정 방법 2 (setter 이용)

let elecCar2=new ElectronicCar("a","2222",33);
elecCar2.setChargeTime(88);