잘 정리해보자

Babel : cross browsing 문제를 해결하기 위해 만들어졌으며, ECMAScript2015+ (ES6) 이후 코드들은 모든 브라우저에서 동작하도록 호환성을 지켜준다. Typescript, react 등 다른 스크립트들에 대해서도 동작하게 한다. 바벨 3단계 빌드 Parsing (파싱) : 코드를 각 토큰별로 분해 Transforming (변환) : ES6을 ES5로 변환 Printing (출력) 1. 설치 터미널 npm install @babel/core @babel/cli > @babel/cli : babel의 터미널 도구 app.js const alert = msg => window.alert(msg); //ES6 기준으로 작성된 코드 2. 바벨 실행 터미널 터미널에서 npx로 실행 (주..

loader (로더) : javascript, css, style, image 등 파일들을 모듈로 로드할 수 있게 도와준다. webpack-loader.js : 패키지 최상단 webpack.config.js 파일과 동일한 경로에 생성 module.exports = function myWebpackLoader(contents) { console.log('test~!!'); return contents; } webpack.config.js module : { rules :[ { test : /\.js$/, //.js로 끝나는 모든 파일들은 use키값의 로더로 실행된다. (loader가 처리해야할 파일의 패턴 (정규식)을 입력) use : [ path.resolve('./webpack-loader.js') ]..

Webpack : 여러개의 js 파일이 의존관계 (서로 부르고 부르는 관계) 경우 하나로 모아주는 역할을 한다. 하나로 모아진 것을 bundle 이라고 한다. (webpack = bundler) webpack-cli : webpack을 터미널 명령어로 실행할 수 있는 패키지 설치 : npm install -D webpack webpack-cli > webpack과 webpack-cli 설치 > -D 옵션은 개발용 패키지로 설치되며, devDependencies 안에 설치된다. > -D 옵션이 없는 경우, dependencies 안에 설치됨. webpack 옵션 --mode : 개발/운영 선택해서 배포할 수 있다. ("development" / "production" / "none") (필수) --entr..

javascript 에서 여러 js에서 선언한 전역함수를 사용하면, 전역함수가 오염될 수 있다. ex) sum()함수를 전역으로 선언 후, sum = 1 을 선언해버리면 함수 사용이 불가능해진다. IIFE (Immediately Invoked Function Expression) 즉시 실행 함수 : 정의되자마자 즉시 실행되는 javascript 함수를 말한다. (function(){ statements; })(); > IIFE 함수를 통해서만 접근하도록 해서, 전역함수 오염이 안된다. ex) var math = math || {}; (function(){ function sum(a,b){ return a + b; } math.sum = sum; })() > math.sum 객체로 접근 가능. AMD - ..

vue.js file 구조 - dev.env.js : npm start 시 적용되는 설정파일 - prod.env.js : npm run build 로 배포버전에 적용되는 설정파일 - node_modules : npm으로 설치되는 서드파트 라이브러리 디렉토리 - build : webpack 빌드 설정 디렉토리 - src > components : vue 컴포넌트 모인 파일 > app.vue : 가장 최상위 컴포넌트 > main.js : 가장 먼저 실행되는 스크립트 파일 (vue 인스턴스 생성) Vue 구성 1. Vuex : Virtual DOM 을 관리하는 매니저 역할 개별 요소들의 정보 반영을 체크하고 해당 값들을 업데이트 한다. (기존 Browser Workflow : 화면을 다시 그릴 때 발생되는 스..

Apply : this에 해당되는 값을 변경할 수 있다. Var fnObj = { fn1 : function( str1, str2 ){ console.log( str1 + “/“ + str2 ); console.log( this ); } }; Var obj0 = { “test1” : “test1”, “test2” : “test2" }; fnObj.fn1.apply( [“wow1”,”wow2"] ); > undefined/undefined > [“wow1”,”wow2”] => this 가 파라미터 값으로 잡힌다. fnObj.fn1.apply(obj0); > undefined/undefined > {test1 : “test1”, test2 : “test2”} => this가 obj0으로 잡힌다. fnObj...

Hoisting : 단어는 끌어올려지다 라는 의미로 변수나 함수 선언 후 맨 위로 끌어올려지는 의미이다. 함수 안의 선언된 변수들은 맨 위로 호이스팅 되며, 스크립트에 선언된 함수들은 자바스크립트 엔진에 의해 맨 위로 호이스팅 되는데, 변수(전역변수) 는 호이스팅 되지 않는다! ex ) test(); function test(){ return “test123”; } > “test123” * test함수가 선언되기도 전에 호출을 하는데, 에러가 발생하지 않음 -> test함수가 호이스팅 됨. ------------------------------------------------------------ test(); var test = function(){ return “test123”; } > Syntext..

Cross Browsing : 사용자가 사이트를 같은 환경 및 서비스를 이용 할 수 있어야 한다는 목적 엔진 종류 Trident (트라이던트) : MS(마이크로소프트) 레이아웃 엔진, IE가 사용하는 엔진 Gecko (게코) : 모질라 레이아웃 엔진, FireFox가 사용하는 엔진 Webkit (웹킷) : Safari, Chrome에서 사용하는 엔진, 점유율이 매우 높은 엔진 Presto (프레스토) : Opera 소프트웨어 엔진, 오페라 15버전부터 해당 엔진을 사용하지 않음. Blink (블링크) : 웹킨 엔진에서 나왔지만 웹킷엔진과 거의 비슷함. 오페라가 현재 사용 중이다. 듀얼 : 멕스톤, 스윙 브라우저가 사용하며, 웹킷과 트라이던트 엔진 두가지를 옵션으로 두며 사용한다. IE의 크로스 브라우징 ..