Web (7) 썸네일형 리스트형 [Web] 자바스크립트 동작 원리 - JavaScript Runtime Environment 자바스크립트는 Single threaded language이다. 하지만 브라우저의 Web APIs와 Task Queue, Event Loop를 사용하여 Multi-threading이 가능하다. fetch를 이용히서 백엔드에서 데이터를 받아 온다거나 setTimeout을 이용해서 일정시간이 지난 후 우리가 등록한 콜백함수를 실행하는 등의 일을 동시적으로 수행할 수 있다. Web APIs를 통해서 등록한 함수는 어떻게 자바스크립트 엔진과 서로 동작을 하게 되는걸까? 자바스크립트 엔진에는 Memory Heap과 Call Stack이 있다. Memory Heap은 선언하고 할당한 모든 변수와 객체가 저장되는 공간이다. 구조화 되지 않은 넓은 메모리 영역이다. Call Stack은 우리가 등록한 함수를 실행 순서.. [Web] Call Stack - 자바스크립트의 콜 스택 Stack LIFO(Last In First Out) 제일 나중에 들어온 것이 제일 먼저 나가는 자료구조 Call Stack 자바스크립트 안에서 실행되는 모든 함수의 호출을 기록하고 추적한다. 모든 process와 thread안에는 각각 저마다의 Call Stack이 들어있다. 일을 수행할 때 어디서 왔고, 어디로 다시 가야 하는지에 대한 정보를 기억해야 하기 때문이다. 1. Javascript가 실행되면 Global Execution Context(anonymous)을 생성 Call Stack에 추가. main 함수를 제일 먼저 호출한다. 2. main 함수를 Call Stack에 추가하고, main 함수 내부에 있는 first 함수를 호출한다. 3. first 함수를 Call Stack에 추가하고, .. [Web] 프로세스와 스레드의 차이(Process vs Thread) 프로세스와 스레드의 차이(Process vs Thread) 프로세스(Process) 컴퓨터 운영체제 위에서 연속적으로 실행되고 있는 프로그램. 각각의 프로세스는 메모리 위에서 독립적으로 실행한다. 하나의 프로세스에 문제가 발생해도 해당 프로세스만 죽게 된다. 프로세스는 각각의 리소스, 즉 독립된 메모리 영역(code, data, stack, heap)을 할당받는다. 프로그램을 위해 작성된 Code. 프로세스 안에서 코드의 동작 순서가 저장되는 Stack. 오브젝트를 생성하거나 데이터를 만들 때 그 데이터가 저장되는 Heap, Data. heap에는 동적으로 할당된 변수가 저장되고, data에는 전역 변수나 static변수가 저장된다. 스레드(Thread) 한 프로세스 안에서 동시에 기능을 수행하는 여러개.. [Web] Rendering (DOM/CSSOM/Render Tree) DOM(Document Object Model) 브라우저가 Html파일을 읽을 때 브라우저가 이해할 수 있는, 메모리에 보관할 수 있는 object로 변환시킨다. object로 변환된 후 Tree 구조를 생성한다. 이것이 DOM이다. Document Object Model안에는 우리가 정의한 요소들이 tree형태로 구성되어져 있다. 이것을 이용해서 JavaScript로 웹페이지를 제어할 수 있다. MDN DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model CSSOM(CSS Object Model) 브라우저는 html파일을 Domcument Object Model로 만들면서 우리가 정의한 CSS뿐 아니라 브라우저에서 기본적으.. [Web] DOM요소 조작_Document.querySelector( ) Document.querySelector('selectors') 다양한 Selector를 이용해서 DOM의 element를 받아오기 위한 API. document 에서 Selector와 일치하는 첫번째 element를 리턴한다. 일치하는 element가 없으면 null을 리턴한다. selectors는 하나 이상의 CSS Selector를 string type으로 전달 한다. 유효한 CSS Selector가 아닐 경우 SYNTAX_ERR가 발생한다. SYNTAX_ERR가 발생 시 Selector의 철자를 잘 입력했는지, class 선택자는 마침표(.)를, id 선택자는 해쉬(#)를 잘 입력했는지 확인한다. const image = document.querySelector('img') // Tag name .. [Web] window size 및 좌표 관련 속성 Window Size window.screen : 모니터 사이즈 window.screen.width / window.screen.height window.outer : 브라우저 전체 사이즈 window.outerHeight / window.outerWidth window.inner : 브라우저 웹페이지 사이즈(스크롤 바 포함) window.innerHeight / window.innerWidth documentElement.client : 브라우저 웹페이지 사이즈(스크롤 바 제외) document.documentElement.clientWidth / document.documentElement.clientHeight document.documentElement : document를 제외한 DOM 트리 꼭.. [Web] Web API API (Application Programming Interfaces) API (Application Programming Interfaces)는 어려운 코드로 되어있는 복잡한 기능을 쉽게 사용할 수 있도록 간단한 구문의 프로그래밍 언어로 제공하는 것이다. 예를 들어 자판기에서 제공하는 동전 투입구에 동전을 넣고 버튼을 누르면 자판기의 구조나 원리를 알지 않아도 원하는 음료를 먹을 수 있다. 집에서 어떤 기계를 사용하기 위해 콘센트에 전원코드를 연결하면 기계가 작동한다. 전력 공급 장치의 원리나 구조를 알지 않아도 콘센트에 전원코드만 연결하면 된다. 브라우저에서 우리가 사용할 수 있는 API를 제공하고 우리는 그 API를 호출하면서 브라우저에 있는 다양한 기능들을 쓸 수 있다. 이러한 API는 Java.. 이전 1 다음
