일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 블록체인
- 백준
- 가상화
- 리액트
- HTML
- es6
- node.js
- kubernetes
- 프론트엔드
- 이슈
- JavaScript
- 백엔드
- TypeScript
- 웹
- AWS
- BFS
- 솔리디티
- k8s
- CSS
- 이더리움
- 클라우드
- react
- 타입스크립트
- 컴퓨터공학
- 쿠버네티스
- docker
- 자바스크립트
- 파이썬
- next.js
- 알고리즘
- Today
- Total
목록브라우저 (4)
즐겁게, 코드
자바스크립트는 싱글 스레드 프로그래밍 언어입니다. 이는 곧 싱글 스레드 런타임(실행 환경)을 가지고 있다는 의미로, 한번에 하나의 작업만을 수행할 수 있음을 의미합니다. 그런데 웹 브라우저에서는 음악을 재생하면서 마우스 이벤트를 감지할 수도 있고, 웹 서버에 요청을 보내는 동안 새로운 키보드 입력을 수행할 수도 있는 등 동시에 일어나는 일이 꽤나 많습니다. 자바스크립트는 싱글 스레드에서 동작하는데 어떻게 브라우저에서 동시(병렬) 작업을 구현할 수 있었던 것일까요? 지금부터 찬찬히 알아보도록 하겠습니다. 자바스크립트 엔진과 런타임의 구조 자바스크립트 엔진은 변수와 객체의 메모리를 할당하는 힙 영역과 하나의 콜 스택으로 이루어져 있습니다. 또 자바스크립트가 실제로 실행되는 실행 환경(런타임)인 브라우저나 N..
혹시 페이스북을 사용해 보신 적 있으신가요? 페이스북을 사용해 보신 분들이라면 들어갈 때마다 로그인을 수행하는 대신 항상 로그인 상태가 유지되고 있는 것을 알고 계실 것입니다. 바로 이런 기능이 "쿠키" 를 활용해 구현된 기능인데요, 오늘은 쿠키를 활용하는 방법에 대해 알아보겠습니다. 쿠키(Cookie)란? 쿠키는 키 - 값 쌍으로 이루어진 작은 데이터입니다. 서버는 브라우저에 쿠키를 전달하고, 브라우저는 쿠키를 저장해 두었다가 다음 번 요청부터 보관하고 있던 쿠키를 서버에 전달합니다. 쿠키는 주로 세션 관리나 트래킹 등 용도로 사용되는데요, 트래킹의 예시로 현재 창에서 개발자 도구를 열고 document.cookie 를 입력해 보면 카카오 애드핏과 구글 애널리틱스 등 트래킹 도구에서 여러분의 접속 정보..
HTML, CSS, 자바스크립트. 과연 셋의 조합이 어떻게 웹 페이지를 만들어내는 걸까요? 오늘은 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보도록 하겠습니다. Critical Rendering Path (CRP) 이름이 크리티컬하다고 겁먹지 마세요. CRP는 HTML 코드를 실제 페이지로 만드는 일련의 과정입니다. 전체적인 순서는 위 도식과 같은데요, 이제부터는 각 단계에서 일어나는 일을 소개하겠습니다. (※ 이번 글은 페이지 렌더링 프로세스에 관한 글로써 자바스크립트 실행 및 처리 과정은 제외했습니다.) 1. HTML을 DOM으로 변환하기 우리가 열심히 짠 HTML 코드를 브라우저가 받아들면 제일 먼저 DOM 트리를 생성합니다. 트리라... 우리가 알고 있는 그 트리가 맞나요? 맞습니다! , ..
브라우저는 간단한 데이터를 위한 작은 저장소를 제공하는데, 쿠키와 로컬 스토리지(Local storage), 세션 스토리지(Session Storage) 가 바로 그것입니다. 쿠키에 대해서는 나중에 더 자세히 다뤄 보도록 하고, 오늘은 로컬 스토리지와 세션 스토리지에 대해 정리해보기로 하겠습니다. 1. 공통적인 특징 두 브라우저 저장소의 공통적인 특징으로는 쿠키와 달리 웹 서버로부터 고립되어 있다는 점입니다. 오리진에 종속되는 특징으로 인해 서버로부터의 영향을 절대 받지 않으며, 쿠키보다 더 많은 정보를 저장할 수 있다는 이점이 있습니다. [LocalStorage & SessionStorage 사용하기] localStorage.setItem("name", "Chanmin"); localStorage.re..