본문 바로가기

TIL

 (92)
<자바스크립트 Javascript> var 키워드의 단점 - var 키워드 특징 1) 함수 레벨 스코프 함수의 코드 블록만을 스코프로 인정하기 때문에, 전역 함수 외부에서 생성된 변수는 모두 전역 변수가 되어 전역 변수가 남발될 위험성이 있다. 또한, for 문의 변수 선언문에서 선언한 변수는 for 문의 코드 블록 외부에서 참조가 가능하다. 2) var 키워드의 생략 암묵적 전역 변수를 양산할 수 있다. 3) 변수 중복의 허용 의도하지 않은 변수값의 변경이 일어날 수 있다. 4) 변수 호이스팅 변수 선언 이전에 참조가 가능하다. 위와 같은 특징들이 있지만 가장 큰 위험성은 전역 변수의 사용에 존재한다. 전역 변수는 유효 범위가 넓어 사용 위치와 사용된 이유의 파악이 어렵고, 의도치 않게 변경될 가능성이 있어 복잡성을 증가시키기 때문이다. ECMA Script..
<자바스크립트 Javascript> 프로토타입(Prototype) - 프로토타입이란? 자바스크립트는 객체지향 프로그래밍 언어지만, 다른 객체지향 프로그래밍 언어들이 클래스 기반인 것과 달리 프로토타입을 기반으로 한 객체지향 프로그래밍 언어이다. 프로토타입이라 함은, 부모 객체를 가리킨다. 즉, 모든 객체는 부모 객체를 가지고 있으며, 따라서 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있는데 이런 부모 객체를 가리켜 프로토타입 객체 혹은 프로토타입이라 칭한다. 참고 : poiemaweb 웹사이트
<자바스크립트 Javascript> 안정적인 개발환경을 위한 Strict mode - Strict mode란? 선언하지 않은 변수에 값을 할당하고 실행하면, 자바스크립트 엔진은 스코프 체인을 통해 이를 찾아본 후 에러를 발생시키는 것이 아니라 전역 변수를 생성한다. 이를 암묵적 전역 변수(implicit global)이라 한다. 다만, 이러한 암묵적 전역 변수는 추후 오류를 발생시키는 원인이 될 수 있으므로 반드시 변수 키워드를 사용하여 변수를 선언한 다음에 변수를 사용하는 것이 좋다. 하지만 그럼에도 오타나 문법 지식의 미비 등의 이유로 실수는 언제나 일어날 수 있다. 따라서 이러한 잠재적인 오류 자체를 일어나기 어렵도록 개발 환경을 만들고 그 환경에서 개발을 하는 것을 근본적인 해결책이라 할 수 있겠다. 이러한 맥락에서 ES5부터 strict mode가 추가되었다. 즉, stric..
<자바스크립트 Javascript> 객체의 변경불가성(Immutability) - 변경불가성이란? 함수형 프로그래밍의 핵심 원리로, 객체가 만들어진 이후에 상태를 변경할 수 없는 디자인 패턴을 뜻한다. 객체는 기본적으로 참조 형태로 운용되기 때문에, 그 상태가 언제든지 변할 수 있다는 위험성을 가지게 된다. 따라서 상태가 변경될 경우 객체가 존재하고 있는 장소에 변경 사실을 통지하고 대처할 수 있는 대응이 필요하다. 이 대응 방법으로는 객체를 불변객체로 만들어 변경이 필요한 경우에는 객체의 방어적 복사(defensive copy)를 통해 새로운 객체를 생성하여 변경하는 방법이 있고, Observer 패턴으로 객체의 변경에 대처하는 방법이 있다. 다만 불변 객체가 많아지면 이는 또 다시 프로그래밍에 있어 부적절한 방법이 될 수 있다. 이에 ES6에서는 불변 데이터 패턴(immutab..
<자바스크립트 Javascript> 실행 컨텍스트 - 실행 컨텍스트(Execution Context) 실행 컨텍스트는 쉽게 말해 자바스크립트에서 실행 가능한 코드가 실행되기 위해 필요한 환경을 말한다. 실행 가능한 코드란, 전역 코드와 Eval 코드(eval 함수로 실행되는 코드), 함수 코드(함수 내에 존재하는 코드)를 말한다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있어 자바스크립트의 핵심원리라 할 수 있다. 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보를 알고 있어야 하는데, 그 정보라 함은 변수, 함수 선언, 변수의 유효범위, this와 같은 것들이다. - 실행 컨텍스트의 3가지 객체 실행 컨텍스트는 일반적으로 실행 가능한 코드를 형상화하고 구분하는 추..
<자바스크립트 Javascript> 빌트인객체(Built-in Object) - 자바스크립트의 객체 자바스크립트의 객체는 네이티브 객체(Native object), 호스트 객체(Host object), 사용자 정의 객체(User-defined object)로 총 3가지가 있다. 1) 네이티브 객체 애플리케이션 전역의 공통된 기능을 제공한다. 환경에 관계없이 언제나 사용이 가능하다. Object, String, Number, Function, Array, RegExp, Date, Math 등의 객체 생성과 관련있는 함수 객체와 메서드로 구성되어있다. 또한 네이티브 객체를 Global objects라 부르기도 하는데, 전역 객체가 Global object이므로 혼동에 주의해야 한다. *Object() - 객체를 생성하는 생성자 함수. 다만 객체를 생성할 때에는 특수한 상황이 아니면 ..
<자바스크립트 Javascript> DOM (3) - 요소를 조작하기(DOM Manipulation) 1) 텍스트 노드에 접근/수정하기 텍스트 노드에 접근하는 방법은 아래와 같다. : 요소 노드의 자식인 텍스트 노드의 부모 노드를 선택 -> firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색 -> 텍스트 노드의 프로퍼티(nodeValue)를 이용하여 텍스트를 취득 -> nodeValue를 이용하여 텍스트를 수정. *nodeValue - 노드의 값을 반환함. 리턴값은 텍스트 노드이면 문자열, 요소 노드이면 null. IE6 이상의 브라우저에서만 사용가능. *nodeName, nodeType으로 노드의 정보 취득 가능. 2) 어트리뷰트 노드에 접근/수정하기 어트리뷰트 노드에 접근/수정할 때는 다음의 프로퍼티나 메서드를 사용한다. *className ..
<자바스크립트 Javascript> DOM (2) - 요소에 접근하기 1) 하나의 요소에 접근(DOM Query) *document.getElementById(id) - id 어트리뷰트 값으로 요소 노드를 한 개 선택하여 가져옴. 복수개 선택 시 첫번째 요소만 반환함. *document.querySelector(cssSelector) - CSS 셀렉터를 사용하여 요소 노드를 한 개 선택하여 가져옴. 복수개 선택 시 첫번째 요소만 반환함. IE8 이상의 브라우저에서만 사용가능. 2) 여러 개의 요소에 접근(DOM Query) *document.getElementsByClassName(class) - class 어트리뷰트 값으로 요소 노드를 모두 선택하여 가져옴. 공백으로 구분하면 여러 개의 class 지정 가능함. IE9 이상의 브라우저에서만 사용가능. ..
<자바스크립트 Javascript> DOM (1) - DOM(Document Object Model)이란? 직역하면 문서 객체 모델을 뜻한다. 텍스트 파일로 이루어진 웹 문서를 브라우저에 렌더링 하려면 브라우저가 이해할 수 있는 구조로 메모리에 저장하는 일이 필요하다. 즉, DOM이란 이 때 텍스트를 객체로 만들고, 이들을 다시 트리 구조로 만든 것으로 이 DOM이 렌더링에 쓰인다. DOM은 일반적으로 자바스크립트를 통해 동적 변경이 가능하다. 따라서 DOM은 자바스크립트 객체로 제공되는데, 이를 DOM API(Application Programming Interface)라 한다. 즉, DOM API는 웹 문서의 동적 변경을 위한 자바스크립트 프로퍼티와 메소드의 집합이다. - DOM tree란? 브라우저가 HTML 문서를 로드하고 파싱하여 생성하는 모델..
<자바스크립트 Javascript> this의 사용 - this의 사용 자바스크립트에서 함수는 객체의 프로퍼티에 할당되었을 때 메서드라 칭한다. 메서드는 그 존재 이유인 기능을 실행하기 위해 객체에 저장된 정보에 접근할 수 있어야 한다. 이 때, 메서드가 자신이 속한 객체의 프로퍼티 값을 사용할 때에 this 키워드를 사용한다. 즉, this 키워드는 객체 자신을 가리키는 키워드이다. - this 사용의 이점 this 키워드를 사용하지 않고 외부 객체를 참조하여 객체에 접근하는 것도 가능하다. 다만 이 경우 해당 객체의 값이 변경되면 에러가 발생할 수 있다는 단점이 있다. 따라서 외부 객체를 참조하는 방법보다 this 키워드를 사용하여 객체에 접근하는 것이 안전하다. - 자바스크립트 this의 특징 자바스크립트에서의 this 키워드는 다른 언어와는 달리 ..

티스토리툴바