JavaScript 동작원리

자바스크립트에 대해 깊게 공부하기 위해서는 자바스크립트의 동작원리를 알아야한다. 기본적으로 단일 스레드여서 비동기 작업이 불가능할 것 같지만 전혀 아니다! 그 이유에 대해 알아보자. • JavaScript 엔진 JavaScript 파일은 컴퓨터가 해석할 수 없으므로 브라우저의 JavaScript 엔진이 해석해준다. 이 때, memory heap과 call stack을 사용해서 JavaScript를 기계어로 변환해준다. - Memory Heap? 메모리 할당이 일어나는 곳 변수, 함수, 객체 등 모든 메모리 할당은 여기서 발생함 - Call Stack? call = function 호출 stack = 쌓이는 곳(Last In First Out) 즉, 함수 호출이 쌓이는 곳으로 call stack을 통해 어..

• format_list_bulleted JavaScript
• · 2023. 5. 27.
• textsms

JavaScript DOM

단순 정보 전달만이 목적인 정적인 웹을 개발하려면 HTML, CSS로 충분하겠지만 동적인 웹을 개발하기 위해서는 자바스크립트와 DOM은 필수이다. • DOM이란? Document Object Model의 약자로 해석하면 문서 객체 모델 (Document = 웹 페이지 자체) HTML 요소에 접근할 수 있도록 API를 제공하는 일종의 인터페이스 DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음 계층 구조로 표현됨 (트리 자료 구조로 구축) HTML 문서는 하나의 최상위 노드(root 노드)에서 시작해서 자식 노드들을 가짐 (노드? -> root 노드를 포함한 하나하나 요소를 뜻함) • JavaScript와 DOM의 관계 DOM = JavaScript 라고 오해할 수 있지만 아..

• format_list_bulleted JavaScript
• · 2023. 5. 16.
• textsms

JavaScript Hoisting(호이스팅)

• JavaScript의 변수 생성 단계 JavaScript에서는 3단계에 걸쳐서 변수를 생성함 선언(Declaration) 변수 객체를 생성하고 변수를 등록 스코프가 변수 객체를 참조 초기화(Initialization) 변수 객체 값을 위한 공간을 메모리에 할당 이 때, 할당되는 값은 undefined 할당(Assignment) undefined로 초기화된 변수에 실제 값을 할당 • Hoisting(호이스팅)이란? 코드를 실행하기 전, 변수/함수 선언을 해당 스코프의 최상단으로 끌어올려진 것 같은 현상 JavaScript의 독특한 특징 중 하나 컴파일 단계에서 코드 실행 전, 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 스코프에 등록(메모리에 저장) JavaScript에서는 나중에 선언되는..

• format_list_bulleted JavaScript
• · 2023. 5. 15.
• textsms

JavaScript 비동기 처리 방법(Promise, async, await)

• 콜백(Callback)이란? 다른 함수를 파라미터로 받아서, 그것을 내부에서 호출하는 함수 function A(callback){ callback(); } function B(){ console.log("콜백이지롱"); } A(B); 함수 자체를 연결하는 것(함수 실행을 연결하는 것 아님) 함수의 실행이 끝나면 지정한 콜백함수를 실행해 주도록 함수에 요청할 때 사용 위의 사진처럼 콜백함수 여러 개를 중첩한다면? -> 가독성이 너무 안좋아짐.. 이런 걸 콜백 지옥이라고 부름 콜백지옥을 어떻게 해결하는지 알아보자! • Promise - Promise는 비동기 작업의 단위 - 미래에 어떤 종류의 결과가 반한됨을 약속(Promise)해주는 Object! const promise1 = new Promise((..

• format_list_bulleted JavaScript
• · 2023. 5. 3.
• textsms

JavaScript 동기/비동기(동작 원리)

• 동기(Synchronous) vs 비동기(Asynchronous) 일단 JavaScript는 동기식 언어(=단일 스레드)이다. 그렇다면 동기식, 비동기식이 뭔지 알아보자. - 동기식 순차적으로 태스크를 수행 어떤 작업이 수행중이라면 뒤의 작업은 앞의 작업이 끝날때 까지 대기해야 함 블로킹이 발생 동시에 여러 작업 수행 X, 흐름 예측 쉬움 - 비동기식 병렬적으로 태스크를 수행 현재 작업의 종료 여부와 무관하게 다음 작업을 실행 동기 방식과는 달리 완료 순서가 보장되지 않음 블로킹이 발생하지 않음(non-blocking) 동시에 여러 작업 수행 O, 흐름 예측 어려움(무엇이 먼저 완료될 지 보장 X) 동기식.. 너무 비효율적인데? 그리고 브라우저는 여러 작업이 동시에 실행되지 않나? -> 위의 의문에 ..

• format_list_bulleted JavaScript
• · 2023. 5. 3.
• textsms

JavaScript란?

JavaScript란? 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어(동적) 정적인 HTML과 CSS로 만들어진 웹 페이지를 동적으로 변경해줌 웹페이지 조작, 클라이언트-서버 간 상호작용에 관한 모든 일 관련 그럼 script는 뭘까? script는 자바스크립트로 작성한 프로그램을 부르는 용어 script는 웹페이지의 HTML 안에 작성가능 -> 웹 페이지를 불러올 때 자동 실행(컴파일러 X) • JavaScript 엔진 자바스크립트 코드를 해석하고 실행하는 인터프리터 동작과정 엔진이 스크립트를 읽음(파싱) 읽어드린 스크립트가 기계어로 전환(컴파일) 기계어로 전환된 코드가 실행됨 -> 기계어기 때문에 속도 빠름 뭔가 이상하다 자바스크립트는 인터프리터 언어라면서 컴파일이라는 단어가 왜 나오지..

• format_list_bulleted JavaScript
• · 2023. 5. 3.
• textsms