node - 2. 알아야 하는 javascript

더북(TheBook): Node.js 교과서 개정 2판

* 위 내용을 정리하였음

2.1 ES2015+

2.1.1 const, let

- const 상수

- let 변경여지 있는 변수

- const, let으로 var를 대체하여 사용한다.

 

2.1.2 템플릿 문자열

const num1 = 1;
const num2 = 2;
const string = `$(num1) 더하기 '$(num2)'`

- 백틱으로 감싸서 새롭게 문자열을 정의하면 변수를 넣을 수 있다.

 

2.1.3 객체 리터럴

var sayNode = function() {
  console.log('Node');
};

const newObject = {
  sayJS() {
    console.log('JS');
  }
  sayNode,
  [es + 6]: 'Fantastic'
};

newObject.sayNode(); // Node
newObject.sayJS();  // JS
console.log(newObject.ES6); // Fantastic

- 객체에 메서드를 연결할때 sayJS : function(){}처럼 안써도 됨.

- sayNode: sayNode 처럼 객체의 속성명과 변수명이 일치하다면 :생략 가능

 

2.1.4 화살표 함수

function add1(x,y) {
    return x+y;
}

const add2 = (x,y) => {
    return x+y;
}

const add3 = (x,y) => x+y;

var relationship1 = {
    friends: ['a', 'b', 'c'],
    logFriends: function () {
        var that = this;
        this.friends.forEach(function(friend) {
            console.log(that.name, friend);
        });
    },
};

relationship1.logFriends();

const relationship2 = {
    friends: ['a', 'b', 'c'],
    logFriends: function () {
        var that = this;
        this.friends.forEach(friend => {
            console.log(this.name, friend);
        });
    },
};
relationship2.logFriends();

- relationship1은 function에서 this에 접근할 수 없어서 that으로 간접접근한다.

- relationship2는 화살표함수를 사용하여 바로 this에 접근할 수 있다.

- 기본은 화살표, this를 사용할때는 둘중 선택 하면 된다.

 

2.1.5 구조분해 할당

- 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 표현식

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

 

2.1.6 클래스

- 다른 언어처럼 클래스 기반으로 동작하지는 않고 프로토타입 기반으로 동작하지만 표현을 클래스처럼 나타낼 수 있다.

class Human {
    constructor(type = 'human') {
        this.type = type;
    }
    
    static isHuman(human) {
        return human instanceof Human;
    }
    
    breathe() {
        alert('haamm');
    }
}

class Zero extends Human {
    constructor(type, firstName, lastName) {
        super(type);
        this.firstName = firstName;
        this.lastName = lastName;
    }
    
    sayName() {
        super.breathe();
        alert{`${this.firstName} ${this.lastName}`);
    }
}


const newZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(newZero); // true

 

2.1.7 프로미스

- 비동기처리, 특히 이벤트를 ES2015부터는 콜백대신 프로미스 기반으로 구성한다.

- 먼저 프로미스 객체를 생성해야 한다.

- 생성자에 resolve, reject를 매개변수로 갖는 콜백함수를 넣어준다.

- 우리가 수행한 비동기 작업이 성공하면 resolve가 호출되고 실패의 경우 reject가 호출된다.

const condition = true;
const promise = new Promise((resolve, reject) => {
   if (condition) {
       resolve('success');
   } else {
       reject("fail");
   }
});

promise.then((message) => {
        console.log(message);
    })
    .then((message2) => {
        console.log(message2);
        return new Promise((resolve, reject) => {
           resolve(message2); 
        });
    })
    .catch((error) => {
        console.error(error);
    })
    .finally(() => {
        console.log('must');
    });

- promise가 실행되고 condition에 따라 resolve('success')가 호출되면 then절이 실행되고 'success'를 message에게 전달한다.

- promise가 실행되다 conditon이 false가 되어 resolve('fail')이 호출되면 catch절이 실행되고 'fail'이 message에게 전달된다.

- 즉 프로미스는 실행은 바로 하되 결과값을 나중에 받는 객체이다.

- 첫번째 then절에서 promise를 반환하면 두번째 then절을 수행할 수 있다. 만약 순차적으로 method1, method2를 실행해야 한다면 method1, method2는 promise객체를 반환해줘야 한다.

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');

Promise.all([promise1, promise2])
    .then((result) => {
        console.log(result); // ['성공1', '성공2']
    })
    .catch((error) => {
        console.log(error);
    })

- promise1, promise2를 한꺼번에 받아 모두 resolve가 되면 then절을 수행한다.

- result에는 성공1, 성공2가 배열로 들어있다.

let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout( function() {
    resolve("성공!")  // 와! 문제 없음!
  }, 250)
})

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage)
});

 

2.1.8 await/async

- 프로미스를 사용한 코드를 더 깔끔하게 줄여준다.

- await동작을 기다리고 다음 줄이 실행된다.

- asynce 함수만 await을 할 수 있다.

- for문으로도 처리가 가능하다.

async functinon findAndSaveUser(Users) {
    try {
        let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({gender:'m'});
        //
    } catch (error) {
        console.error(error);
    }
}

const findAndSaveUser = async (Users) => {
    try {
        let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({gender:'m'});
        //
    } catch (error) {
        console.error(error);
    }
};

const promise1 = Promise.resolve('success1');
const promise2 = Promise.resolve('success2');
(async () => {
    for await (promise of [promise1, promise2]) {
        console.log(promise);
    }
})();

- async 함수의 반환값은 항상 Promise로 감싸진다. 따라서 얼마든지 then절을 붙일 수 있다.

 

2.2 프론트엔드 자바스크립트

2.2.1 AJAX

- AJAX(asynchronous javascript and xml)은 비동기적 웹 서비스를 개발할때 사용하는 기법이다.

- xml, json을 사용한다.

- 즉 페이지 이동없이 서버에 요청을 보내고 응답을 받는 기술이다.

- 웹사이트의 페이지 이동없이 새로운 데이터를 불러온다면 AJAX기술을 사용하는 것이다.

- ajax요청은 jquery나 axios를 이용해서 보낸다.

(async () => {
    try {
        const result = await axios.get("https://www");
        console.log(result);
        console.lot(result.data);
    } catch (error) {
        console.error(error);
    }
})();

- 위 예시에서는 즉시 실행을 위해 익명함수로 감쌌다. 

- 인수로 넘긴 주소에게 요청을하여 결과를 받아온다.

(async () => {
    try {
        const result = await axios.post("https://www", {
            name:'jsdysw',
            birth:'500',
        });
        console.log(result);
        console.lot(result.data);
    } catch (error) {
        console.error(error);
    }
})();

- post요청으로 데이터를 서버에게 보낼 수 있다.

 

2.2.2 Formdata

const formData = new FormData();
formData.append('name', 'zerocho');
formData.append('item', 'orange');
formData.append('item', 'melon');

formData.has('item'); // true
formData.get('item') // orange
formData.getAll('item') // ['orange', 'melon']

formData.append('test', ['hi', 'zero']);
formData.get('test'); // hi, zero
formData.delete('test')

- 이렇게 formdata를 만든다.

async () => {
    try {
        const formData = new FormData();
        formData.append('name', 'zerocho');
        formData.append('item', 'orange');
        formData.append('item', 'melon');
        const result = await axios.post('https://www', formData)
        console.log(result);
        console.log(result.data);
    } catch (error) {
        console.error(error);
    }
}

- 위에서 만든 formdata를 post요청으로 보내는 예제이다.

 

2.2.3 encodeURIComponent, decodeURIComponent

- 서버 종류에 따라 한글 주소를 인식하지 못하는 경우가 있다.

- await axios.get(`https://www.blablabla${encodeURIComponent('노드')`);

 

- 처럼 encode하면 한글주소가 %EB%85 처럼 변환된다.

- 받는 쪽에서는 decodeURIComponent('%EB%85');로 한글로 복구해서 사용하면된다.

 

2.2.4 데이터 속성과 dataset

<ul>
  <li data-id="1" data-user-name="a">mango</li>
  <li data-id="2" data-user-name="b">melon</li>
  <li data-id="3" data-user-name="c">apple</li>
</ul>

console.log(document.querySelector("li").dataset);
//{ id: '1', 'userName': 'a'}

- data-로 시작하는 것들이 데이터 속성이다.

- dataset을 통해 data-로 시작하는 값들을 꺼낼 수 있다.

- 반대로 dataset.monthSalary= 'male'; 이라고 하면 해당 태그에 data-month-salary = "male"이 들어간다.