분류 전체보기
-
[Browser] 브라우저의 동작 원리Web/Browser 2021. 5. 13. 15:42
브라우저의 구조 대부분의 브라우저는 아래 일곱가지의 구성요소로 이루어져있다. 1. 사용자 인터페이스 - 사용자가 요청한 페이지를 보여주는 창을 제외한 보든 부분 (새로고침 버튼, URI 입력창 등) 2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진 - 요청한 콘텐츠(페이지)를 화면에 표시. (ex. WebKit, Gecko) 4. 통신 - HTTP, HTTPS 요청을 받으면네트워크 처리 후 응답을 전달. (OS에서 실행됨) 5. UI 백엔드 - Render Tree를 브라우저에 그림 6. 자바스크립트 해석기(엔진) - 자바스크립트 코드를 해석하고 실행 (ex. V8) 7. 자료 저장소 - 모든 종류의 자원을 저장. (ex. Cookie, Local Storage..
-
[JavaScript] 번들러(Bundler)란?Web/JavaScript 2021. 5. 13. 10:01
프론트엔드를 개발하다보면 웹팩(WebPack)이나 파셀(Parcel)같은 이름을 종종 마주하곤 한다. 사실 나도 이름은 들어봤지만 어떤 기능을 하는지, 왜 필요한지 전혀 몰랐고, 번들러라는 용어는 심지어 처음 들어봤다. 공부를 시작한지 수 개월이 지나서야 프론트개발에 있어서 필수적인 번들러가 무엇인지, 그리고 왜 사용하는지를 알게 되었기에 반성과 복습의 의미로 글을 적기로 했다. 번들러(Bundler)의 탄생 배경 인터넷이 등장하고 처음에는 웹 페이지와 서비스들의 규모가 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고 해당 서비스를 유지하는데 큰 무리가 없었다. 하지만 인터넷이 발달하면서, 적게는 수십만 줄에서 많게는 수백만 줄의 코드로 이루어진 대규모..
-
[JavaScript] JavaScript의 동작 원리Web/JavaScript 2021. 5. 3. 00:36
이 전 글에서 언급했듯 우선 자바스크립트는 컴파일이 되지 않은 채 브라우저에 내장 되어있는 자바스크립트 엔진(자바스크립트 인터프리터)에 의해 한줄 한줄 읽어 내려가며 실행되는 인터프리터(스크립트) 언어다. 자바스크립트의 생명이라고도 볼 수 있는 자바스크립트 엔진의 구조는 데이터를 저장하는 Memory Heap과 호출될 명령어들을 순서대로 담는 Call Stack으로 구성되어있다. 자바스크립트는 싱글 스레드? '자바스크립트는 싱글 스레드 기반의 언어'인데 이는 자바스크립트의 가장 큰 특 징중 하나다. 그리고 이것은 하나의 프로세스 안에서 한가지의 일 밖에 처리하지 못 한다는 의미다. 실제로 함수들이 호출되면 그 순서대로 위에서 말한 콜스택에 쌓여, 위에서부터 함수가 하나씩 완료되기 전 까지는 아래쪽의 함수..
-
[JavaScript] JavaScript란?Web/JavaScript 2021. 4. 28. 23:14
자바스크립트? ECMAScript? Node.js? 웹을 처음 접했을 때 사실은 Node.js와 JavaScript의 차이를 그냥 서버에서 쓰는 자바스크립트정도로만 알고있었다. 자바스크립트에 대한 첫 포스트인 만큼 오늘은 확실하게 정리를 하고 가야겠다. 웹이 빠른 속도로 발전하면서 많은 개발자들은 본인들의 웹페이지에 동적인 요소를 추가하고자 하는 니즈가 생기기 시작했다. 그렇게 자바스크립트(JavaScript)는 넷스케이프(Netscapte) 웹 브라우저에서 웹 페이지에 동적인 요소를 구현하기 위해 처음 발명되었다. 그 후 다른 웹 브라우저들이 이 언어를 탑재하기 시작하면서 이 수많은 브라우저들에서 자바스크립트가 동일하게 잘 작동하기 위한 표준 규격이 필요해졌다. 이 때문에 ECMA 국제기구에서 "ECM..
-
02. 컴퓨터 구조 두 번째 - 프로그램의 실행과정CS/OS, Computer Structure 2021. 4. 6. 12:58
컴퓨터의 프로그램이 실행되는 과정을 알기위해 조금 더 알아 봤다. 프로그래머가 어떤 프로그램을 짜게 되면, 해당 프로그램은 전처리기 ▷ 컴파일러▷ 어셈블러▷ 링커의 순서를 거쳐 HDD, SSD에 저장된다. 전처리기: C에서 #으로 시작하는 지시자 (#include, #define 등) *Java에서는 전처리기능을 제공하지 않는다 컴파일러: CPU명령어로 번역 어셈블러: CPU의 명령어를 바이너리 코드로 번역 링커: 라이브러리와 결합 Stored Program Concept 위의 과정을 거쳐 HDD에 저장된 프로그램 실행파일은 다음의 세가지 절차를 통해 CPU에서 연산이 이루어진다. Fetch CPU내부로 명령어 이동 (by I/O BUS) Decode 명령어 해석 (by 컨트롤 유닛) Execution ..
-
01. 컴퓨터 구조 첫 번째 - 컴퓨터 구성, CPU의 기본 이해CS/OS, Computer Structure 2021. 4. 6. 12:57
취업을 준비하려다 보니 기본기가 많이 부족 한 것 같아 전공에서 배웠던 Computer Science 부분들을 다시 한번 공부하기로했다. 이러한 부분들이 Web과 연결을 지어 궁금 한 점이 해결될 때까지 파봐야지! 위대한 결심의 첫 날이니 가장 먼저 컴퓨터 구조에 대해 공부했고, 복습 겸 블로그에다 작성해보기로 했다. 컴퓨터 구조에 대해 얘기를 할 때 기본적으로 폰 노이만이 제시한 컴퓨터 구조에서 많이 파생되어 내가 본 강의에서는 CPU, Memory, I/O로 이루어져있다고 한다. CPU - Process 연산을 주로 담당한다. (ALU) - 레지스터에 연산에 필요한 간단한 데이터를 임시 저장한다. A.K.A 캐시 (엄청 빠름) - 데이터의 입출력을 컨트롤한다. (Control Unit) Memory ..