1. 심볼(Symbol) 이란? 자바스크립트는 6개의 타입을 가지고 있다. 원시 타입 Boolean null undefined Number String 객체 타입(Object Type) Object 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 2. Symbol의 생성 Symbol은 Symbol() 함수로 생성한다. Symbol() 함수는 호출될 때마다 Symbol 값을 생성한다. 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값이다. let mySym = Symbol(); console.log(mySym); conso..
템플릿 리터럴(Template literal) ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. const template = `템플릿 리터럴`; console.log(template); ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다. const template = ` Home News Contact About `; console.log(template); 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단..
1. Rest 파라미터 1.1 기본 문법 Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ... 을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 함수에 전달된 인수들은 순차적으로 파라미터와 Rest 파라미터에 할당된다. 그러나, Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다. function test_function(num1, ...rest) { console.log(num1); // 1 console.log(rest); // [2, 3, 4, 5] } test_..
1. 화살표 함수의 선언 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법을로 함수를 선언할 수 있다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { return { a: 1 }; } () =..
함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다. 함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다. 동일한 작업을 반복적으로 수행해야 한다면 (동일한 구문을 계속해서 중복해서 작성하는 것이 아니라) 미리 정의된 함수를 재사용하는 것이 효율적이다. 이러한 특성은 코드의 재사용이라는 측면에서 매우 유용하다. 함수의 일반적 기능은 어떤 작업을 수행하는 문(statement)들의 집합을 정의하여 코드의 재사용에 목적이 있다. 이러한 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다. 1. 함수 정의 함수를 정의하는 방식은 3가지가 있다. 함..
자바스크립트에는 8가지 자료형이 있다. 이 중 일곱개는 '원시형(Primitive type)'이라고 불리며 단 하나의 데이터(문자열, 숫자 등)만 담을 수 있다. 그러나 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(Entity)를 저장할 수 있다. 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 한다. 1. 객체 자바스크립트는 객체(Object)기반 언어이다. 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이며, 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값..
1. 하이퍼링크(HyperLink) HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. Visit google.com! 2. href 어트리뷰트 href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 ..
시맨틱 웹(Semantic Web) 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프..
1. 자주 사용되는 HTML 태그 1.1 : 문서 유형 형식을 지정한다. 웹 브라우저가 페이지를 어떻게 해석해야 하는지 알려준다. : 이 페이지를 html 형식으로 해석하라는 뜻이다. 1.2 : 모든 HTML의 부모 요소이며 웹 페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단, 은 예외이다. 웹 페이지의 시작과 끝에 기술한다. 1.3 : head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다. head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다. 1.4 : 문..
