ES6의 한 가운데서

JavaScript

ES6의 한 가운데서

히키맨 2023. 8. 3. 11:43

예 게으름 좀 피웠습니다. 근데 그렇다고 니가 뭐 어쩔 건데ㅋㅋ 게으르다고 욕하고 허수라고 판별하는 거 말고 니가 뭘 어쩔 수 있는데ㅋㅋ

지난 포스팅 이후로는 주말에 농구도 시원하게 함 했구요, 문래동에도 다녀왔습니다. 롤체도 좀 하고 아주 살판 났다 그쵸

이사 날짜도 확정됐습니다. 9월 20일인데 그것 때문에 요새 여간 머리 아픈 게 아닙니다. 이삿짐 센터 견적 줄여야 해서 집에 있는 물건들도 정리를 해야하구요, 새로운 가구도 알아봐야하고 이래저래 복잡한 게 여럿 있습니다. 안양에 그대로 있으니까 이거 보고 안양 떠나냐고 물어보면 왜 안 읽었냐고 씅내겠습니다

제가 밖에 나갈 때 반바지를 안 입는데 이제는 입어야겠다 싶습니다. 어제 당근거래 하러 나가는데 청바지 입었다가 땅을 치며 후회하고선 마실용 반바지를 장만해야겠다,,싶더라구요. 당근으로는 노트북 샀습니다. 아버지 사무용으로도 쓰고 유튜브도 보실 삼성 노트북 13만원에 업어왔는데 뜻밖의 횡재를 했습니다. 지금 제가 쓰는 노트북이 16년 삼성 노트북 9인가 할텐데 14년 삼성 노트북 9이 어찌된 게 제 노트북보다 빠르고 깔끔합니다. 그래서 저걸 내가 쓸까,,, 싶기도 한데 이래 저래 귀찮은 일 늘리기 싫어서 일단은 아버지 넘겨드렸습니다. 당근 조아요.

할 거 합시다 이제,,

파트 3의 중반부까지구요, destructuring과 import / export, 동기 / 비동기 처리 개념, Promise 객체와 async / await을 배웠습니다. 근데 이게 아무래도 문법 강의다 보니 뭔가를 만들어내고 결과물을 보는 것만큼 재밌진 않네요 역시.

destructuring은 말 그대로 구조 해체입니다. array와 object 데이터들을 감싸고 있는 대괄호와 중괄호를 해체하고 안에 담긴 자료들을 여기 저기 할당할 수 있는 문법인데요. spread operator와 다른 점이라면 역시 할당이 아닐까요. spread operator는 array나 object의 괄호를 벗기고 그 뒤에 다시 괄호를 붙여 deep copy에 사용한다면 destructuring은 괄호를 벗겨서 그 안에 값들을 다른 변수 하나 하나에 집어 넣어준다는 느낌이죠. 예시 코드를 먼저 봅시다

var [a, b, c] = [2, 3, 4];

굉장히 간단하죠. 저러면 그냥 a, b, c에 각각 2, 3, 4 가 할당이 되는 겁니다. 변수에 들어올 값이 변수의 개수보다 적다면 변수에 default parameter를 설정하면 되구요, 그게 안되어 있다면 undefined로 값이 할당됩니다. object 데이터에서도 비슷한 방식으로 사용하는데,

var { name, age } = { name: 'kim', age: 19 };

이런 식으로 씁니다. name에는 'kim'이, age에는 19가 할당됩니다. 다만 object의 데이터를 destructuring 하려면 변수의 이름이 key 이름과 같아야한다는 제약이 있습니다.

var { a, b } = { name: 'kim', age: 19 };

이렇게 쓰면 a, b에는 undefined만 들어가게 된다는 말씀. 반대로 여러 변수들을 오브젝트에 넣는 경우도 있는데 예를 들어

var name = 'lee';

var age = 40;

var obj = { name: name, age: age };

이런 식으로 보통 key에 따른 값을 할당한다면 키와 값의 변수 이름이 모두 같다는 조건 아래에

var name = 'lee';

var age = 40;

var obj = { name, age };

이런 식으로 object 데이터를 만들어낼 수 있다고 합니다. 근데 이건 destructuring은 아닌 것 같음,,, 뭔가,,,뭔가임,,

destructuring은 함수의 매게변수에서도 가능한데 이건 코드로 보는 게 확실히 이해하기 편할 것 같습니다.

object에 있는 데이터를 매개변수로 넘기는 경우

var obj = { name: 'kim', age: 14 };

function dest({ name, age }) {

console.log(name);

console.log(age);

}

dest({ obj }); //'kim' 14

array에 있는 데이터를 매개변수로 넘기는 경우

function dest([a, b]) {

console.log(a);

console.log(b);

}

dest([324, 542]); //324 542

그러니까 살짝 함수한테 '매개변수로 000타입의 데이터가 들어올테니 준비를 해라, 그리고 그 데이터들을 나눠서 다뤄라' 라고 미리 귀띔을 해주는 용도 정도라고 생각하면 저는 편할 것 같습니다.

이 다음으로 배운 게 import / export 인데요,, 사실 이 부분에 대해선 딱히 뭔가 쓰지 않을 생각입니다. 우선 당장 쓸모가 없죠. 당장에는 자바스크립트 파일을 불러올 때 <script src = ' '>와 같은 방법으로 사용하는데 이걸로 부족한 부분이 일체 없구요, 뭐 후에 React를 쓴다거나 전에 배운 Vue에서도 사용하긴 했는데 그건 또 그 때 가서 후딱 받아들일 수 있는 수준의 내용이라 굳이 힘 빼지 않도록 하겠습니다.

그리고 나오는 게 동기 / 비동기 입니다. 자바스크립트는 기본적으로 동기식 처리를 한다고 하네요. 있는 코드를 그대로 읽으면서 한 줄 한 줄 차례대로 실행한답니다. 그런데 자바스크립트는 사실 근본부터가 브라우저와 깊게 연관이 되어 있잖아요? 그래서 그런지 Web API와 연관된 함수들을 사용하면 그 땐 비동기식 처리를 하게 됩니다. 여기서 말하는 비동기식 처리는 시간이 오래 걸리는 연산을 대기열에 걸어 놓고 그 외의 연산을 먼저 진행하는 방식입니다.

console.log(1);

console.log(2);

console.log(3);

이런 코드가 있다면 콘솔창에는 1 2 3 차례대로 잘 찍힐 겁니다. 그런데 만약

console.log(1);

setTimeout(function(){

console.log(2);

}, 1000);

console.log(3)

이렇게 생긴 코드라면 어떨까요. 1이 콘솔창에 찍히고 1초 후에 2가 찍히고 3이 찍힐 것 같습니다만, 1 3이 찍히고 1초 후에 2가 찍히게 됩니다. setTimeout() 함수가 위에서 말한 Web API와 연관된 함수이기 때문이지요. setTimeout()이 Web API와 연관된 함수라면 setInterval() 역시 그럴 것 같은 느낌이구요, 그 외에도 ajax 통신을 할 때 사용하는 함수나 이벤트 리스너를 다루는 함수들도 Web API와 연관된 함수라고 하네요. 그 말인 즉, 저런 함수들도 비동기식 처리에 포함된다-입니다.

그래서 이후로 코드의 순차적 실행을 위한 여러 코딩 패턴을 익히게 되는데요, 우리가 그 동안 쓰던 콜백함수도 사실 그 중 하나였던 겁니다. 그 외의 코딩 패턴 중 하나로 Promise 객체를 사용하는 방법이 있습니다. 이것도 코드를 쭉 보면서 얘기를 하는 게 나을 것 같네요.

var promise = new Promise(function(resolve, reject){

resolve();

});

promise

.then(function () {

console.log(1);

})

.then(function () {

console.log(2);

})

.then(function(){

console.log(3);

})

.catch(function(){

console.log(100);

})

.then(function(){

console.log(200);

})

진짜 좀 그렇게 생겼다 그쵸,,,?? 우선 new Promise();로 Promise 객체를 하나 만듭니다. 그리고 저 생성자 함수의 매개변수에는 콜백함수가 하나 들어가는데요, 그 콜백함수의 매개변수로는 resolve(성공), reject(실패)가 들어갑니다. 콜백함수 안에서 resolve 함수를 실행하는 건 잠시 미뤄두고,,,,

그렇게 만들어진 객체 promise의 메소드로 .then()과 .catch()를 사용하여 코드의 순차적 실행을 구현할 수 있습니다. 그럼 .then()과 .catch()는 무슨 차이일까 싶은데요, 객체를 생성하는 단계에서 콜백함수에 전달한 resolve와 reject의 실행에 따라 .then()이 실행되느냐, .catch()가 실행되느냐가 갈립니다. 객체 생성 단계의 콜백함수에서 resolve()가 실행되면 이후 promise 객체는 .then()에 적힌 내용만 실행합니다. 위 코드에 따르면 콘솔창에는 1 2 3 200 이 찍히겠군요. 만약 resolve()가 아닌 reject()가 실행된다면 콘솔창에는 100 200 이 찍히게 됩니다.

이걸 어디에 써먹으면 좋을까 싶은데요,, 가령 브라우저에서 이미지를 로드하는데 이미지가 잘 로드되면 ~~를 실행하고 이미지 로드에 실패하면 에러 메시지를 띄워주려고 할 때 쓰일 수 있습니다.

var promise = new Promise(function (resolve, reject) {

document.querySelector('#main-img').addEventListener('load', function () {

resolve();

});

document.querySelector('#main-img').addEventListener('error', function () {

reject();

});

promise

.then(function () {

alert('이미지 로드 성공!');

})

.catch(function () {

alert('이미지 로드 실패,,');

});

이런 식으로 말이죠. resolve()와 reject()에는 인자를 전달할 수 있는데요 저기서 전달된 인자는 .then() 혹은 .catch() 내의 콜백함수에서 그대로 가져다가 쓸 수 있기까지 한답니다. 근데 이제 이 Promise 객체 만들고 뭐 또 promise 가져다가 뭐 하는 게 굉장히 번거롭다고 생각한 사람이 있어서 그랬는지 여기에 async라는 문법이 들어오게 됩니다.

그냥 다른 게 아니고 함수를 정의할 때 function 앞에 async 다섯 글자만 딱 더해주는 건데요, 그렇게 하고 나면 이후에 함수를 실행했을 때 함수를 실행한 자리에 Promise 객체가 반환되게 됩니다. 함수를 실행한 자리에 Promise 객체가 반환된다는 건 그 뒤로 .then()을 쓸 수 있다는 것이겠지요? (왜 우리가 ajax 통신할 떄 쓰는 fetch() 함수도 뒤에 .then() 붙이고 그러지 않습니까? 사실 그 함수도 Promise 객체를 반환하고 있었던 거임ㄷㄷ) 다만 성공, 실패 여부를 판별할 순 없어서 .catch() 말고 .then()을 써야 합니다.

그리고 async 붙은 함수가 반환값을 갖고 있다면 .then(콜백함수)에서 콜백함수의 인자로 반환값을 전달할 수 있다는 사실,,, 윗 문단까지 종합해서 async를 사용한 코드를 보자면

async function sync() {

return 344;

}

sync()

.then(function (a) {

console.log(a)

});

이러면 콘솔창에는 344 가 찍히겠지요??

뭐 일단 대충 이 정도 입니다. 동기 / 비동기 처리를 수월하게 하기 위한 일종의 코드 패턴을 익히는 게 주된 내용이었던 것 같습니다만, 사실 아직 실제 웹페이지를 만드는 데 있어서 동기 / 비동기 처리를 수월하게 처리해야 하는 이유를 잘 모르겠을 뿐더러 저 문법들의 실용성에 대해서도 의문이 있기 때문에 나중에 실력이 늘고 난 뒤에 다시 이 글을 보며 정말 건방진 생각을 했구나,, 했음 하는 바램이 있습니다. 개발자 친구 하나가 전에 자바스크립트 실력은 비동기 처리를 얼마나 잘 다루는 지로 가늠할 수 있지 않을까,,? 했는데 아직은 실감을 하지 못하는 레벨이라고나 할까요,,,

일단 배운 내용은 여기까지구요, 늦지 않게 금방 돌아오겠습니다. 아마 다음 포스팅이 ES6의 마지막 포스팅이지 않을까 합니다. ES6 다 듣고 나면야 뭐 Node.js 들을 것 같군요,, 그럼 ㅃ2