본문 바로가기

복습

[Webpack] Babel babel Babel Babel 은 es6/es7 으로 작성된 코드를 es5 코드로 transpiling 하기 위한 도구이며 transpiler 이다. 작은 모듈들로 구성되어있으며, Babel은 다양한 모듈을 담는 일종의 상자역할을 함 왜 쓰는가 ? 아직까지 최신 문법을 지원하지 않는 브라우저가 있기에 호환을 위해 씀 babel-loader webpack이 모듈을 번들링할 때 바벨을 사용하기 위한 로더 $ npm install --save-dev babel-loaderbabel-preset-env babel-preset-env 모듈은 설정된 환경에 적합한 플러그인을 자동으로 설정해줌 $ npm install --save-dev babel-preset-envquery: { presets: ["env"]}/..
[Webpack] Webpack 웹팩이란? webpack Webpack Webpack 은 Module Bundler 이다. Module ? 모듈은 구현 세부사항을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드조각이다. Bundler ? Bundle : 소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든것을 포함하는 패키지. Bundler 란 필요한 의존성에 대해 정확히 추적해 해당하는 의존성들을 그룹핑 해주는 도구이다. 모듈번들러는 빌드타임에 실행되며 번들파일을 생성한다 (예: bundle.js) 생성된 번들파일을 브라우저에서 로드한다. 웹팩(Webpack) 의 장점 모듈 번들러의 기능을 커스터마이징해서 사용 가능 third-party library에 대해 모듈로 통합하는 기능 제공 we..
[Javascript] 객체지향 자바스크립트 [클래스] Class 클래스 (Class) 자바스크립트는 ES6부터 클래스를 도입했다. 하지만 다른언어의 클래스와는 다르다. 상속에 대해 문법적으로 보기 편하게 만든것일 뿐이다. 이를 Syntactic Sugar 라고 한다. 클래스 정의 (Class declarations) 클래스는 함수이므로 함수 표현식과 함수 선언식을 사용하는것처럼 사용가능하다. class Person{}console.log(typeof Person); // function class 는 다른 함수처럼 호이스팅(hoisting) 을 지원하지 않는다. const p = new Person(); // error! Person is not definedclass Person{} 일반함수처럼 함수 표현식이 가능하며 이를 클래스표현식이라 한다. 이름은 ..
[Javascript] 객체지향 자바스크립트 [상속] Inheritance 상속 (Inheritance) 자바스크립트는 클래스기반 언어가 아니기때문에 상속(Inheritance)이라는 기능이 없다. 하지만 프로토타입을 이용해서 상속을 구현할 수 있다. ES6부터 추가된 class 라는 문법이 있지만 이는 문법이 추가된 것이지 클래스 기반으로 바뀌었다는 의미는 아니다. 자바스크립트에서는 두가지의 상속방법이 존재한다. Classical 방식 Prototypal 방식 classical 방식은 new 연산자를 통해 마치 JAVA 의 객체 생성방식과 비슷해 classical 방식이라 한다. prototypal 방식은 Object.create() 메서드를 이용해 객체를 생성하고 확장하는 방식이다. 짚고 넘어가기 함수를 정의하면 일어나는 일 (Parsing) Func ..
[Javascript] 객체지향 자바스크립트 [프로토타입] 프로토타입 (Prototype) 워밍업 자바스크립트는 프로토타입 기반 언어라고 불린다. 그렇다면 프로토타입이 무엇인지 파헤쳐봐야 재밌어지지 않을까 싶다. prototype 이라는 단어의 뜻 부터 알고 시작하도록 하자!prototype : 원형, 본형, 원작 자바스크립트는 사실 객체지향이다? Java, C++ 등 다른 언어는 class 라는 개념이 있다. 하지만 자바스크립트에는 존재하지 않는다. ES6 부터 지원된 class 라는 문법이 존재하지만 문법이 추가됐을 뿐 class 기반으로 바뀌지는않았다. class 기반이 아니므로 상속도 존재하지않는다.자바스크립트가 class 기반이 아닌데도 객체지향이라고 불리는이유는 prototype 이라는것이 존재하기 때문이다. 그렇기 때문에 우리는 prototype 을..
[Javascript] 객체지향 자바스크립트 [컬렉션] 컬렉션 (Collection) Map Set WeakMap WeakSet 왜 WeakMap 과 WeakSet은 Iterable 하지 않은가? 메모리 누수? 일반적인 Object 도 key 와 value 의 쌍을 계속 추가할 수 있는 일종의 컬렉션이다. 하지만 몇가지 문제들이 있다. 기본적으로 Object 는 Object 의 Key 는 문자열과 Symbol만이 사용될 수 있고, [Symbol.iterator] 를 추가하지않는 한 이터러블하지 않다. ES6 컬렉션은 사용자의 데이터와 빌트인(built-in) 메서드의 이름이 충돌되지 않기 위해 설계되었다. 즉, 컬렉션의 key는 빌트인 메서드들과 분리되어있기 때문에 컬렉션 내의 멤버 데이터를 드러내지 않는다. 이러한 이유로 직접적으로 obj.[key] obj..
[Javascript] 객체지향 자바스크립트 [이터레이터, 이터러블, 제너레이터] 이터레이터, 이터러블, 제너레이터 for forEach() for...in for...of 심볼(Symbol) 인터페이스(Interface) 이터레이터(Iterator) 이터러블(Iterable) 제너레이터(Generator) for 배열루프를 순회하기위한 일반적인 방법 for(var i = 0; i = 0){ console.log(arr.pop());} while 문을 살펴보도록 하자 while( 계속 반복할지 판단 ) { 반복시마다 처리할 것}데이터에 대한 공급 : 계속 반복할지 판단 부분과 반복시마다 처리할 것 데이터에 대한 소비 : while문 자체는 데이터 공급에대한 소비이다.이터레이터 인터페이스 에 맞춰서 본다면 var obj = { array: [1, 2, 3, 4], next: functi..
[Javascript] 객체지향 자바스크립트 [소괄호의 의미와 IIFE] 소괄호의 의미 소괄호 () 가 의미하는 바가 무엇인지 알아보고, 즉시실행함수(IIFE)가 무엇인지 알아보도록한다. 함수 선언과 표현 먼저 함수 선언과 표현에대한 차이점을 알아보도록 한다. 함수선언 (Function Declarations) function name (parameter){ statements} name : 함수이름 parameter : 함수의 인자이며 255개까지 인자를 가질 수 있습니다 statements : 함수의 본문을 기술합니다함수의 선언은 이름을 가지며 선언시 자동으로 호이스팅(hoisting) 됩니다. foo(); function foo(){ console.log("hello");}// "hello" 함수 선언을 뒤에 했음에도 불구하고 foo() 호출시에 정상적으로 작동 함수표현..

티스토리툴바