js

모듈애플리케이션 규모가 커지면 하나의 js파일을 여러개로 쪼개는 것이 개발 및 유지보수에 효율적이다. 이 때 쪼개진 하나의 js 파일을 모듈이라고 한다. 모듈로 분리하게 되면, 필요한 어떤 곳에서도  재사용이 가능하다. 웹 애플리케이션이 완성되면 웹서버에 배포하게 된다. 사용자들이 브라우저를 통해 웹사이트에 접근하게 되면 브라우저는 사용자들에게 ui를 보여주기 위해 웹서버에 html, css image, js 같은 자원을 요청한다. 웹서버가 준비된 자원을 브라우저에게 응답함으로써 사용자들은 ui를 볼 수 있게 된다. 하지만 개발 편의성만을 위해 계속 js를 분리하면, 브라우저가 웹서버에게 요청해야할 파일의 갯수가 많아지고, 그만큼 컨텐츠를 요청하고 커넥션하는 시간이 소비되기 때문에 이러한 네트워크 비용의..

NPM 명령어npm init npm으로 프로젝트를 관리하기 위해 아무것도 없는 상태에서 실행하면 프로젝트명 등 기본 정보를 입력해야한다.npm init -y -y옵션을 주면 디폴트값이 자동으로 입력되어 기본 정보를 각각 입력하지 않아도 된다.npm install (축약 i) 원하는 패키지(모듈)을 다운받을 때 사용한다.npm install 그냥 다운받으면 디폴트로 가장 최신 버전이 다운로드되는데, 특정 버전을 다운받고 싶다면 @뒤에 버전을 명시해준다.npm install --save (축약 -S) dependencies가 추가된다. npm@5 버전부터는 디폴트로 --save 옵션이 적용된다.npm install --save-dev (축약 -D) devDependencies에 추가된다.npm insta..

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() { /..