코딩 노트/JAVASCRIPT (7) 썸네일형 리스트형 [웹 개념] DOM과 BOM DOM은 Document Object Model, BOM은 Brower Object Model이다. Object Model이란 객체 지향 모델, 즉 무언가를 객체(Object)들로서 표현하는 형식을 일컫는다. 따라서 DOM은 웹 페이지(문서)의 내용을 객체들로 표현하는 형식을 말하며, BOM은 웹 브라우저 자체를 객체들로 표현하는 형식을 말한다. 무엇보다 중요한 둘의 공통점은 JavaScript와 같은 스크립트 언어가 웹 브라우저/페이지를 쉽게 제어 및 조작할 수 있도록 한다는 점이다. 1. DOM(DOCUMENT OBJECT MODEL, 문서 객체 모델) DOM은 객체 지향 모델로서 구조화된 문서를 표현하는 형식을 말한다. 쉽게 말해, HTML 등의 문서의 내용을 트리 구조의 객체들로 표현하는 형식을 .. [ 웹 개념 ] URI / URL / URN 의 차이 URI (Uniform Resource Identifier) 서버 리소스 이름은 통합 자원 식별자(uniform resource identifier) 혹은 URI라고 불린다. URI의 'I'가 Identifier(식별자)이다. 인터넷에 있는 자료의 id라고 생각하면 좋다. 서로 다른 자료가 같은 이름을 가지고 있으면 안되기 때문에 URI는 유일해야한다. 그리고 이 URI에는 두 가지 형태가 있는데 이것이, URL, URN이라는 것이다. URI를 정리하자면, 다음과 같다. URI는 웹상의 자원들을 식별할 수 있는 이름표같은 역할을 한다. URI의 하위 개념으로는 URL과 URN이 있다. 여기서 자원(Resource)이란, 웹상에서 우리가 보는 이미지, 이 블로그의 게시글, 기타 웹 상에 접근할 수 있는 모.. [웹 개념] HTTPS와 HTTP의 차이점 1. HTTPS 등장 배경 인터넷의 등장과 함께 프라이버시 문제가 생겨났다. 인터넷을 기반으로 개인 맞춤형 서비스를 진행하다보니, 로그인을 통해 사이트에 고유한 개인 정보를 저장하게 되었고, 전자상거래를 통해 은행과 계좌와 관련된 비밀정보도 오가게 되었다. 그러다 보니 중요한 개인정보가 유출되는 경우가 생기기 시작한다. HTTPS는 HTTP가 전송하는 데이터가 암호화되지 않은 부분을 보완한 프로토콜이다. TLS 계층을 거치는 방식으로 HTTP를 운영하여 HTTP의 전송 메시지 바디(전송되는 데이터가 있는 부분)를 암호화시키는 것이다. 2. HTTP와 HTTPS의 기본 개념과 차이점 HTTP는 클라이언트-서버 구조에 사용되는 프로토콜이다. HTTP는 하이퍼 텍스트 전송 프로토콜의(Hypertext Tran.. [JS - 개념] ES 6 문법 - Number + String + Array + Object / Promise 1. Number 일반적인 기능 Number는 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체(Primitive Wrapper Object)이다. 숫자가 아닌 다른 타입의 값을 Number() 함수를 사용하여 숫자로 바꿀 수 있다. 만일 인수를 숫자로 변환할 수 없으면 NaN을 리턴한다. Number('123'); // 숫자 123을 반환 Number('123') === 123; // 참 Number('unicorn'); // NaN Number(undefined); // NaN Number() 함수는 주로 문자열이나 객체 데이터를 숫자로 변환시킬 때 사용된다. 하지만 Number() 함수가 모든 데이터를 숫자로 변환시키는 건 아니다. 숫자로 인식되는 문자열만 변환된다는 것을 알아두어야 한다. (16진.. [JS - 개념] 엄격 모드(Strict mode) 엄격 모드(Strict mode) ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 준다. Strict 모드는 스크립트나 함수의 맨 처음에 "use strict" 지시어를 사용하여 선언할 수 있다. 엄격 모드 적용하기 엄격모드는 전체 스크립트 또는 부분 함수에 적용가능하다. 단, {} 괄호로 묶여진 블럭문, 컨텍스트에는 적용되지 않는다. 전체 스크립트에 Strict mode 적용 엄격모드를 전체 스크립트에 적용하기 위해서는 정확한 구문 "use strict";(또는 'use strict';) 을 다른 구문 작성 전에 삽입하면 된다. 예제1: "use strict" // 전체 스크립트를 strict 모드로 설정함. try { num = 3.1.. [JS - 개념] this 예제, this 바인딩 자바스크립트에서 함수가 호출될 때는 기존 매개변수로 전달되는 인자 값에 대해서 arguments 객체와 this 인자가 함수 내부로 암묵적으로 전달된다. 일반적인 프로그래밍 언어에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. 하지만 자바스크립트의 경우 Java, C++ 등과 같이 this에 바인딩되는 객체가 한가지가 아니고, 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 결정된다. 따라서, 함수 실행 컨텍스트에서 this는 함수가 어떻게 호출됐는지에 집중해서 파악하면 된다. 함수 호출 방식과 this 바인딩 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 기본적으로 다음 4가지 경우가 있다. 일반 함수 호출시 this 메소드 호.. [JS - 개념] 클로저(Closure)와 예제 클로저의 이해 MDN에서는 클로저를 다음과 같이 정의하고 있다. "A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time." "클로저는 주변 상태(lexical environm.. 이전 1 다음
