스코프(Scope) : 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데 필요한 잘 정의된 규칙 var a = 2; 위의 간단한 코드에서 컴파일러와 엔진은 각각 다음과 같은 일을 수행한다. - 컴파일러 : (현재 스코프에 미리 변수가 선언되지 않은 경우) 변수 선언 - 엔진 : 스코프에서 변수를 찾고 변수가 있다면 값을 대입 이때 엔진이 어떤 종류의 검색(LHS 혹은 RHS)을 하느냐에 따라 검색 결과가 달라지게 되는데 위의 경우에서는 변수 a를 찾기 위해 LHS(Left- Hand Side) 검색을 수행한다. LHS검색은 변수가 대입 연산자의 왼쪽에 있을 때 수행하고, RHS 검색은 변수가 대입 연산자의 오른쪽에 있을 때 수행한다. 좀 더 살펴보자면 RHS 검색은 단순히 특정 변수의 값을 찾는 것..
이벤트 위임 이벤트 위임은 캡쳐링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다. 1) 여러 개의 자식 엘리먼트 이벤트를 한 번에 관리 : HTML의 읽기전용 속성인 데이터 속성을 사용하여 이벤트 위임을 구현할 수 있다. 데이터 속성 여기서 데이터 속성은 화면에 안 보이게 글이나 추가 정보를 엘리먼트에 담을 수 있는 속성으로 data- 로 시작하는 속성이다. ... 위처럼 html을 작성하면 각각의 데이터 속성을 읽는 방법은 아래와 같다. (대시는 camelCase로 변환된다.) var article = document.getElementById('electriccars'); article.datase..
웹페이지는 브라우저를 통해 보여지게되는데 이때 이 브라우저가 웹페이지를 그리는 방법에 대해 알아보자. 브라우저가 하나의 화면을 그려내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부른다. 이를 수행하는 주체는 렌더링 엔진이다. 렌더링 엔진은 요청받은 내용을 브라우저 화면에 나태내는 일을 담당하는데, HTML, CSS, JavaScript등의 파일을 브라우저가 화면에 표시할 수 있도록 변환하여 픽셀단위로 나타낸다. 브라우저마다 사용하는 렌더링 엔진이 다르고 이 때문에 같은 소스가 브라우저마다 다르게 그려지는 크로스 브라우징이슈가 발생한게 된다. (크로스 브라우징이슈는 자바스크립트 엔진이 달라 발생하기도 한다.) 다시 렌더링 과정으로 돌아와서 위의 그림을 요약하자면 아래와 같은..
해당 내용은 "리팩터링 2판(마틴 파울러)"를 읽고 정리한 글입니다. 리팩터링을 제대로 하려면 견고한 테스트가 필요하다. 4.1 자가 테스트 코드의 가치 "모든 테스트를 완전히 자동화하고 그 결과까지 스스로 검사하게 만들자" 컴파일 시 테스트가 함께 돌아가면서 디버깅 시간이 크게 줄어들었다. 테스트를 몇 분 간격으로 자주 수행했기 때문에 버그가 발생한 지점을 쉽게 찾을 수 있고 의심되는 코드의 양이 많지 않았다. *회귀 버그 : 잘 동작하던 기능에서 문제가 생기는 현상. 일반적으로 프로그램을 변경하는 중 뜻하지 않게 발생한다. 같은 맥락에서, 잘 동작하던 기능이 여전히 잘 동작하는지 확인하는 테스트를 회귀 테스트(regression test)라 한다. "테스트 스위트는 강력한 버그 검출 도구로, 버그를 ..
