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

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

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

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

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

• 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 메모리 공간을 식별하기 위해 붙인 이름 JavaScript는 개발자가 직접 메모리 제어를 하지 못함(managed language) -> 변수를 통해 안전하게 값에 접근 const myNumber = 22; //변수명(식별자) : myNumber //해당 값의 위치(메모리 주소) : 00153DFAE87 //Value : 22 변수명인 myNumber은 변수의 값이 아닌 메모리 주소를 기억함 변수명 사용 -> 자바스크립트 엔진이 변수명과 매핑 된 메모리 주소를 통해 22 반환 • 변수 선언 JavaScript에서 변수 선언은 선언 -> 초기화 단계를 거침 선언 = 변수명을 등록하여 자바스크립트 엔진에 변수 존재 알림 초기화 = 값을 저장..