자바스크립트 어떻게 사용하는 방법은 배웠지만 정확히 무엇인지 어떻게 돌아가는지 모르기에 정리하면서 공부해보자!

 

인터프리터 언어

  • 인터프리터 언어는 코드를 한 줄 씩 읽고 실행하는 방식으로 동작, 코드를 작성한 후, 실행할 때마다 매번 해석(인터프리팅)하여 결과를 내기 때문에 실시간으로 실행 결과를 확인할 수 있다.
  • Python, JavaScript, Ruby 등
  • 코드를 빠르게 실행해 볼 수 있어서 개발이 유연하고 디버깅이 편리
  • 실행 속도가 느릴 수 있다. 매번 코드를 읽고 해석하기 때문에

컴파일 언어

  • 컴파일 언어는 작성된 소스 코드를 한꺼번에 기계어로 컴파일한 후, 컴파일된 파일을 실행한다. 실행 전 미리 컴파일러라는 프로그램을 통해 기계어로 변환된다.
  • C, C++, Java
  • 컴파일된 파일이 이미 기계어로 변환되어 있어 실행 속도가 빠르다.
  • 코드를 수정할 때마다 다시 컴파일해야 하므로 개발이 번거로울 수 있고, 디버깅이 복잡할 수 있다.

 

자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다. 대부분의 모던 자바스크립트 엔진(크롬의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore, 마이크로소프트 엣지의 Chakra 등) 은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결, 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화 이를 통하여 컴파일 단계에서 추가적인 시간이 필요함에도 더욱 빠르게 코드를 실행할 수 있다.

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

클래스, 상속, 정보 은닉을 위한 키워드가 없어서 객체지향 언어가 아니라고 오해하는 경우도 있지만 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다.

자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있따. 따라서 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.

주의할 점은 브라우저와 Node.js는 용도가 다르다. 브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다.

웹 크롤링

  • 서버에서 웹사이트의 콘텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온 다음, 이를 가공해서 필요한 데이터만 추출하는 경우가 있다. 서버 환경은 DOM API를 제공하지 않으므로 cheerio 같은 DOM 라이브러리를 사용해 HTML 문서를 가공하기도 한다.

DOM (Document Object Model)

  • 웹 페이지의 구조를 표현한 객체 모델이다.
  • HTML 문서가 웹 브라우저에 로드되면, 브라우저는 이 HTML 문서를 DOM트리 형태로 변환하여 관리한다.
  • DOM 트리는 웹 페이지의 각 요소(HTML 태그, 속성, 텍스트 등)를 노드(Node)로 표현하며, 이들 간의 관계를 (부모-자식 관계)를 트리 구조로 나타낸다.

 

stack

stack은 자바스크립트의 함수 호출과 관련된 중요한 개념, 자바스크립트는 함수가 호출될 때마다 콜 스택(Call Stack)에 함수가 쌓이고, 함수가 완료되면 스택에서 제거된다.
후입선출(LIFO), 방식으로 처리되기 때문에 함수가 호출되는 순서대로 스택에 쌓이고, 실행될 때는 마지막에 쌓인 함수부터 처리된다.

콜 스택(Call Stack)

  • 콜 스택은 자바스크립트 엔진에서 함수 호출을 관리하는 메모리 공간이다. 프로그램이 실행되는 동안, 함수 호출이 발생할 때마다 콜 스택에 함수가 쌓이고, 함수가 완료되면 콜 스택에서 제거되는 방식으로 작동한다. 자바스크립트는 단일 스레드 언어이므로 , 하나의 콜 스택만 사용하여 함수 실행 순서를 관리한다.

콜 스택의 동작 방식

  1. 함수가 호출되면 해당 함수가 콜 스택에 쌓인다.
  2. 함수가 완료되면 콜 스택에서 제거된다.
  3. 새로운 함수가 호출되면 다시 콜 스택에 쌓인다.

자바스크립트는 단일 스레드이기 때문에 콜 스택을 통해 동시에 하나의 함수만 실행할 수 있다. 다른 함수가 콜 스택에서 실행되고 있으면 그 함수가 끝날 때까지 기다려야 한다.

콜 스택 오버플로우(Stack Overflow)

  • 콜 스택에 함수가 너무 많이 쌓이면 메모리가 초과되어 프로그램이 더 이상 실행되지 못하는 상태가 발생할 수 있다. 주로 무한 재귀 호출(재귀 함수가 끝나지 않고 계속 자기 자신을 호출하는 경우)에서 발생한다.

Queue

자바스크립트에서는 비동기 작업을 처리할 때 이벤트 루프와함께 큐가 사용된다. 예를 들어 setTimeout처럼 비동기적인 작업들은 콜백 함수가 Task Queue에 들어가고, 콜 스택이 비면 실행된다.

console.log("첫 번째 출력");

setTimeout(() => {
  console.log("두 번째 출력 (비동기)");
}, 1000);

console.log("세 번째 출력");
  1. "첫번째 출력"이 출력된다.
  2. setTimeout은 비동기 함수이므로, 1초 후 콜백 함수가 Task Queue로 이동된다.
  3. "세번째 출력"이 출력된다.
  4. 1초 후 콜 스택이 비면 Task Queue에서 콜백 함수가 실행되어 "두번째 출력(비동기)" 출력된다.

이벤트 루프와 Task Queue의 작동원리

자바스크립트는 단일 스레드 언어로, 동시에 하나의 작업만 처리할 수 있다. 그리고 비동기 작업을 지원하기 위해 이벤트 루프와 Task Queue를 사용한다.

  1. 콜 스택에 동기적인 작업이 실행된다.
  2. 비동기 함수가 호출되면 해당 작업이 완료될 때까지 기다리거나, 타이머가 만료될 때까지 대기한다. 대기가 끝나면 그 작업의 콜백 함수가 Task Queue로 들어간다.
  3. 콜 스택이 비어 있을 때, 이벤트 루프는 Task Queue에서 대기중인 작업을 꺼내 콜 스택으로 옮겨 실행된다.

 

자바스크립트에 대해 찾아보면서... 진짜 할게 많고 모르는 것도 많고 공부를 하면할수록 모르는 것도 많아지는 것같다.. 세삼 진짜 넓구나 좀 더 노력하자

+ Recent posts

티스토리툴바