몽탁이의 개발일기

자바스크립트의 이벤트 루프에 대해 설명하기 전에 자바스크립트에서의 멀티쓰레딩과 실행 환경에 대해 알아보겠습니다. 자바스크립트의 실행 환경 (엔진 + 환경 요소) 자바스크립트 언어 자체는 싱글 쓰레딩 언어입니다. 이 말은 멀티쓰레딩이 기능이 없다는 것이고 비동기적인 처리가 불가능하다는 뜻입니다. 하지만 브라우저의 API들을 이용하여 비동기적인 처리를 할 수 있으며 이벤트 루프를 통해 다양한 방식을 이용하여 멀티 쓰레딩 같은 효과를 얻을 수 있습니다. (즉, 비동기적 처리를 하는 것처럼 동작) 우선 위의 동작을 쉽게 이해하기 위해 간단하게 자바스크립트의 엔진을 표현해 보겠습니다. 위 그림은 아주 간단하게 표현한 자바스크립트의 엔진입니다. 실제로는 더 많은 구성요소들이 있습니다. Memory heap - 데이..

프로세스란? - 컴퓨터 위에서 연속적으로 실행되고 있는 프로그램 혹은 운영체제위에서 독립적으로 메모리에서 실행되는 프로그램이라고 합니다. 즉, 컴퓨터에서 실행되는 프로그램의 단위라고 할 수 있습니다. 그리고 프로세스 안에는 리소스(자원)들이 정해져 있습니다. 프로세스는 다음 그림과 같이 구성되어있습니다. 위 그림의 자원들은 각자만의 역할이 있습니다. code - 프로세스 안에 작성된 코드 저장 stack - 함수들이 어떤 순서로 실행되어야 하는지와 이 함수가 실행이 끝나면 어디로 다시 돌아가야 되는지에 대한 정보 heap - 오브젝트를 생성하거나 데이터를 생성할 때 저장되는 공간(동적으로 할당되는 변수들) data - 전역 변수와 static 변수를 저장 이러한 역할들을 가지고 있습니다. 쓰레드란? - ..

자바스크립트에서 비동기적인 처리를 할 때 주로 Promise를 사용합니다. Promise를 사용하다 보면 아래와 같이 then API안에서 Promise와 setTimeout API들을 사용하게 되는데 이때 콜백 함수들을 또 정의하게 됩니다. 위 내용은 간단하지만 저런 과정이 반복이 된다면 가독성이 떨어지고 유지 보수하는데 쉽지 않습니다. 이런 문법적인 문제를 해결하기 위해 async와 await이라는 API가 등장하게 됩니다. 또 문법적인 문제를 프로그래머가 사용하게 쉽고 간편하게 해 주는 것을 syntactic sugar 라고 합니다. async async는 Promise를 좀 더 간략하게 사용할 수 있도록 해주는 키워드입니다. 다음 그림을 보게되면 함수를 선언할때 앞에 async라고 적어주게되면 자..

Promise란? - 자바스크립트에서 비동기를 간단하게 처리할 수 있는 오브젝트입니다. Promise에서 중요한 포인트는 2가지가 있습니다. 1) state(상태) - 프로세스가 오퍼레이션을 수행하고 있는지 기능을 다 처리 후 성공 여부 2) 생산자 vs 소비자 위의 포인트를 기반으로 하여 설명하겠습니다. 먼저 Promise의 state는 3가지가 있습니다. 1. pending - 비동기적 처리가 진행되고 있는 상태 2. fulfilled - 비동기적 처리가 완료된 상태 (성공) 3. rejected - 비동기적 처리가 완료된 상태 (실패) 위 그림처럼 상태를 나눠 비동기적인 처리가 진행 중인지 완료가 되어 정상적으로 처리가 됐는지 아니면 비정상적으로 종료가 되었는지에 대한 상태를 가지고 있어 비동기적으..

자바스크립트에서 비동기적 처리가 가능한가? 자바스크립트는 싱글 쓰레딩 언어이기 때문에 비동기적으로 처리가 불가능합니다. 하지만 브라우저의 API(브라우저 API 중에 비동기 기능을 가진 API) 들을 이용하거나 자바스크립트 개발 환경을 관리해주는 이벤트 루프로 인해 비동기적으로 처리하는 것처럼 만들 수 있습니다. 위의 이벤트 루프 관해서는 나중에 좀더 자세하게 다루겠습니다. 동기와 비동기의 차이 동기적 처리 동기적인 처리는 한 문장씩 수행이 되면서 한 문장의 수행이 끝나고 다음 문장이 실행되는 순서를 지키면서 실행이 됩니다. 비동기적 처리 비동기적 처리는 위 그림에서 브라우저의 API인 setTimeout 함수를 이용하여 비동기적인 처리가 되었습니다. setTimeout 함수는 콜백 함수와 정수를 인자를..

JSON은 JavaScript Object Notation의 약자로 그대로 해석하게 되면 자바스크립트 객체 표기법입니다. 즉, 자바스크립트의 객체 형식으로 표기하여 데이터를 저장하는 파일입니다. 이 JSON은 웹사이트에서 제공되는 데이터를 사용자와 제공자가 편하게 받을 수 있게 해 줍니다. 물론 JSON 형식의 파일 말고도 여러 파일 형태로 주고받는 것은 가능합니다. 하지만 JSON을 많이 이용하는 이유는 1) 파일 자체가 가볍다. 2) 가독성이 좋다. 3) key와 value의 한쌍으로 이루어져 있어 프로그래머가 다루기 쉽다. 4) 프로그램의 언어와 플랫폼에 상관없이 사용이 가능하다 (가장 중요한 이유) 자바스크립트에서 데이터를 JSON으로 변환하기 JSON 객체의 stringify API를 이용하면 ..

join - 배열의 값들을 string으로 return 한다. 옵션) 아무런 문자를 주지 않을 경우 ' , '으로 구분해서 string으로 return 한다. string 값으로 문자열을 넘기면 배열 사이에 넘긴 문자열로 구분해서 string으로 return 한다. split - 구분문자 ( string | RegExp )을 받아서 string을 배열로 return 옵션 : return 받을 배열의 크기를 지정할 수 있다. (단, 배열로 만들 수 있는 최대의 수만큼까지만 생성) 구분 문자를 주지 않을 시 string을 1개의 value로 인식하고 배열의 크기가 1인 배열을 생성 reverse - 배열안의 값들의 순서를 반대로 바꿔줌 주의) 반대로 바뀐 값을 리턴하고 원래의 배열의 순서도 바뀐다. spli..

배열은 자료구조의 일종입니다. 자료구조란? - 데이터를 담아내는 방식들 자료구조에는 여러 가지가 있겠지만 배열은 선형구조로 이루어진 메모리 공간들입니다. 배열은 0부터 시작해서 사용자가 설정한 숫자 n-1 만큼의 공간을 가지게 됩니다. 위 그림에서 보면 배열 안에는 여러 가지 타입의 데이터들이 들어있습니다. 그 이유는 자바스크립트에서는 런타임 시에 데이터를 할당합니다. 그래서 어떤 값을 배열에 넣어도 동적으로 타입에 맞춰서 메모리를 할당하기 때문에 위와 같은 형태로 배열을 담을 수도 있습니다. 하지만 배열은 같은 타입의 데이터를 담아서 순서대로 정렬하거나 관리하는 것이 큰 목적이기 때문에 타입을 한 가지만 정해서 배열에 담는 것이 좋습니다. 그림에서 ref와 function 있습니다. ref는 객체의 주..