JavaScript
-
[JavaScript] Promise에서 한 걸음 더, async & awaitJavaScript 2022. 2. 15. 04:12
Promise에서 만족하지 못하는 상황에서 비동기 처리를 하기 위해 더 편리하고 유용한 키워드인 async와 await에 대해 알아보겠다. Promise에 대한 이해가 부족하다면 아래의 포스팅을 참고하길 바란다. 비동기와 Promise [JavaScript] 비동기와 Promise 비동기라는 단어 자체가 생소할 수도 있고, 몇 번 들어본 경우도 있을테지만 정확히 어떤 개념이고, 동작 흐름에 대해서설명해보라 한다면 쉽지 않았다. 이번 계기로, 비동기 처리에 대해 확실 6ro-29.tistory.com 다음의 코드를 보면 비동기 처리를 하기위해 콜백함수가 중첩적으로 구현되어 있는 걸 볼 수 있는데 이러한 방식으로 구현하게 되면 복잡성도 높아질 것이며, 소위 말해 콜백지옥에 빠지게 된다. 또한 기존 Promi..
-
[JavaScript] 비동기와 PromiseJavaScript 2022. 2. 13. 12:58
비동기라는 단어 자체가 생소할 수도 있고, 몇 번 들어본 경우도 있을테지만 정확히 어떤 개념이고, 동작 흐름에 대해서설명해보라 한다면 쉽지 않았다. 이번 계기로, 비동기 처리에 대해 확실히 짚고 넘어가려 한다. 먼저 비동기를 살펴보기 이전에 동기적인 방식은 무엇을 의미하는지 알아보겠다. 동기(synchronous) 하나의 명령어가 끝날때까지 다음 명령어가 진행되지 않다가 끝나면 순차적으로 실행되는 방식을 말한다. 아래의 코드를 보면 이해하기에 수월할 것이다. console.log(2); console.log(3); console.log(5); console.log(7); 콘솔창의 출력 결과는 2, 3, 5, 7 순서대로 출력되고 명령의 순서는 파악하기 쉽지만 작업이 끝나면 다음 작업이 수행되기에 실행 속..
-
[JavaScript] 클로저(Closure)란?JavaScript 2022. 2. 10. 20:20
자바스크립트에서 어떠한 함수가 존재할 때 해당 함수의 유효 범위는 어디서 실행됐느냐에 따라 달라지는 게 아니라 정의된 위치에 따라서 달라진다. 함수를 호출하는 경우 함수 외부, 내부 가리지 않고 어디서든 작성 가능한 dynamic scope에 해당한다. 그러나, 함수는 딱 한번 정의를 해놓은 후 정적인 위치에 있기에 static scope(lexical scope)를 따르고 있다. 여기서 언급되는 scope는 범위를 의미하는데 구체적으로는 "어떠한 변수에 접근 가능한 범위" 라고 할 수 있다. scope를 크게 보면 global, local로 나뉜다. 클로저를 알기 이전에 필요한 부분을 먼저 살펴보겠다. 전역 범위(global scope)는 내부뿐만 아니라 외부에서도 해당 변수에 접근할 수 있다는 걸 뜻..
-
[JavaScript] 편리함을 위한 ES6JavaScript 2022. 2. 4. 03:48
ECMAScript 자바스크립트는 Netscape communications 로부터 개발된 이후, 성공적이자 마이크로소프트에서 JScript를 개발하였다. 그러나, 두 언어의 호환성 충돌로 특정 기능들이 모든 브라우저에서 동일하게 동작하지 않는 크로스 브라우징 이슈가 발생한다. 이러한 이슈를 해결하기 위해 자바스크립트를 표준화하였는데 이를 ECMAScript라 한다. 뒤에 붙여지는 숫자는 버전을 의미하고, ES6는 2015년에 업데이트된 에디션이다. ES5 이하 버전에서 발생하였던 많은 문제들이 해결되고 React, Vue.js 등 여러 라이브러리들도 유지보수나 가독성 측면에서 개발 환경을 ES6에 맞추게 된다. 현재는 ES7, ES8, , , ES12 까지의 버전이 업데이트 되었으나 ES6에서는 큰 변..
-
[JavaScript] ES6 ModuleJavaScript 2022. 2. 4. 00:44
Moudle 목적에 따라 코드들을 파일 단위로 나누어 분류한 것 모듈의 규칙은 다음과 같다. - 코드 추상화 : 특수한 라이브러리에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다. - 코드 캡슐화 : 코드를 변경하지 않으려면 모듈 내부에 코드를 숨긴다. - 코드 재사용 : 같은 코드를 반복해서 작성하는 것을 피한다. - 의존성 관리 : 코드를 다시 작성하지 않고도 쉽게 의존성을 변경한다. 비표준 모듈 시스템의 경우 즉시 실행되는 함수인 IIFE와 name space를 활용하여 모듈을 사용해왔고, 이에 대한 문제점을 해결하기 위해 CommonJs, 비동기 모듈 정의가 나오면서 비동기적으로 네트워킹이 가능하다는 점과 비교적 단순하다는 점에서 사용되었으나 ES6 표준이 나오게 되면서 ES6 Moud..