개발 블로깅
-
[2019.04.22] WebPack 사용법 #4 - babel 세팅개발 블로깅/Modern script 2019. 4. 22. 12:11
브라우저 내에서는 ES6 이상의 문법을 호환하지 않는다. 그럼 우리는 어떻게 ES6문법을 이용하여 개발이 가능한 것인가. 바로 babel이란 모듈이, ES6 문법을 브라우저에 사용할 수 있는 방식인 ES5으로 바꿔준다. 이 babel을 사용하게 위해서는 모듈을 설치하고 webpack에 설정을 해 주어야 한다. 그러면 babel을 사용하는 법을 알아보자. 이전 글에 작업했던 webpack에 이어서 한다. # babel 모듈 설치 npm i -D babel-cli babel-preset-env babel-core 위 세개의 모듈은 babel을 사용하게 위해서 필요로 한 필수 모듈이다. 설치를 하면 package.json에서 babel 관련 버전이 표시되는 것을 확인할 수 있다. 그리고 해당 root경로에 '..
-
[2019.04.21] Webpack 사용법 #3 - 브라우저 자동 동기화 browser-sync개발 블로깅/Modern script 2019. 4. 22. 00:21
이전에 bundle 작업을 자동으로 활성화 해주는 것을 해보았다. 그러나 코드를 저장하고 브라우저에서 반영된 내용을 확인하기 위해서는 새로고침을 해야 했다. 이번에는 새로고침을 하지 않아도 코드를 수정 후 저장만 하면 바로 브라우저에서 반영이 되는 sync browser 모듈을 사용하는 법을 알아볼 것이다. #sync browser 모듈 설치 npm install -D browser-sync browser-sync-webpack-plugin sync browser는 webpack과 함께 사용할 것이므로, browser-sync와 같이 browser-sync-webpack-plugin을 같이 설치해준다. package.json 모듈을 설치하면, package.json 파일에서 devDependecies에 ..
-
[2019.04.21]WebPack 사용법 #2 - webpack.config.js 설정개발 블로깅/Modern script 2019. 4. 21. 23:31
이전 사용법 #1에서는 webpack 명령어를 이용하여 직접 번들파일을 생성해주는 방식을 작업해 보았다. 그러나 웹 서비스를 개발할 때마다 일일히 webpack 명령어를 쳐서 번들화 작업을 해 줄 수 없다. 그래서 webpack.config.js라는 파일을 이용해서 개발작업을 할 때마다 자동으로 번들화 시켜주도록 설정한다. bundle 파일을 자동으로 생성해주는 작업을 위한 설정 - webpack.config.js webpack을 자동으로 사용하기 위한 설정을 하기 위해서는 'webpack.config.js' 이라는 파일을 하나 생성해 줘야한다. 이 파일에 webpack에 관한 정보가 들어가게 된다. const path = require('path'); module.exports = { entry: pa..
-
[2019.04.21] WebPack 사용법 #1 - webpack 설치개발 블로깅/Modern script 2019. 4. 21. 22:25
# webPack이 왜 필요한가? 우선 webPack이란것을 왜 사용하는지부터 정리해보면, https://helloinyong.tistory.com/75 (이전에 작성한 내용) 에 나와 있는 것 처럼 여러 파일을 한꺼번에 묶어서 하나의 .js파일로 사용하기 위한 것도 있다. 무엇보다 파일 간 dependency를 위해서 modern script에서는 import, export, require을 사용하는데, 브라우저가 이를 호환하지 않는다. 그래서 modern script 방식의 dependency를 브라우저에서 사용할 수 있도록 브라우저 방식에 맞게 하나의 js파일로 bunddling(묶음)하여 script src로 선언하는 것! # webPack 설치법 npm install -g webpack webp..
-
[2019.04.17] CommonJS란?개발 블로깅/Modern script 2019. 4. 17. 16:26
개념은 간단하다. '.js' 파일 간의 어떻게 의존성을 가지게 할지 정해주는 것이다. 우선 commonJS라는 개념이 존재하는 이유는, 자바스크립트를 범용적으로 모듈화를 높이기 위함! ES6 리액트 기준으로만 설명 // test1.js function MSG1(){ console.log('1'); } function MSG2(){ console.log('2'); } export {MSG1, MSG2} 위 코드를 보면, test1.js에서 MSG1, MSG2의 함수를 export 한다. export는 다른 곳에서 쓸 수 있게 내보내 주는 것. export 키워드 뒤에는 내 보낼 함수 혹은 변수명을 {}괄호로 묶어줘서 보낸다. 이름을 꼭 맞춰주어야 한다. // test2.js import {MSG1, MSG..
-
[2019.04.17] 웹팩(webpack)이란?개발 블로깅/Modern script 2019. 4. 17. 15:53
요즘 웹 서비스를 하나 개발한다고 하면, 엄청난 양의 코드로 인해 많은 js파일이 생긴다. 양이 많아지는 만큼 js파일 관리가 힘들어지고, 하나하나 스크립트 선언해서 가져오게 되면 그만큼 자원도 엄청나게 소비되게 된다. 그래서 이 많은 양의 파일을 하나로 묶어줌으로써 자원 관리를 쉽게 해주는 기능을 하는 것이 웹팩(webpack)이다. 특히 리액트에서 하나의 컴포넌트마다 하나의 js파일을 생성하고, 뿐만 아니라 여러개의 수많은 이미지 파일, css파일 등등을 가지고 있는데, 이를 하나의 bundle.js 파일로 묶어줘서 웹 브라우저에 올림으로써 웹브라우저가 가지게 될 수고를 덜어준다. 위 사진은 스프린트 진행 중 만든 리액트 프로젝트 파일인데, 개발자도구에서 보면bundle.js파일을 가지고 있고, in..
-
[2019.04.17] ES6 문법 - arrow Function과 일반 function의 차이개발 블로깅/Modern script 2019. 4. 17. 14:03
S6에서 arrowFunction 방식으로 함수를 선언할 수 있다고, 그냥 쓰게 되면 된 통 당한다... 똑같이 함수를 선언하는 방식이긴 하지만 동작하는 기능이 다른 한가지가 있다. 그렇게 공부해도 이해하기 어려운....엄청나게 동적으로 움직이는 그것... 이 빌어먹을 녀석..this arrow function과 function의 차이는 this의 움직임이 다르다.. # ES5 에서의 this의 움직임 function callFunc(){ return { foo : 25, bar : function(){ console.log(this.foo); } } } callFunc.call({foo:100}).bar(); // 25 위 코드에서 ,callFunc를 {foo:100} 으로 바인딩을 해주고 호출을 하였..
-
[2019.04.17] ES6 문법 - default parameter개발 블로깅/Modern script 2019. 4. 17. 12:27
함수에서 매개변수를 호출할 때 넣어주는 데이터가 없으면, 함수에서는 해당 매개변수가 undefined가 된다. function testFunc(argu1, argu2){ console.log(argu1); // 1 console.log(argu2); // undefined } testFunc(1); 그런데 ES6 문법에서는 매개변수가 선언이 되었는데, 호출 시 값이 들어오지 않으면 초기화 해줄 수 있다. function testFunc(argu1, argu2 = 2){ console.log(argu1); // 1 console.log(argu2); // 2 } testFunc(1); 위와 같이 매개변수에 들어오는 값이 없으면 초기화 해 줄 수 있다. # Default parameter 활용법 functi..