[TIL] 2022-04-05 / 12일차
미음제
·2022. 4. 6. 00:42
오늘 배운 내용
ES6 Module
JavaScript modules - JavaScript | MDN
이 가이드는 자바스크립트 모듈 구문을 시작하는데 필요한 모든 것을 제공합니다.
developer.mozilla.org
ES6에서 자바스크립트에서 동작하는 모듈 기능이 추가되었다. 2019년 11월을 기준으로 모던 브라우저에서 ES6 모듈을 사용할 수 있다.
"module" | Can I use... Support tables for HTML5, CSS3, etc
ECMAScript 2015 (ES6) Support for the ECMAScript 2015 specification. Features include Promises, Modules, Classes, Template Literals, Arrow Functions, Let and Const, Default Parameters, Generators, Destructuring Assignment, Rest & Spread, Map/Set & WeakMap/
caniuse.com
모듈을 사용하기 위해서는 script tag에 type="module" 속성을 추가해 사용한다.
<body>
<main class="app"></main>
<script src="src/Storage.js"></script>
<script src="src/Header.js"></script>
<script src="src/TodoForm.js"></script>
<script src="src/TodoList.js"></script>
<script src="src/App.js"></script>
<script src="src/index.js"></script>
</body>
이런 식으로 html body 하단 부분에 여러 개의 script 파일을 tag로 로드하여도 결국엔 하나의 자바스크립트 파일에서 동작하는 것처럼 전역 객체를 공유했었다. 분리하여 사용했지만 결국엔 하나의 파일에 작성한 셈이다.
ES6에서 모듈 기능을 제공하면서 독립적인 모듈로 동작할 수 있게 되었다. 모듈을 사용하면서 "모듈 자체의 독자적인 스코프"를 갖게 되었고 독립적으로 사용되어 전역 오염을 줄일 수 있게 된다.
이를 통해 스크립트 간 의존성을 훨씬 간편하게 관리할 수 있다. 독립적으로 관리가 되어야 프로젝트가 커지고 오래되었을 대 사용되지 않는 스크립트를 추적하기 쉬워진다. 그리고 스크립트 tag를 사용해 로딩하던 경우 불러오는 순서가 중요했지만 import를 통해 모듈을 불러오면 순서가 중요하지 않게 된다. 사용하는 스크립트 파일이 적어 분리하기 귀찮고 번거롭더라도, 미래를 위한 투자라고 생각하면 된다!
지난 우아한 테크코스 프리코스를 진행할 때, 공통 요구사항으로 "import 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다."라고 적혀있던 것이 위와 같은 설명 때문이었던 것이다.
import - JavaScript | MDN
정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.
developer.mozilla.org
비동기
우선 자바스크립트는 싱글 스레드로서 한 번에 하나의 작업을 수행할 수 있다. 한 작업이 실행되어 끝나기 전까지 다른 동작을 진행하지 못한다. 줄을 서서 기다리는 것.
2022.03.23 - [프로그래머스/데브코스 프론트엔드] - [자바스크립트] 이벤트 루프(Event Loop)
[자바스크립트] 이벤트 루프(Event Loop)
이벤트 루프 Javascript 엔진 Javascript 엔진에는 한 개의 Call Stack과 Heap이 존재한다. Call Stack에 관한 내용은 다음 글을 참고 2020.11.03 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할..
mieumje.tistory.com
동기식으로 동작하는 자바스크립트에서 비동기 처리가 필요한 이유는? 만약 API에 요청을 보냈는데 응답이 도착하는데 10초가 걸린다고 하면, 사용자는 로딩되는 동안 빈 화면을 보아야 한다. 브라우저가 동작을 멈추고 UI가 Blocking 되어 사용자가 인터랙션을 못하는 상황이 발생할 수 있기 때문에 비동기 처리가 필요하다.
예를 들어, 블로그 글을 작성하고 저장을 한 뒤, 메인 화면으로 넘어가는 동작이 있다고 생각해보자. 동기적으로 작동한다면, 글이 저장되기 전까지 메인 화면으로 넘어가는 동작은 진행되지 않는다. 이 과정에서 저장하는 동작이 오래 걸리면 사용자는 다음 행동을 할 수 없게 된다. 비동기로 처리하면 저장되는 동작이 종료가 되지 않더라도 다음 동작인 메인 화면으로의 이동이 실행되고 사용자는 새로운 인터랙션을 진행할 수 있게 된다.
비동기 처리를 할 수 있는 방법들은?
1. addEventListener 함수
두 번째 인자로 넘겨진 함수는 바로 실행되지 않고, 이벤트 리스너가 정의한 이벤트가 발생할 때 실행된다. 예를들어 click 이벤트를 걸어놓으면 무한 루프를 돌며 click 이벤트가 발생했는지 확인하는 것이 아니라 다른 동작들을 하다가 click 이벤트가 발생했을 때 두 번째 인자로 넘겨진 함수가 실행되는 것이다.
2. setTimeout, setInterval
첫 번째 인자로 넘겨진 함수는 바로 실행되지 않고, setTimeout, setInterval의 시간만큼 지난 후에 동작하게 된다. 여기서 setTimeout의 시간을 0으로 넣거나 지정하지 않더라고 바로 실행되지는 않는다.
3. XMLHttpRequest(XHR)
데이터를 비동기로 요청하고, 요청 후의 동작을 비동기로 처리한다. 이를 통해 화면의 새로고침 없이 Http 요청을 보낸 후 데이터를 받아오는 것이 가능하다. xhr 객체를 통해 객체에 load event를 걸고, open 함수를 통해 어떤 url로 보낼 것인지 정의하고 send 함수를 호출한다.
Promise
비동기 작업을 제어하기 위해 나온 개념으로 callback hell에서 어느정도 벗어날 수 있도록 도와준다. callback hell은 callback 함수를 익명 함수로 전달하는 과정이 계속해서 반복되어 indent와 depth가 계속해서 늘어나는 현상이다. 이벤트 처리, 서버 통신과 같은 비동기 처리 과정에서 자주 나타나는 현상이다.
new Promise((resolve, reject) => {});
Promise의 사용 방법은 Promise 객체를 만들어 사용하면 된다. Promise 내부에서 비동기 상황이 종료될 때 resolve 함수를 호출하고 오류 상황일 때 reject 함수를 수행하게 된다. resolve, reject 함수가 호출되는 구문이 있다면 둘 중 하나라도 종료가 되지 않으면 이후의 then이나 catch로 넘어가지 않는다. 비동기 작업이 완료될 때 resolve, reject를 호출하는 방식을 통해서 비동기 작업 표현이 가능하다.
async / await
비동기를 처리하는 가장 진보적인 방법으로 Promise와 연관이 깊다. Promise를 잘 이해하고 있다면 이해하기 쉬울 것이다. async await을 이용하면 Promise를 동기 코드처럼 보이게 작성할 수 있는데 실행은 여전히 비동기로 동작한다. async 키워드 함수가 붙은 함수는 실행 결과를 Promise로 감싸게 되는데 이 이유 때문에 Promise에 대한 이해가 있어야 async await을 이해하기 쉽게 된다는 뜻이다.
비동기 작업을 원하는 함수 앞에 async를 표시하고 비동기 작업이 필요한 곳에서 await을 붙여 사용한다. await을 작성한 곳에서 Promise로 감싸게 되고 Promise의 동작 방식처럼 resolve가 진행된 후 다음 동작이 진행된다.
부족한 점
- Promise
- async/await
느낀 점
Promise를 처음 접했다. 사용해본적이 없어 어떤 개념인지 몰랐고, 이름만 들어본 상태였다. 비동기 처리를 위한 것은 async/await만 있는 줄 알았었다. 이벤트 리스너 함수, setTimeout도 비동기 처리였는지 생각해 보지 못했었다. 인턴 근무 당시 가장 어려웠던 부분이 async/await이었다. 지금도 마찬가지지만.. Promise에 대한 예제들을 찾아보며 학습해야겠다. 주차가 지나고 일수가 늘어나면서 점점 모르는 것들이 쌓여간다. 찾아봐야지, 해야지 하며 미뤄지는 게 많아지는 느낌이다. 본 강의를 따라가기도 벅찬 느낌인데..
콜백을 잘 다뤄야 프로미스를 잘 다룰수 있고 프로미스를 잘 다뤄야 async await을 잘 다룰 수 있다.
제일 안되는 것들 다 묶여있다. 3주 차 과제 끝내고 얼른 시작해보자. 3주 차 과제는 문벅스 강의를 들었던 내용이 일부 교집합이 있어 금방 할 수 있지 않을까 싶다..🤔 갈길이 멀다. 함수형, 선언형, 그리고 비동기.
'프로그래머스 > 데브코스 프론트엔드' 카테고리의 다른 글
| [TIL] 2022-04-18 / 21일차 (2) | 2022.04.18 |
|---|---|
| [TIL] 2022-04-12/13 / 17, 18일차 (0) | 2022.04.14 |
| [TIL] 2022-04-04 / 11일차 (0) | 2022.04.04 |
| [TIL] 2022-04-01 / 10일차 (0) | 2022.04.01 |
| [TIL] 2022-03-31 / 9일차 (0) | 2022.03.31 |
