JavaScript

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

자바 스크립트를 여러 파일로 쪼갠 것을 모듈이라고 하며, 여러 모듈을 효과적으로 분리하고 불러와 사용하기 위해 모듈 시스템이 만들어졌다. 자주 사용하는 모듈 시스템으로는 CommonJS와 ES Module이 있다. ES ModuleES6(ES2015)에 도입된 자바스크립트 모듈 시스템이며, index.js를 모듈화하여 불러오고, 이 html을 실행하면 100/90 이라는 로그를 조회할 수 있다. /* index2.js */import avgtemp from './math.js';console.log(avgtemp(80, 10)); //45export default로 선언된 함수 avg는 다른 이름으로 호출하더라도 오류 없이 호출이 가능하다. /* math2.js */const perfec..

모듈원래 웹문서 안에서 간단히 웹브라우저를 조작하기 위한 언어였지만, 애플리케이션 규모가 커지면서 하나의 js 파일을 여러개로 쪼개야하는 상황이 생겨났다. 이 때 쪼개진 하나의 js 파일을 모듈이라고 한다. 이러한 모듈을 언제든지 불러올 수 있도록 하는 방법을 '모듈 시스템'이라고 한다. 자바스크립트에서 모듈  시스템이 있기 전에는 script 태그를 통해 불러와야했는데, 전역 스코프를 공유한다는 문제점이 있다. 파일이 여러개로 나뉘어있어도 하나의 소스로 존재하는 것 처럼 동작한다는 점이다./* a.js */var number = 10;/* b.js */var number = 20; .... .....위와 같은 예제에서 로그에서 number는 20을 출력한다. b.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..