JavaScript
-
당신이 async await 을 사용할 때 자바스크립트는..JavaScript 2023. 10. 14. 22:52
출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 자바스크립트는 비동기 처리를 할 수 없다 자바스크립트의 실행 컨텍스트까지 공부하고, 자바스크립트 엔진이 어떻게 동작하는 지 아는 사람이라면, 자바스크립트는 단 하나의 실행 컨텍스트 (콜스택) 을 갖고, 싱글 쓰레드로 동작한다는 사실을 알 것이다. C를 공부할 때는 함수를 비동기로 처리하기 위해 멀티 프로세스, 멀티 쓰레드 방식을 이용했다. 하지만 자바스크립트는 멀티 쓰레드를 지원하지 않으므로, 이를 할 수 없다. 그럼에도 우리는 자바스크립트에서 비동기 처리를 한다. 어떻게 된 일일까? 자바스크립트의 비동기 처리 방법 자바스크립트는 아주 내 마음에 쏙 드는 방식으로 비동기를 처리한다. 자바스크립트의 실행 환..
-
ES11 에서 도입된 재미있는 두 연산자 (옵셔널 체이닝, null 병합 연산자)JavaScript 2023. 3. 15. 00:36
약간 쉬어가는 느낌으로 ES11 에서 도입된 재미있고 때로는 유용하게 사용할 수 있는 두 연산자에 대해 알아보려고 한다. 사실 지금 소개할 두 연산자들은 필수적인 것은 아니고, if ... else 조건문으로 대체할 수 있다. 하지만 자바스크립트에서는 if ... else 같은 절차적 문장을 극도로 꺼려하는 느낌이 있다. (물론 상대적인 느낌이다) (for 문을 사용하는 대신 method 를 사용한다든가, 삼항 연산자나 논리 연산자를 이용한 단축 평가를 적극적으로 쓴다든가 하는) 물론 이해가 안 가는 건 아니다 ! if ... else 의 숲은 프로그램의 규모가 커질 때 코드의 가독성을 망가뜨리고, 유지보수를 힘들게 하는 스파게티 코드를 만든다. 이를 해결하기 위해 객체지향 개념이 등장하고, 프로그램 규..
-
그래서 Babel, Webpack 이 뭔데 ??JavaScript 2023. 3. 13. 23:42
첫 웹 팀프로젝트를 하면서, Babel 과 Webpack 에 대해서는 신경조차 쓰지 않았다. 왜 ? 몰라도 아무 지장이 없었으니까. Create-React-App (이하 CRA) 를 사용하면 바벨과 웹팩을 전혀 모른 채로 리액트로 개발을 바로 시작할 수 있었다. 처음 프로젝트를 시작할 때, CRA 를 사용하면서 들었던 말이 이거다. 지금 프로젝트 정도 스펙에서는 바벨과 웹팩을 알 필요 없다고. 반대로 생각해보면, 더 좋은 프론트엔드 개발자가 되기 위해선 결국 이해가 필요하다는 말이 아닐까 ? 어쨌든 우리는 CRA를 썼지만, 바벨과 웹팩이 뭔가를 해줬기 때문에 배포가 된거고, 정말 아예 모른 채로 프로젝트가 끝났기 때문에 궁금함이 남았었다. 여유가 될 때 알아봐야지, 하고 생각했었는데, 이제 여유가 됬다...
-
JavaScript 의 Closure (클로저) 리뷰하기JavaScript 2023. 3. 5. 12:55
드디어 자바스크립트를 처음 배울 때, 그리고 첫 프로젝트를 진행할 때 나를 가장 당황시켰던 클로저에 대해 리뷰할 때가 왔다. 딥다이브 소개 첫 마디부터 난해하기로 유명한 자바스크립트의 개념이라고 소개하는 클로저 .. 근데 실행 컨텍스트를 파악하고 나니 왠지 그렇게 어려울 것 같지 않은 자신감이 생긴다 ! 과연 공부를 하면서 자신감이 무너질 지, 아니면 지켜질 지는 두고 봐야 알겠지 .. 출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 클로저 클로저는 사실 자바스크립트 고유 개념은 아니고, 함수형 프로그래밍 언어들에서 사용되는 중요한 특성이다. 즉, 클로저와 함수형 프로그래밍이 깊게 연관되어 있으니, 프론트엔드의 트렌드인 함수형 프로그래밍을 할 때 클로저..
-
JavaScript 의 execution context (실행 컨텍스트) 리뷰하기JavaScript 2023. 3. 4. 19:43
C, C++ 만 알고 있던 나에게 가장 큰 애를 먹인 클로저를 리뷰하기에 앞서서, 자바스크립트의 핵심 개념이지만 아 그런갑다 하고 넘긴 실행 컨텍스트에 대해 깊게 파보려고 한다. 실행 컨텍스트를 잘 이해해야 클로저의 동작 방식을 이해할 수 있다고 하니까. 출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 소스코드의 "평가" 와 "실행" 기본적으로 소스코드는 모두 평가 -> 실행 의 단계를 거친다. 그리고 그 과정을 실행 컨텍스트가 관리한다. 소스코드의 평가는 간단히 말해 준비 단계이고, 평가가 끝나면 비로소 런타임이 시작되어 소스코드가 순차적으로 실행되는 구조. 코드 실행 순서를 관리하는 실행 컨텍스트 스택의 흐름은 다음과 같다. const x = 1; ..