배열은 순서가 있는 값의 집합이다. 각 값은 요소(element)라고 한다. 1. 표현 표현은 대괄호([]) 안에 콤마로 값들을 구분해 주면 된다. 2. 배열의 일반적인특징 배열의 순서는 숫자 type을 사용하는데, index라고 한다. index의 시작은 0부터 시작한다. 모든 배열에는 요소가 몇 개 있는지 나타내는 length(길이)라는 프로퍼티가 있다. 프로퍼티? 프로퍼티는 객체에 한 구성요소인데... 그렇다 배열도 객체의 한 종류이다. 그렇다면 메소드도 있겠네? 객체의 프로퍼티를 사용하기 위해서는 해당 객체(여기서는 arr).(점)property(여기서는 length) 로 사용이 가능하다 (dot notation) 3. 다른 프로그래밍 언어와의 차이점 자바스트립트에서의 배열은 다른 프로그래밍 언어..

1.함수 수학에서의 함수와 비슷한 개념으로 생각하면 좋을것 같다. f(x+10) = y ---> f 에 x 를 집어넣으면(input )y가 나온다.(output) 프로그래밍에서도 거의 동일하게 작성된다. function f([input, input2, ...]){ const output = input + 10; return output; } input이 오면 그 값에 10을 더해주고 내보낸다. (return) function f2(input){ const output = input + 10; } 프로그래밍에서는 return 키워드를 사용하지 않으면 해당 함수는 함수 밖에서 output을 이용한 값을 사용할수가 없다. 이 부분이 수학에서의 함수와 가장 큰 차이점이라고 생각한다. 2.함수의 사용(실행) 프로..

1.변수 프로그래밍에 있어서 변수는 숫자, 문자와 같은 값들을 저장하는 공간을 의미한다. 선언 프로그래밍 언어는 변수를 선언하지 않으면 표현할수가 없다. 변수의 선언은 let과 const를 이용한다. var라는 변수 선언도 있지만 요즘은 거의 쓰이지 않는다. 나중에 scope를 설명할때 조금 설명하겠다. let은 변수안의 값이 변할수 있지만 const로 선언한 변수는 변수안의 값이 변할수 없다. const는 선언할 때 값을 할당하지 않으면 에러가 난다. 2.값 그리고 타입 프로그래밍에서의 값은 수학적 의미의 값과 비슷하다. (하나의 글자나 식이 취하는 수. 또는 그런 수치.‘2x=6’에서 x의 값은 3이다. 여기서는 수 (number type)만 쓰는것이다.)) 반면 자바스크립트는 수만 쓰는것이 아닌 여..

각 모듈에서 모듈의 자유변수는 현재 모듈을 나타내는 객체에 대한 참조다. 모듈은 실제로 전역 모듈이 아니라 각 모듈에 로컬 모듈이다.(이것이 각 파일마다 모듈화가 될수 있는 이유이다.) module 객체에 어떤 변수가 있는지 알아보자. module.children module.exports module.filename module.id module.loaded module.parent module.paths module.required 이 변수들이 현재 모듈(작성하고있는 file)을 나타내는 객체에 대한 참조를 가지고 있다. console.log(moduls) 를 해보면, 모듈객체가 가지고있는 정보가 현재 작성중인 file에 대한 내용임을 알 수 있다. 이중에서 주목해야할것은 exports propert..

웹팩의 엔트리 포인트를 설정하는 방법은 여러가지가 있다. 1. 단일 진입점 module.exports = { entry: "src/b.js" } // or module.exports = { entry:["src/b.js","src/c.js"] } 진입점이 2개가 되어도 상관없다 저 2개의 파일을 합쳐서 번들로 만들어준다. a.js 파일은 변수 2개를 사용하고 그것을 export하고 있다. b.js는 a.js의 변수를 사용하고 c라는 변수를 만들어 export하고 있다. a.js -> b.js b.js -> c.js (여기서는 간단한 예제이지만 실무에서는 무수히 많은 파일이 이런 관계에 있을것이다.) 실행을 하게되면, 번들링된 파일을 html에 load시켜보면 , console에 찍히는것을 볼 수 있다. ..

webpack은 app을 프로세싱할때 내부적으로 프로젝트에 필요한 모든 모듈들을 매핑하는 종속성그래프라는 것을 만들고 한개 이상의 번들파일을 만들어낸다. 언제나 하나의 파일은 다른 파일에 의존한다. 웹팩은 이것을 의존성으로 취급한다. 웹팩은 이미지나 폰트, 다른 리소스들까지도 의존성을 제공한다. 웹팩이 번들링 처리를 할때 그 시작은 config file의 entry points다. 웹팩은 제귀적으로 의존성그래프를 만들고 그것을 이용해서 모든 모듈들의 번들링을 한다. 이 core concepts를 알면 설정을 할 수 있게 된다. entry부터 차근차근 포스팅 하도록 하겠다.

웹팩을 왜 사용하는지 이해하기 위해서는 번들링 하기 전에서의 브라우저 상황을 알아야한다. 브라우저에서 자바스크립트 파일을 실행시키는 방법은 2가지가 있다. 첫번째는 스크립트를 각각의 기능별로 만들어서 include시키는 방법이다. ex) 이렇게 스크립트를 로드하면 network bottleneck 이 일어날 수 있다. 두번째는 하나의 겁나 큰 .js file 을 작성하는것이다. ex) 이렇게 파일을 로드 하는것도 함수, 변수의 스코프 문제나 가독성등 여러 문제가 있다. // javascript categori에서 다루기 즉시실행함수의 등장으로 스코프충돌을 겪지않고 .js 파일들을 합칠 수 있게 되었지만 하나의 파일을 수정하면 전체 파일이 다시 로드 되어야 한다는 치명적인 단점이 있었다. lodash로부터..

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 웹팩은 모듈 번들러이다. 웹팩의 주된 목적은 브라우저에서 사용하는 자바스크립트 파일을 번들해주는 것이지만 다른 리소스들또한 번들링,패키징이 가능하다. cf). what is bundle? 묶거나 묶은 재료 또는 수량의 모음. 1. 모듈 시스템을 이용하여 코드를 작성함 2.다른 파일에서 불러서 사용 (여기서는 2개의 파일밖에 없지만 프로젝트에서는 의존성을 가지..