서론 CS 스터디에서 9월 10일에 발표한 async function과 await 키워드에 대해 정리한 문서를 블로그에 공유하고자 한다. async function - await는 어떻게 동작할까? async/await란? async function이란, 여러 Promise간의 흐름을 순서대로 처리할 수 있는, 즉 여러 비동기 함수들을 동기적인 순서로 진행할 수 있는 함수를 말합니다. async function은 0개 이상의 await 키워드를 포함할 수 있는데, 함수를 진행하다 await가 달린 Promise를 만나게 되면 해당 Promise가 이행/거부될 때 까지 함수 실행을 일시 중단 하며 처리가 완료된 뒤 다시 진행됩니다.

서론 CS 스터디에서 8월 21일 발표한 Generator에 대해 정리한 문서를 블로그에 공유하고자 한다. 이번 글에서는 크게 다음과 같은 주제를 다룬다. 제너레이터가 무엇인지 자바스크립트에서 제너레이터는 어떻게 구현되어 있는지 제너레이터와 이를 생성하는 제너레이터 함수들의 prototype은 어떠한지 자바스크립트의 제너레이터는 어떤 특징이 있고, 이를 어떤 케이스에 응용할 수 있을지 제너레이터란? 제너레이터란, 반복 루프의 동작을 제어 하는데 사용 가능한 루틴 을 말합니다. 루틴: 프로그램 실행 동안 반복적으로 호출 및 사용하도록 의도된 코드 시퀀스입니다. # 모든 제너레이터는 반복자(Iterator)이며, 값의 시퀀스를 생성한다는 점에서 배열을 반환하는 함수와 유사하지만 한 번에 값을 모두 반환하지 않고 한 번에 하나의 값을 생성한다는 점이 다릅니다.

서론 CS 스터디에서 7월 30일 발표한 추상 구문 트리에 대해 정리한 문서를 블로그에 공유하고자 한다. AST? 추상 구문 트리(Abstract Syntax Tree, AST)란, 프로그램 또는 코드 조각의 구조를 표현하기 위해 사용되는 자료구조를 말합니다. 이때 트리를 이루는 각 노드들은 코드에서 발생되는 구문을 나타냅니다. 구문이 추상적이다(Abstract) 라는 말의 뜻은, 이 트리가 실제 구문의 모든 세부 사항들을 나타내지는 않고 구조나 내용과 관련된 세부 사항들만 나타낸다는 뜻입니다. 이러한 특징은 구문 트리(또는 파스 트리)라고 불리는 개념과 추상 구문 트리를 구분되게 합니다.

서론 CS 스터디에서 7월 16일 발표한 자바스크립트의 Scope에 대해 정리한 문서를 블로그에 공유하고자 한다. 스코프? 프로그래밍에서 스코프란, 프로그램의 요소들(변수 및 상수, 함수 등)이 유효한 영역을 말합니다. 또한, 스코프는 프로그램의 부분 또는 특정 지점에서 유효한 모든 이름 바인딩 집합을 가리키는 데에도 사용되며, 이때 컨텍스트 또는 환경(Environment) 라고도 일컬어집니다. 스코프 개념에 따라 프로그램에서 영역을 벗어난 변수는 가리킬 수 없고, 영역 내부의 요소들은 바인딩 된 이름(identifier)을 통해 가리킬 수 있게 됩니다. 이는 스코프가 프로그램의 다른 부분에 존재하는 변수를 서로 구분하기 위해 등장했기 때문입니다.

서론 CS 스터디에서 7월 9일 발표한 Prototype에 대해 정리한 문서를 블로그에 공유하고자 한다. prototype in Javascript 객체지향 프로그래밍 언어들에서 기존 코드를 확장하는 방식 중 대표적인 방식으로 상속(Inheritance)이 있습니다. 자바스크립트에서는 이러한 상속을 객체를 사용해 구현합니다. 프로토타입 체인 각 객체들은 프로토타입(prototype) 이라는 다른 객체에 대한 내부적인 링크를 갖고 있습니다. 그리고 그 프로토타입 객체는 또 다른 자체 프로토타입을 가지며, 프로토타입 체인이라 부르는 이러한 연결은 null을 프로토타입으로 가지는 객체에 도달할 때 까지 계속됩니다. 이 null은 프로토타입 체인의 최종 링크 역할을 합니다.

서론 CS 스터디에서 7월 2일 발표한 모듈 시스템에 대해 정리한 문서를 블로그에 공유하고자 한다. Module in Javascript Javascript에서 모듈이란, 다른 프로그래밍 언어의 모듈처럼, 커진 자바스크립트 코드들을 여러 파일로 분리하는 것을 말합니다. 초기에는 자바스크립트 코드들이 크기도 작고 단순한 작업을 수행했기 때문에 코드의 분리를 필요로 하지 않았지만, 자바스크립트가 완전한 애플리케이션을 실행할 수 있게 되고, 이에 따라 코드의 크기도 커지고 복잡해졌습니다. 특히 기존의 경우, <script> 태그를 통해 여러 자바스크립트 파일을 불러올 수 밖에 없었는데, 이들은 전역 네임스페이스를 공유하기 때문에 이전 스크립트의 변수를 뒤집어쓰는 등 혼동을 초래하기 쉬웠습니다.

서론 CS 스터디에서 6월 25일 발표한 이벤트 캡처링과 버블링에 대해 정리한 문서를 블로그에 공유하고자 한다. 이벤트 버블링과 캡처링 HTML 태그에서 발생할 수 있는 이벤트는 표준에 따르면 다음과 같은 순서로 전파됩니다. 캡처링 단계(CAPTURING_PHASE) : 이벤트가 DOM 트리 상의 하위 요소로 전파되는 단계 타깃 단계(AT_TARGET) : 이벤트가 실제 대상 요소에 전달되는 단계 버블링 단계(BUBBLING_PHASE) : 이벤트가 DOM 트리 상의 상위 요소로 전파되는 단계 즉, 위와 같은 형태로 DOM 트리가 구성되어 있다면, <span>을 클릭하면 이벤트가 최상위 조상부터 시작해 아래로 전파되고, 타겟 요소에 도착해 이벤트가 실행된 후, 다시 위로 전파됩니다.

서론 최근 한 기업의 코딩 테스트를 푸는데, 중첩된 구조의 객체를 필요로 하는 문제를 맞닥들이게 되었다. 나는 ‘Object가 Map보다 있는 기능이 별로 없으니까, 혹시 몰라서 메모리 터질 수 있는 Map 보단 Object가 낫지 않을까?’ 라는 생각으로 Object를 활용해 해당 문제를 풀었다. 그리고 그 이후 내 생각이 맞을까? 라는 생각을 갖게 되었고 이를 직접 테스트 한 뒤 내용을 정리해보고 싶어졌다. 따라서 여러 글을 찾아 보았고, 직접 문제와 유사한 상황을 가정하고 코드를 작성해 시간과 메모리 사용량을 측정해보았다.

발단 Node.js의 경우 Multi-Thread이지만 하나의 Thread만 유저가 사용가능하게 하고, 나머지는 내부적으로 사용 최근에는 worker_thread와 같은 기능으로 유저도 Multi-Thread 환경에서 개발할 수 있도록 하는것으로 알고있음. 여기서 Node.js의 Thread는 어떻게 구성되어 있고, 어떻게 작동하는지, 왜 하나의 Thread만 유저가 사용할 수 있게 한건지, worker_thread 기능은 또 뭔지 궁금해졌음. 궁금한 점 Node.js의 Thread 구조는 어떻게 될 까? Node.js의 Thread는 어떻게 작동할까? 왜 Node.js는 하나의 Thread만 유저가 사용할 수 있게 한걸까?(왜 싱글스레드 모델을 선택했을까?) worker_threads 기능은 무엇일까?

오늘은 Javascript, Python같은 언어에서 import시 발생할 수 있는 순환 참조 에러에 대한 포스트를 작성하고자 한다. 순환 참조 메모리 관점에서의 순환 참조 ( In Javascript ) 간단히 요약하자면, 서로 다른 두 객체가 서로를 참조하여, 가비지 컬렉션 알고리즘의 대상에 포함되지 않아 해당 객체들이 불필요해져도 메모리 회수되지 않고 존속하게되는 문제이다. Mozilla Developer Network의 문서의 예시를 드는게 이해하기 쉽다. import b from "b"; function f() { var x = {}; var y = {}; x.