오지이 오지이

렌더링이란 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있습니다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 랜더링 엔진을 사용합니다. # DOM(Document Object Model), CSSOM(CSS Object Model) 생성 사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드 받습니다. 브라우저가 페이지를 렌더링하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 합니다. # DOM 트리 생성 다음은 HTML 코드가 DOM 트리로 변..

# encodeURI() encodeURI()는 URI의 특정한 문자를 UTF-8로 인코딩하고 연속된 이스케이프 문자로 변환합니다. 특히 영문자가 아닌 한글, 중국어, 일본어 등을 서버로 전송하거나 브라우저 URL로 올바르게 동작하려면 encodeURI()를 사용해서 문자를 인코딩해야 합니다. console.log(encodeURI("http://domain.com?x=A")); // http://domain.com?x=A console.log(encodeURI("http://domain.com?x=가")); // http://domain.com?x=%EA%B0%80 # decodeURI() 인코딩된 문자를 디코딩해 줍니다. const encoded = encodeURI("http://domain.com..

Web Speech API는 음성 정보를 텍스트로 변환해 주는 API입니다. Web Speech API는 모든 브라우저에서 사용할 수 있는 API는 아니지만, 사용자가 가장 많이 사용하는 크롬, IE 엣지, 사파리 같은 브라우저 및 모바일 대부분의 브라우저에서 사용 가능하기 때문에 브라우저에 적용한다면 매우 유용하게 사용할 수 있습니다. 아직 한글보다는 영어에 대한 인식률이 더 높습니다. Geolocation API와 같이 현재 브라우저가 Web Speech API를 지원하는지를 먼저 체크해야 합니다. let recognition = null; function checkCompatibility() { recognition = new SpeechRecognition(); if (!recognition) {..

Geolocation API는 웹 브라우저에 접속한 사용자의 지리적 위치 정보에 대한 위도, 경도 값을 확인할 수 있게 해 주는 API로, 지도에 사용자의 위치를 표시하거나 사용자 위치를 중심으로 주변 맛집 리스트를 제공하는 기능을 구현할 때 유용하게 사용할 수 있습니다. 구 버전의 브라우저에서는 Geolocation API를 지원하지 않기 때문에 가장 먼저 현재 사용자가 이용 중인 브라우저가 Geolocation API를 지원하는지를 확인해야 합니다. if ('geolocation' in navigator) { /* 위치 정보 사용 가능 */ } else { /* 위치 정보 사용 불가능 */ } Geolocation API를 사용할 수 있으면, geolocation 내에 getCurrentPositio..

로컬스토리지(LocalStorage)와 세션스토리지(SessionStorage)는 HTML5에서 추가된 웹 브라우저 저장소입니다. # LocalStorage 로컬스토리지는 저장된 데이터를 삭제하기 전까지 영구히 보존됩니다. 도메인별로 5M까지 저장할 수 있습니다. 저장되는 모든 데이터는 자바스크립트의 오브젝트 데이터처럼 키(key)와 값(value)의 쌍으로 저장할 수 있습니다. 다만 저장되는 모든 값은 String(문자열)으로만 저장할 수 있습니다. Number, Boolean, Object, Array 같은 형태의 데이터를 저장할 때는 JSON.strigify를 이용하여 문자열로 변환해 저장하면 됩니다. 반대로 데이터를 읽을 때는 JSON.parse를 이용하여 원래의 데이터 형태로 변환해서 사용할 수..

저수준 언어에서는 메모리가 필요 없어질 때를 개발자가 직접 결정하고 할당된 메모리를 직접 해제합니다. 하지만 자바스크립트 같은 고수준 언어는 가비지 컬렉션(GC)이라는 자동 메모리 관리 방법을 사용합니다. 가비지 컬렉션은 메모리 할당을 추적하고 할당된 메모리 블록이 더 이상 필요하지 않게 됐는지를 판단하여 메모리를 회수합니다. 가비지 컬렉션은 메모리를 더 이상 사용하지 안흔지를 스스로 판단하기 때문에 가비지 컬렉션 알고리즘마다 작동하는 방식에 차이가 있습니다. # 레퍼런스 카운팅(Reference Counting) 가비지 컬렉션 레퍼런스 카운팅은 이름처럼 레퍼런스, 즉 객체를 참조하는 변수의 수를 관리합니다. 객체를 참조하는 변수의 수가 증가할 때마다 1씩 카운터하며, 반대로 객체를 참조하는 변수의 수가..

웹 사이트를 이용하다 보면 속도가 느려지거나 특정 버튼을 클릭한 뒤 무한 로딩이 되는 경험을 해 보셨을 겁니다. 이런 문제는 인터넷 네트워크 문제로 인해 발생하기도 하지만 웹 애플리케이션의 메모리 관리 문제로 발생되기도 합니다. 일반적으로 성능이 서서히 낮아지는 메모리 누수(memory leak), 성능이 일정하게 낮은 형태인 memory bloat가 메모리 관리가 제대로 되지 않았을 때 나타나는 현상입니다. 자바스크립트는 고수준 언어이기 때문에 객체가 생성되는 시점에 자동으로 메모리를 할당합니다. 또, 쓸모가 없어지면 자동으로 메모리를 해제(가비지 콜렉션)합니다. 메모리를 할당하는 시점을 알 수는 있지만 쓸모가 없어졌다는 판단을 하고 자동으로 메모리를 해제하는 시점은 알기 어렵습니다. # 메모리 할당 ..

태그의 style 속성을 가져오거나 새로운 스타일 속성을 추가할 수 있습니다. 이때 inline style에서 작성했던 스타일 property 명을 카멜 표기법으로 바꿔 사용해야 합니다. Text: Radio(이메일 수신): 동의 거부 이메일 Select: Korea China Japan 서울 부산 대전 제주 Save HTML 삽입 미리보기할 수 없는 소스 그럼 다음 포스팅은 자바스크립트 메모리 할당에 관해 작성하도록 하겠습니다. 감사합니다 참조 | 바닐라 자바스크립트(고승원, 비제이퍼블릭)