자바스크립트

[JavaScript] 바닐라 자바스크립트(Vanilla JavaScript)

바닐라 자바스크립트란? 바닐라 JS는 강력한 Javascript 애플리케이션을 만들기 위한 빠르고 가벼운 크로스 플랫폼 프레임워크다. 공식 사이트는 아니지만 바닐라 자바스크립트를 대변하는 웹 사이트에서는 Vanilla JS를 위와 같이 정의한다. Vanilla-js 웹 사이트에는 바닐라 자바스크립트와 jQuery를 비교한 내용을 게시해 놓았다. 명령어를 수행하는 속도와 사용하는 코드를 예로 들어 차이점을 이야기한다. 바닐라 스크립트의 정의처럼 비교 결과는 바닐라 스크립트가 jQuery에 비해 유용하다고 보여준다. 바닐라 자바스크립트 소스를 보았다면 바닐라 자바스크립트가 무엇인지 알 수 있다. 바로 순수한 자바스크립트다. 그리고 정말인지는 몰라도 바닐라(Vanilla)라는 단어의 뜻은 스페인어 "Vanin..

[JavaScript] 비동기처리(async/await)

비동기 처리 방식 자바스크립트는 싱글 스레드 프로그래밍언어기 때문에 비동기처리가 필수적이다. 비동기 처리는 그 결과가 언제 반환될지 알수 없기 때문에 동기식으로 처리하는 기법들이 사용되어야 하는데, 대표적으로 setTimeout이 있고 callback과 promise가 있다. 세 가지 모두 비동기 코드를 동기식으로 작성하는데 휼륭한 기법들이지만, 모두 약간의 문제점을 가지고 있다. async와 await는 이런 문제들을 해결함과 동시에 그 사용법에 있어서도 훨씬 단순해졌다. // promise 문법 function p() { return new Promise((resolve, reject) => { resolve('hello'); // or reject(new Error('error'); }); } p(..

[JavaScript] RegExp 객체

RegExp 객체 RegExp 객체는 정규 표현식을 구현한 자바스크립트 표준 내장 객체다. RegExp 객체를 생성하는 문법은 다음과 같다. 문법 new RegExp(검색패턴[, 플래그]); 검색 패턴을 나타내는 정규 표현식은 따옴표나 슬래시(/)로 감싸야 한다. 기본 검색 설정을 변경할 수 있는 플래그는 필요할 때만 전달할 수 있다. RegExp.prototype 메소드 모든 RegExp 인스턴스는 RegExp.prototype으로부터 메소드와 프로퍼티를 상속받는다. 이렇게 상속받은 RegExp.prototype 메소드를 사용하여 정규 표현식을 표현할 수 있다. RegExp.prototype.exec() RegExp.prototype.test() exec() 메소드 exec() 메소드는 인수로 전달된 ..

[JavaScript] 정규 표현식의 응용

특수 문자(special characters) 정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다. 하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다. 자바스크립트 정규 표현식에서 사용할 수 있는 대표적인 특수 문자는 다음과 같다. 특수 문자 설명 \ 역슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함. \d 숫자를 검색함. /[0-9]/와 같음. \D 숫자가 아닌 문자를 검색함. /[^0-9]/와 같음 \w 언더스코어(_)를 포함한 영문자 및 숫자를 검색함. /[A-Za-z0-9_]/와 같음. \W 언더스코어(_), 영문자..

[JavaScript] 정규 표현식의 개념

정규 표현식(regular expression)이란? 정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴이다. 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다. 정규 표현식의 생성 자바스크립트에서 정규 표현식을 만드는 방법은 다음과 같다. 정규 표현식 리터럴을 이용한 생성 RegExp 객체를 이용한 생성 자바스크립트에서 정규 표현식 리터럴은 다음 문법을 사용하여 표현한다. 문법 /검색패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다. var regStr = /a+bc/; // 정규 표..

[JavaScript] strict 모드

strict 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 준다. strict 모드는 스크립트나 함수의 맨 처음에 "use strict" 지시어를 사용하여 선언할 수 있다. "use strict" // 전체 스크립트를 strict 모드로 설정함. try { num = 3.14; // 선언되지 않은 변수를 사용했기 때문에 오류를 발생시킴. } catch (ex) { document.getElementById("text").innerHTML = ex.name + " "; document.getElementById("text").innerHTML += ex.message; } 실행 결과 ReferenceError num is not ..