Language/JavaScript

[AOS] data-aos

명령어설명data-aos사용할 애니메이션 효과명data-aos-anchor 특정한 객체에 anchor를 설정, 어떤 객체를 기준으로 애니메이션이 시작 될지 설정data-aos-anchor-placement애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)data-aos-delay 애니메이션 재생 대기시간 설정 (default: 0)data-aos-duration 애니메이션 재생시간 설정 (default: 400)data-aos-easing애니메이션 시간 흐름에 따는 속도 설정 옵션(default : ease)data-aos-offset애니메이션 효과가 시작될 객체의 위치 설정data-aos-once스크롤 할 때마다 애니메이션이 재생될지 설정(default : ease) ※ ..

[JavaScript] JavaScript API

API Application Programming Interface의 약자로, 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다. 자바스크립트의 API 자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다. 자바스크립트 API 문서 : 자바스크립트 자체에서 제공하는 API 의 정보 ECMAScript (표준문서) 자바스크립트 사전 (생활코딩) 자바스크립트 레퍼런스 (MDN) jscript 레퍼런스 (MSDN) 호스트 환경의 API 문서 웹브라우저 API Node.js API Google Apps Script API 자바스크립트 API 는 어떤 호스트환경에서도 사용가..

[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 언더스코어(_), 영문자..