📌 Front End80 [JavaScript] 자바스크립트 엔진 (JavaScript Engine) 원문 : 🚀⚙️ JavaScript Visualized: the JavaScript Engine기계는 어떻게 우리가 작성한 코드를 이해할 수 있을까요? 자바스크립트 개발자로서 우리는 보통 "컴파일러"를 직접 다룰 필요는 없습니다.하지만 자바스크립트 엔진의 기본적인 내용을 알고, 엔진이 어떻게 인간 친화적인 코드를 다루는지, 그리고 그 코드들을 기계가 이해할 수 있는무언가로 바꾸는 것을 아는 것은 분명 좋은 일입니다.Note : 이 게시물은 주로 Node.js, 크로미움 기반 브라우저에서 사용하는 V8 엔진을 기반으로 합니다.HTML 파서는 source가 있는 script태그를 만납니다. 이 소스의 코드는 네트워크, 캐시 혹은 설치된 서비스 워커로부터 로드됩니다.응답은 byte stream에 요청한 스크.. 2023. 3. 10. [JavaScript] 자바스크립트 스코프(Scope) 원문 : ⚡️⛓ JavaScript Visualized: Scope스코프 체인을 위한 시간입니다 🕺이 포스트는 JS의 실행 컨텍스트에 대한 기본적인 이해를 하고 있다고 가정합니다. 곧 그에 대한 글도 작성하겠습니다.😃다음 코드를 살펴보죠!이름, 나이, 도시값 변수를 포함한 문자열을 반환하는 getPersonInfo 함수를 호출합니다.Sarah는 22살이고 샌프란시스코에 삽니다. 하지만, getPersonInfo 함수는 city를 포함하고 있지 않습니다. 🤨? 어떻게 이 함수는 city값을 알고 있을까요?먼저, 메모리 공간은 다른 컨텍스트에 대해 설정됩니다. 우리는 기본적으로 global context(브라우저의 window, 노드의 global)과우리가 호출한 getPersonInfo함수에 대한 l.. 2023. 3. 10. [JavaScript] 자바스크립트 이벤트 루프(Event Loop) JS 엔진자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있다.- 가장 유명한 것이 구글의 v8이다.자바스크립트는 단일 스레드(single thread) 프로그래밍 언어.- 이것은 콜스택이 하나라는 의미- 멀티가 되지않고, 하나씩 처리한다는 의미메모리힙- 메모리할당이 일어나는 곳 => 우리가 선언한 변수, 함수 등이 담겨져있다.콜스택- 코스가 실행될때 쌓이는 곳. stack 형태로 쌓인다.- stack이란? 자료구조 중 하나. 선입후출의 룰을 따른다.Web API그림에서 봤을때 JS엔진 바깥에 그려져있다.- 즉, JS엔진이 아니다는 뜻.웹 api는 브라우저에서 제공하는 api로 timeout과 ajax, DOM이 있다.콜스택에서 실행된 비동기함수는 web api에서 호출하고, web api에서는 Cal.. 2023. 3. 10. [JavaScript] 자바스크립트 이벤트 루프(Event Loop) 이벤트 루프는 자바스크립트 개발자라면 어떤 방식으로든 다루게 되지만, 처음 이해하기엔 다소 난해할 수 있습니다. 저는 gif를 사용해서 이 개념을 시각적으로 설명해보고자 합니다.하지만 먼저, 이벤트 루프는 무엇이며, 왜 신경 써야 할까요?자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있습니다. 이것은 일반적으로 큰 문제 없지만, 30초가 걸리는 일을 수행한다고 상상해보세요..우리는 그 일을 처리하는 30초 동안 아무것도 할 수 없습니다. (자바스크립트는 기본적으로 브라우저의 메인 스레드로 동작하기에, UI가 멈추게 됩니다.)다행히, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 웹 API 기능을 제공합니다. 이 API는 DOM API, setTimeout, HTTP requests 등이.. 2023. 3. 10. [JavaScript] 자바스크립트 Undefined와 null의 차이 1. undefinedundefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다.cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다.아래의 경우에 변수가 undefined를 반환한다.값을 할당하지 않은 변수메서드와 선언에서 변수가 할당받지 않은 경우함수가 값을 return 하지 않았을 때2. nullnull은 원시값(Primitive Type) 중 하나.. 2023. 3. 10. [JavaScript] 자바스크립트 호이스팅(Hositing) 호이스팅은 자바스크립트 개발자라면 누구나 들어본 용어입니다. 성가신 오류를 검색해서 스택오버플로우에 도달하고,그곳에서 "이 문제는 호이스팅 때문입니다"라는 답변을 받게 되거든요.🙃 그렇다면, 호이스팅은 무엇일까요? (스코프는 다른 게시물에서 다룰 예정이니 계속 읽어주세요)자바스크립트를 처음 사용한다면 일부 변수가 임의로 undefined가 되거나, ReferenceError가 발생하는 등 이상한 동작을 경험했던 적이 있을겁니다.호이스팅은 종종 "변수와 함수를 파일 위에 배치하는 것"으로 설명되곤 합니다. 동작은 그렇게 보일지 모르지만 실제로 그렇지는 않습니다.JS 엔진이 우리가 짠 스크립트를 받으면, 가장 먼저 우리의 코드에서 데이터를 위한 메모리를 설정합니다.이 시점에서는 어떤 코드도 실행되지 않았고.. 2023. 3. 10. [JavaScript] 자바스크립트 개념 정리 JavaScript모질라 재단의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다.기본 단어*Parameter(매개변수): 함수 혹은 메서드를 선언(declare)할 때 정의되는 변수*Argument(인자, 인수): 함수또는 메서드를 호출(call)할 때 함수의 매개변수로 전달하는 값*Literal(리터럴): 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 => 쉽게 생각해서 값 자리에 들어가는 단일의 무언가라고 생각하면 된다ex) 100,10.5, true, [1,2,3], function(){}*Expression(표현식): 값으로 평가될 수 있는 문ex) 50+50*Statement(문): 프로그램을 구성하는 기본 단위이자 최소 실행 단위ex) var add.. 2023. 3. 10. [JavaScript] 자바스크립트 동작원리 자바스크립트의 동작자바스크립트는 어떻게 동작할까?동작을 한 줄로 줄여서 요약하자면,자바스크립트는 싱글 스레드이면서 논 블록킹 언어이다.이제 하나하나 자바스크립트의 동작에 대해 뜯어보도록 하겠다.이해를 쉽게 하기 위해서 도로 상황에 비유해 설명할 예정이다.📌 싱글 스레드싱글 스레드는 1차선 도로와 같다.📙 V8자바스크립트 엔진은 V8엔진으로 구현되었다.V8은 "구글에서 개발한 오픈소스로 C++로 작성됨"V8은 싱글 스레드를 제공한다.이러한 싱글 스레드는 하나의 콜 스택(Call Stack)과 하나의 힙(Heap)을 제공한다.---📘 논 블록킹 언어블로킹이 되지 않는즉, 막히지 않는 도로 상황을 말한다.자 그럼 싱글 스레드와 논 블록킹의 특징을 모두 합친 결과는"1차선이지만 막히지 않는 도로"가 나온다.. 2023. 3. 10. 이전 1 ··· 6 7 8 9 다음 728x90 반응형
