Javascript Patterns - 기본 1. 유지보수 가능한 코드 작성 읽기 쉽다 일관적이다 예측 가능하다 한 사람이 작성한 것처럼 보인다. 문서화되어 있다. 2. 전역 변수 최소화 전역변수의 문제점 자바스크립트 애플리케이션이나 웹페이지 내 모든 코드 사이에 공유된다는 점. 모든 전역 변수는 동일한 전역 네임스페이스 안에 존재하기 때문에, 애플리케이션 내의 다른 영역에서 목적이 다른 전역 변수를 동일한 이름으로 정의할 경우 서로 덮어쓰게 된다. /* * result는 선언되지 않은 상태로 사용. * 이 코드는 잘 동작하지만, 이 함수를 호출하고 나면 전역 네임스페이스에 result라는 변수가 남아 문제를 유발 */ function sum(x, y) { result = x + y; return res..

1. 개요 브라우저에서 렌더링의 성능은 중요한 요소 가운데 하나 렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있음 2. 브라우저의 주요 컴포넌트 웹 앱을 구성할 때 자바스크립트의 코드를 작성하는 것과 실행하는 것을 분리하면 안됨 자바스크립트 코드는 환경과 상호작용 1) 사용자 인터페이스 주소 입력 바, 앞/뒤로가기 버튼, 즐겨찾기 메뉴 등. 웹 페이지를 보는 창을 제외한 브라우저 디스플레이의 모든 부분. 2) 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 상호작용을 다름. 3) 렌더링 엔진 웹 페이지의 표시를 책임. 렌더링 엔진은 HTML과 CSS를 파싱하고 화면에 파싱된 내용을 표시. 4) 네트워킹 다양한 플랫폼에서 여러 구현 방식을 사용해 만들어진 XHR 요청과 같은 네트워..

V8 엔진 웹 브라우저를 만드는데 기반을 제공하는 오픈 소스 자바스크립트 엔진 C++ 작성된 고성능의 자바스크립트 & 웹 어셈블리어 엔진 동작 과정 일반적인 자바스크립트 엔진 동작 과정 V8 엔진 동작 과정 Javascript Code 작성 Javascript Code를 파서(Parer)가 파싱 AST(Abstract Syntax Tree) 생성 생성된 AST를 Ignition 에게 전달 V8 엔진의 인터프리터를 Ignition 이라고 하며 바이트 코드 생성(Bytecode) 및 실행을 담당. 원본 소스 코드 보다 컴퓨터가 이해하기 쉬운 바이트 코드로 변환함으로써 원본 코드를 다시 파싱(Parsing) 해야 하는 수고를 덜고 코드의 양도 줄이면서 코드 실행 때 차지하는 메모리 공간을 아끼려는 목적. 바이..

정의 자바스크립트 코드를 실행하는 프로그램/인터프리터 자바스크립트 엔진은 표준적인 인터프리터로 구현 될 수 있고, 특정한 방식으로 바이트코드로 Just In Time(JIT)컴파일로 구현 할 수도 있음 여러 목적으로 사용될 수 있지만 주로 웹 브라우저를 위해 사용 자바스크립트 코드를 해석하고 실행하기 위해 만들어진 일종의 프로세스 가상 머신 역할 자바스크립트 코드를 브라우저에 의해 해석되거나 어플리케이션 임베드 될 수 있는 최적화된 코드로 변환하는 역할 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어 혹은 기계어로 변환해주는 역할 종류 Google - V8 (Chorme과 Node.js 사용) Mozilla- Rhino Firefox - SpiderMonkey Safari - ..

상속(Inheritance) .ecosystem { color : red; } 생태계 동물 호랑이 사자 코끼리 식물 설명 .ecosystem 에 적용된 색상(부모에서 지정한 스타일)이, 하위 요소들에게도 적용 상속되는 속성들(properties) 상속이 CSS 속성 모두 적용되는 것이 아니라, 글자를 다루는 속성들이 대부분 포함 font font-size font-weight font-style line-height font-family color text-align text-indent text-decoration letter-spacing opacity 기타 등등 강제 상속 상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 부모에서 자식으로 강제 상속 자식을 제외한 후손에게는 적용되지 않..

속성 선택자(Attribute Selectors) HTML 속성을 이용 대괄호([]) 사용 ATTR 속성 attr을 포함한 요소 선택 [disabled] { opacity : 0.2; /* 20% */ color : red; } ATTR=VALUE 속성 attr 을 포함하며 속성 값이 value 인 요소 선택 value 인 요소에 쌍따옴표 생략 가능 [type=“password"] { opacity : 0.5; color : red; } ATTR^=VALUE 속성 attr 을 포함하여 속성 값이 value 로 시작하는 요소 선택 [class^=“btn-"] { font-weight : bold; boder-radius : 20px; } DANGER NORMAL ATTR$=VALUE 속성 attr 을 포함..