SubBrain

ECMA ECMAScript (또는 ES) 는 ECMA 인터네셔널에 의해 표준화 된 범용 프로그래밍 언어로써, 서로 다른 웹 브라우저들에서 웹 페이지의 상호운용성을 보장하기 위한 Javscript 표준입니다. 즉, ECMA-262 는 표준의 이름이고, ECMAScript (또는 ES) 는 ECMA-262라는 표준에서 정의된 프로그래밍 언어입니다. ES6 (2015) Shorthand property names (단축속성명) key와 value명이 같을 경우 하나로 생략이 가능합니다. Destructuring assignment (구조분해할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 합니다. Spread syntax (전개구문) 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠..

모듈 코드를 모아둔 하나의 파일을 말합니다. 재사용성이나 유지보수성 등을 위해 사용되며, 궁극적으로 큰 목적을 달성을 하기 위해서 관련된 함수나 조각 코드를 모아서 만듭니다. 간단히 하나의 자바스크립트 파일이다라고 이해할 수 있습니다. Export / Import 함수, 객체 값을 보낼 때(export), 보낸 값을 받을 때(import) 사용합니다. export방식에는 기본 내보내기 방식과 이름이 정의된 내보내기 방식이 존재합니다. 기존 내보내기 방식은 모듈에서 하나의 함수나 객체를 기본으로 내보내고자 할 때사용하며 이를 Default Exports라고 합니다. 그리고 선언 키워드 앞에다가 export를 붙여서 사용하는 방법을 Named Exports라고 합니다. 먼저 Named Exports 예시는 ..

EventListener 이벤트 리스너는 DOM 객체에서 이벤트(사용자의 반응)가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. addEventListener 이벤트 리스너를 등록하는 방법입니다. 예시는 간단하게 클릭 시, 이모지를 출력하는 예시입니다. querySelector로 'button'를 선택하고, 첫 번째 인자에는 이벤트의 종류를 문자로 지정합니다. 두 번째 인자에는 이벤트가 발생했을 때, 핸들러 함수를 전달해야 합니다. removeEventListener 이벤트 리스너를 삭제하는 방법입니다. 아까 추가한 클릭버튼 옆에 이벤트 삭제 버튼인 remove_btn을 추가하여 이제 클릭 시, 이모지가 나오는 이벤트를 사용하다 이벤트 삭제 버튼을 누를 시, 이모지가 나오지 않는 ..

DOM (Document Object Model) 문서 객체 모델이라고 하며, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 1. 요소 선택하기 getElement 요소를 선택하는 방법은 먼저 예시로 HTML에 body에 다음 태그를 추가했습니다. id값으로 출력 p태그의 id값으로 해당 값을 출력하면 다음과 같이 나옵니다. 아이디값은 고유하여 이를 타깃 해서 가져올 수 있습니다. class값으로 출력 그렇다면 class값으로 가져올 경우 이런 식으로 가져옵니다. 해당 Elemet뒤에 s가 붙습니다. 이유는 class는 중복해서 다수로 쓸 수 있기 때문에, 배열로 리턴됩니다. tag값으로 출력..

구조분해할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 1. 배열구조분해 할당 배열을 변수로 지정할 때 이런 식으로 표현합니다. 해당식을 구조분해할당 표현식으로 한다면 다음과 같습니다. 2. 객체구조분해 할당 객체를 변수로 지정할 때 이런 식으로 표현합니다. 해당식을 구조분해할당 표현식으로 한다면 다음과 같습니다. 3. 객체의 중첩 구조분해할당 객체를 변수로 지정할때, 중첩 구조이라면 이렇게 표현합니다. 해당식을 구조분해할당으로 표현할 때는 다음과 같습니다. 4. 함수와 구조분해할당 함수에 대한 결과값을 출력할 때, 이렇게 표현합니다. 만약 함수에 들어갈 obj의 키값을 알고 있다면 이를 다음과 같이 표현할 수 있습니다. 예제로 알아보는 구..