목록분류 전체보기 (18)
WJ
1. HTTP 요청 줄이기 브라우저가 웹페이지를 그리는 첫번째 과정으로 주소창에 URL을 입력하고 엔터키를 누르면 서버는 요청을 받고 웹 페이지를 구성하고 있는 HTML, CSS, JavaScript, 이미지 등의 구성 요소들을 보내며 응답합니다. 이러한 구성 요소들을 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 발생되고, 이 비용이 곧 응답 시간으로 이어집니다. 그러므로 구성요소의 개수를 줄이는 것이 가장 기본적이면서도 중요한 부분중에 하나 입니다. 아래 그림은 쉐보레 메인 페이지와 스파크 세이프티 페이지를 분석한 결과 입니다. 왼쪽은 캐시가 없는 상태일때의 분석 결과이고, 오른쪽은 캐시가 있는 상태일 때 분석한 결과 입니다. 각각의 페이지 마다 구성요소들의 수만큼 HTTP 요청 횟수도 달라지며 이..
실행 컨텍스트 (EXECUTION CONTEXT) 실행 컨텍스트(Execution Context)는 코드들의 덩어리로 scope, hoisting, this 바인딩 등의 동작원리가 이루어 지는 자바스크립트의 핵심 원리중의 하나 입니다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의 합니다.실행 컨텍스트는 실행 가능한 코드가 실행되는 환경 이라고도 말할 수 있습8니다. 여기서 실행 가능한 코드는 전역 코드 : 전역 영역에 존재하는 코드Eval 코드 : Eval 함수로 실행되는 코드함수 코드 : 함수 내에 존재하는 코드 일반적으로 실행 가능한 코드는 전역 코드와 함수 코드 입니다. 실행 컨텍스트에는 1. 변수객체(Variable Object..
요즘 일반적인 스크린에서는 1초에 60번(60fps)의 그림을 그린다고 합니다. 이 때문에 브라우저가 60fps 을 유지해야 웹페이지가 버벅임 없이 매끄럽게 보일 수 있고, 60fps 을 유지하기 위해선 최적화(Optimization)가 필요합니다. 이러한 최적화를 하기 위해 먼저 브라우저가 어떤 과정을 거쳐 화면에 나타나는지 부터 알아보려고 합니다. 브라우저가 하나의 화면을 나타내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부릅니다. 우리가 일상적으로 주소창에 url을 입력하고, 엔터키를 누르면 브라우저는 해당 서버에 요청을 보내게 됩니다. 서버에서는 요청을 받고 응답으로 HTML 데이터를 보냅니다. 이 HTML 데이터를 실제 우리가 보는 화면으로 그리기까지의 과정이 바..
컨텐츠를 세로로 중앙 정렬 하는 방법 입니다. 1. padding 이용하기 1) 부모요소에 height값 없이 padding 값 만으로 높이를 지정하여 세로 정렬 합니다. 2. 포지션(Position) 이용하기 1) 부모요소에 positon:relative; 적용 2) 중앙정렬 하려는 컨텐츠 요소에 position: absolute; top: 50%; 적용3) 컨텐츠의 height 값이 고정일 경우 : margin-top:-(height/2); 적용 컨텐츠의 height 값이 고정이 아닐 경우 : transform: translateY(-50%); 적용 3. display: table / table-cell 이용하기 1) 부모요소에 display: table;2) 중앙정렬 하려는 컨텐츠 요소에 displ..
인라인, 인라인-블럭 요소들을 아래와 같이 작성 하였을 때 요소 사이에 간격이 발생 하게 됩니다 . 기본 이러한 간격들을 없애기 위한 다양한 방법들이 있습니다. 1. 인라인 요소들 붙여쓰기 css 수정 없이 간단한 방법으로 간격을 없앨 수 있지만 가독성이 좋지 않습니다. 2.부모 요소에 font-size:0 인라인 요소를 감싸고 있는 부모 요소에 font-size:0 을 적용 한 후,인라인 요소에 기존의 font-size 값을 입력하는 방법입니다. 3. 주석처리 방법 html의 주석을 활용해서 간격을 제거 할 수 있다고 합니다. 4. 닫힘 태그 내리는 방법 닫힘 태그를 아래로 내려 간격을 없앨 수 있습니다. 5. 마진값으로 없애기 마진값을 통해 간격을 없앨 수 있지만 브라우저 마다 마진 값이 달라 추천 ..
meta 태그는 브라우저상에서는 보이지 않지만, HTML문서에 대한 정보를 담고 있고 이러한 정보들을 브라우저, 검색엔진 등의 웹 서비스에 전달 해주는 중요한 태그 입니다. 또한 웹 사이트의 페이지 마다 효과를 설정할 수도 있고 검색엔진의 로봇을 제어하여 보안 성능을 강화하는 역활도 수행합니다. meta 태그는 안에서 사용됩니다. 속성으로는 charset, content, http-equiv, name을 사용합니다.
프로토타입 프로토타입은 콘솔창을 통해 디버깅을 하다보면 보게 되실수 있을겁니다. 자바스크립트의 객체는 부모 역할을 담당하는 객체와 연결되어있습니다. 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있습니다. 이런 부모 객체를 프로토타입 객체 또는 줄여서 프로토타입이라고 부릅니다. ECMAScript spec 에서 자바스크립트의 객체는 자신의 프로토타입(부모로부터 물려받은)을 가리키는 [[Prototype]]이라는 숨겨진 프로퍼티를 가진다라고 되어있습니다. 크롬, 파이어폭스에서는 [[Prototype]]을 _proto_로 나타냅니다. function A() {};var A = new A();console.log(A); 위 코드를 실행하고 콘솔창을 확인하면 이러한 내용을 확인 하실수..
클로져(Closure) MDN에서는 클로져를 내부함수가 참조하는 외부함수의 지역변수가 외부함수에 의해 내부함수가 반환된 이후에도 life-cycle이 유지되는 것을 의미한다. 라고 정의했습니다. 여기서 클로져는 스코프와 밀접한 관계를 가지고 있습니다. 스코프란 함수의 유효범위라는 것을 알고 있으실 겁니다. 클로져는 이러한 함수 내부에서 생성된 데이터와 스코프로 인해 발생하는 특수한 현상 혹은 상태를 말합니다. 클로져에 대해 알아보며 특성과 장점들을 알아보겠습니다.접근 권한 제어지역변수 보호데이터 보존 및 활용 function a(){var x = 1;function b(){console.log(x);} // 변수 x 접근 가능b();console.log(x); } // 변수 x 접근 가능 a(); con..
다른 언어들에서 this는 클래스로부터 생성되는 인스턴스(어떤 집합에 속하는 개별적인 요소) 중 현재 객체를 의미한다고 합니다. 하지만 자바스크립트에서 this는 함수의 현재 실행 문맥(Execution Context)을 나타내며, 자바스크립트에는 4가지의 함수 실행 타입이 있기 때문에 각각의 실행 타입에 따라 this가 변하게 됩니다. 함수 실행 : alert('Hello World!');메소스 실행 : console.log('Hello World!');생성자 실행 : new RegExp('\d');간접 실행 : alert.call(undefined, 'Hello World!'); 각각의 타입은 서로 다른 각각의 문맥을 가지기 때문에 this 키워드를 바르게 이해하기 위해서는 실행 타입이 문맥에 어떤 ..
자바스크립트에서 함수는 function 키워드를 통해서 생성할 수 있습니다. 함수를 생성하는 방법으로는 3가지 방법이 있습니다. 함수선언식(Function Declaration)함수표현식(Function Expression)new function 함수 선언문 function a() {return 'a';} 기명 함수표현식 var b = function bb() {return 'bb';} 익명 함수 표현식 var c = function(){return 'c';} 각각의 함수 선언 방식에 따라 함수의 차이점을 가지고 있습니다. // 함수 선언식에서의 호이스팅 a();function a(){console.log('abc');};> abc // 함수 표현식에서의 호이스팅a();var a = function(){..