![]()
NPM이란?javascript로 애플리케이션을 개발할 때 다양한 모듈이 필요하다. npm은 이러한 모듈을 쉽게 다운받을 수 있게 하는 도구이다. 예를들어 포맷별로 날짜를 출력하는 함수는 여러 프로젝트에서 다양하게 사용된다. 여러 포맷을 모두 표현 가능하게 하려면 소스의 복잡도가 늘어나는 것은 물론, 매번 프로젝트를 진행할 때마 동일한 js를 반복하여 생성해야 한다. 이러한 비효율적인 과정을 줄이기 위해 자주사용하는 js를 모듈화 한 후, 모듈 저장소에 공유해두면 필요할 때마다 다른 프로젝트에서 다운받아 사용할 수 있다. 이 때 모듈을 쉽게 다운받을 수 있도록 도와주는 도구가 바로 npm이다. (모듈, 라이브러리, 패키지는 비슷한 의미이다.) NPM 설치npm은 Node.js 설치시 자동으로 설치된다. ..
map()배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.const number = [1, 2, 3, 4, 5, 6, 7];const result = numbers.map((number) => number*2);console.log(result); //2, 4, 6, 8, 10, 12, 14//참고 (arrow function)//일반적인 자바스크립트로 표현const result = numbers.map(function (number) { return number*2;});//콜백 함수를 arrow 함수로 표현const result = numbers.map((number) => { return number*2;});//명령문이 하나일 때는 단축할 수 있다const r..
이벤트 전파 (Event Phase) - 캡쳐링, 버블링브라우저에서 HTML 요소에 이벤트가 발생했을 때 어떤 흐름으로 전파하는지 알아보자. 이벤트의 흐름은 최상위 요소부터 이벤트 타겟 요소까지 전달하며 내려가고 (= 이벤트 캡쳐링),다시 반대로 타겟 요소부터 최상위 요소까지 전달하며 올라온다. (= 이벤트 버블링) 위와 같이 간단한 html 예제가 있고, 이 중 span 태그에 클릭 이벤트가 주어졌다고 가정해보자. 다시말해 html 부터 span 까지 이벤트가 타고 올라가서 타겟인 span의 이벤트가 실행되고, 다시 html 태그까지 내려오며 이벤트가 전파된다는 뜻이다. javasc..
즉시 실행 함수 (IIFE, Immediately Invoked Function Expression) 1. 의미즉시 실행 함수란 선언되자마자 단 한번만 실행되는 함수를 의미한다. 함수명을 지어 기명 즉시 실행 함수로 사용할 수도 있지만, 함수명이 있더라도 재호출할 수 없다. (함수명이 의미가 없다는 뜻이다.)그룹연산자 (소괄호) 안에서 정의, 호출하고, 마지막 () 안에는 함수에 전달할 파라미터를 입력한다.그룹 연산자란 ()로 피연산자를 감싸서 표현식을 우선 평가하게 하는 연산자를 말한다. 딱 한번 실행되기 때문에 페이지나 변수를 초기화하는 함수등에 사용할 수 있다. /*(익명) 기본 형태*/(function () { //code})();/*(기명) 기본 형태*/(function test() { /..
자바스크립트에서 this는 호출한 객체를 가리키는 키워드이다.호출한 객체가 명시되어있지 않을 때에는 기본 값으로 this는 window 객체를 가리킨다. let person = { name : 'cho', age : 20, printPerson: function () { console.log(this); console.log(this === person); console.log(this.age); }};위와 같이 person 객체를 선언한 뒤, 함수를 호출하는 방식에 따라 this의 값은 달라진다. person.printPerson(); //person 에 의해 호출-----------------------------------------------------..
HTML 파일에서 JS 파일을 가져올 때 효과적으로 가져오는 방법을 알아보자. HTML 파일은 위에서 아래로 파싱하며 소스를 읽어들인다. 또한 script 태그를 만나면 파싱을 잠시 멈추고, 스크립트 파일을 가져온 뒤(script fetch) 해당 스크립트를 실행(script execution)하는게 기본적인 속성이다. 1. 가장 기본적인 방법 : html 파일 버튼 .... //script.jslet btn = document.querySelector('#btn');btn.addEventListener('click', function () { alert('hi');}); 위 예시에서 버튼을 하나 만들고, script.js 파일에서 클릭 이벤트에 대한 스크립트를 작성했다. 이..
