기록공간

ES6가 나오면서 var 이외에도 let과 const 변수 키워드가 추가 되었다. 이 세가지의 특징은 무엇이며, 서로 어떠한 차이점이 있는지 알아보도록 하자. var var는 ES6 이전에 변수를 선언할 수 있는 유일한 키워드였다. var 키워드는 다음과 같은 특징이 있다. 함수레벨에서의 스코프로 구분 변수 선언시 var 키워드 생략 가능 중복 선언 허용 변수 호이스팅 (호이스팅은 뒤에서 설명..) 이러한 특징은 대부분 의도되지 않은 변수 사용을 초래할 뿐만 아니라 코드 복잡도를 높이는 원인이 된다. 이러한 단점을 보완하기 위해 ES6에서는 let과 const 키워드가 도입되었다. let 지금부터 let의 특징을 알아보도록 하겠다. 스코프(Scope) 대부분의 언어는 블록 레벨 스코프를 지원하지만 Jav..

스토리지(Storage)? 스토리지는 HTML5에서 추가되었다. 스토리지는 window(창) 객체의 하위 객체로, 하드에 영구로 저장되는 로컬 스토리지와 브라우저 실행 중에만 유효한 세션 스토리지 이렇게 두 종류로 나뉜다. 로컬 스토리지의 형태 로컬 스토리지는 키(Key)와 값(Value)의 형태로 이루어져있고, 이를 바탕으로 저장된다. 키는 저장된 값을 식별하고 가져오는데 사용된다. 키를 사용해 값을 저장하고, 반대로 값을 요청할 때에는 키를 통해서 하게된다. 키에 저장되는 값은 숫자나 문자열 또는 객체나 배열 같은 형태로 저장할 수 있다. 로컬 스토리지 메서드 및 속성

자바스크립트 코드는 html 태그 어디에 놓더라도 동작한다. 하지만 일반적인 사이트들의 html 코드를 살펴보면 맨 마지막에 가 삽입되어 있다는 것을 알 수 있다. 도대체 어떤 이유가 있는 것일까? 만약 다음과 같이 자바스크립트를 삽입했다고 가정해보자. 이렇게 간단한 자바스크립트 코드는 별 문제가 생기지 않을 것이다. 하지만 매우 무거운 자바스크립트 코드들이 포함되어 있다면 어떨까? 그 코드들을 불러오고 실행하느라, 그 밑에 있는 html 코드들이 로딩되지 못하게 될 것이고, 이는 브라우저가 렌더링 되는 것에 방해가 될 수 있다. 그래서 사용자는 완성되지 않은 중간 화면을 오랫동안 쳐다보고 있어야 할지도 모른다. alert( "Hello, JavaScript...!"); 다음과 같이 자바스크립트 코드를 ..

바닐라 자바스크립트? 바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다. 왜 하필 바닐라(Vanilla)? 위키백과에 따르면 바닐라의 뜻은 다음과 같다. 바닐라는 향신료 중 하나로, 난초의 일종인 바닐라속에 속해 있으며, 원산지는 멕시코이다. 바닐라라는 이름은 스페인어 "Vainilla"에서 나왔으며 작은 꼬투리, 콩을 뜻한다. 뜻에서 유추할 수 있듯, 바닐라는 콩이라는 뜻으로 "핵심, 근본이 되는" 이라는 의미를 비유적으로 표현할 수 있다. 그러므로 바닐라 자바스크립트는 핵심이 되는 아무것도 포함되지 않은 순수 자바스크립트를 함축적으로 표현하는 것이다. 프로그래밍적 관점에서의 바닐라 자바스크립트 오늘날 자바스크립트는 다양한 프레임워크와 라..

HTML의 특징 중 하나인 시맨틱(Semantic) 태그에 대해서 알아보도록 하자. 시맨틱 태그란? 우선 시맨틱(Semantic)이라는 단어가 무슨 뜻인지 부터 살펴보도록 하자. 시맨택(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉 HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 예를 들어, 태그는 시맨틱이 아닌(non-semantic) 태그인 반면, , 태그는 시맨틱(sematic) 태그라고 볼 수 있다. 태그만 보고는 이 태그에 어떤 것이 들어갔는지 알 수 없다. 하지만, , 태그는 대략 어떤 내용이 들어갈지 그 의미를 유추할 수 있다. 태그 안에는 표가 들어갈 것이고, 태그 안에는 글이 들어갈 것이라는 정도는 유추가 가능하다. 위와 같이, 시맨틱..

[개요] AJAX는 XML에 기반한 종합 기술로 Asychronous Javascript XML(비동기 자바스크립트 XML)을 줄인 말로 자바스크립트로 HTTP 요청을 보내 XML 응답을 받아 사용하는 기술이다. AJAX는 하나의 독립된 기술이 아니다. 화면은 표준 HTML + CSS 로 구성 및 작성하고 화면에 대한 조작과 상호작용은 문서 객체 모델(Document Object Model, DOM)로 처리하고 데이터 교환은 XML 형식으로 처리한다. 그리고 데이터의 변환과 검색은 XML 기술인 XSL과 XPath를 사용하며, 비동기 통신에는 웹 브라우저 안에 내장되어 있는 XMLHttpRequest 객체를 사용한다. 이 모든 것을 하나로 묶는 언어로 자바스크립트를 사용한다. 이것을 AJAX라고 한다. ..

jQuery는 자바스크립트 라이브러리 일종이다. "write less, do more"를 통해 알 수 있듯이 기존 자바스크립트 문장을 더 적은 라인으로 줄일 수 있다. 또한 라이브러리 자체도 가볍고 설치도 필요없이 사용할 수 있다. [개요] jQuery 는 빠르고 간결한 자바스크립트 라이브러리이다. HTML DOM 횡단(HTML Document traversing, HTML 요소들을 넘나드는 것), 이벤트 처리, 애니메이션, AJAX 를 단순화 하여 빠른 웹 개발을 가능하게 해준다. 다양한 브라우저에 지원된다. 라이브러리 자체가 매우 경량 파일이다. (약 90kb 수준의 파일 크기) 존 레식(John Resig)에 의해 개발되었다. [장점] HTML 과 DOM, CSS 의 변경이 매우 간편하다. 이벤트 ..

· 자바스크립트의 특징 1. 인터프리트 언어 컴파일 과정이 필요없이 브라우저가 읽고... 해석하고... 실행한다. 2. 동적 데이터타입 모든 변수를 『var』로 선언하면 끝이다. 데이터 타입을 별도로 지정해 줄 필요가 없다. 3. 객체 지향 언어 단, 자바와 다른 점은 클래스 개념을 사용하지 않으며 프로토타입을 활용하게 된다. · 직접적으로 많이 사용하는 용도 1. 이벤트에 반응하는 동작의 구현 2. AJAX 를 통해 페이지 로딩 과정 없이 컨텐츠 연동이나 데이터 제출 가능 3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환 4. 사용자 입력 데이터에 대한 검증 · 자바스크립트 객체 1. 내장 객체, 사용자 정의 객체 ※ 내장 객체는 생성자 함수가 미리 작성되어 있으며 사용자 정의 객체는 ..