개발 블로깅/Modern script
-
[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..
-
[2019.04.17] ES6 문법 - Template Literals 문자열 처리개발 블로깅/Modern script 2019. 4. 17. 08:58
자바스크립트에서 문자열을 표시할 때 '(따옴표) 또는 "(쌍따옴표)를 사용하는데, ES6문법에서 들어오면서 템플릿 리터럴(Template Literal)라는 새로운 문자열 표기법이 생겼다. `(백틱) 이라는 문자열을 사용한다. 주의할 점 : 한글에서는 ₩(원)으로 나옴, 영어에서 쳐야 `백틱이 나온다 백틱은 중간에 +로 문자열을 합쳐주거나 하는 것 없이 ` `안에 다음 코드 줄로 변경해도 그대로 문자열을 사용한다. // 백틱 방법 `문자열 첫번째 줄입니다. 두번째 줄입니다.` // 기존 따옴표 방법 '문자열 첫번째 줄입니다.' + '플러스를 안해주면 문법에러가 납니다.' 위와 같이 백틱 문자열은 바로 줄바꿈을 사용할 수 있다. 또한 백틱 문자열 안에서 따옴표와 쌍따옴표는 문자열로 표시된다. `저의 이름은..
-
[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise개발 블로깅/Modern script 2019. 4. 14. 18:05
서버와의 비동기 요청방식 fetch라는 것이 있다. 오잉? 비동기 요청방식은 Ajax 아니야? 맞다. fetch는 Ajax의 방식 중 하나이다. 그것도 최신 방식! 나는 지금까지 Ajax라는 것이 있는 건 줄 알았고, 그냥 써보기만 했다. 근데 사실 비동기 방식의 유래도 있었다. # 비동기 서버 요청의 초기 방식 XML Http Request 왠지 자바에서 서버 통신할 때 많이 본 듯한... 초기에 비동기 요청방식을 사용하려면 저렇게 많은 코드의 틀이 필요로 했다. 그러나 그 코드를 줄이고 간편하게 사용하고자 해서 이후에 나온 것이 Ajax이다. # 비동기 방식 Ajax란? 그리고 Ajax 방식 중 최신기술인 fetch API 이 틀에서 바로 사용 가능! 참고로 fetch API는 promise 방식의 ..
-
[2019.03.27] Rest파라미터 개념개발 블로깅/Modern script 2019. 3. 28. 01:04
ES6 문법에서 또 중요한 부분인 Rest파라미터, 이부분은 파라미터를 받아올 때에 대한 새로운 방식이다12345function sum(...arg){ return arg.reduce((acc, el) => {return acc + el});} sum(1, 2, 3) // 6Colored by Color Scriptercs 위 코드와 같이 파라미터를 받아올 때, 정해지지 않은 파라미터 개수를 배열 형식으로 자유롭게 가져올 수 있다. 마치 arguments와 같다.(사실 MDN문서에 Rest파라미터와 arguments의 차이점을 설명하고는 있지만..그냥 똑같이 생각해도 상관 없을 듯 하다..) 1234567function test(a, b, ...arg){ console.log(a); // 1 consol..
-
[2019.03.27] 전개 연산자 개념개발 블로깅/Modern script 2019. 3. 27. 11:50
배열을 조금 더 직관적으로 사용할 수 있는 방식인 전개 연산자라는 개념이 있다. # 전개연산자123456const add = (a, b, c) => { return a + b + c;} var arr = [1, 2, 3];console.log(add(...arr)); // 6cs위와 같이 배열 변수를 분해하지 않고 그냥 할당해버리는 방식이다. 1234var arr1 = [3, 4, 5];var arr2 = [1, 2, ...arr1, 6, 7]; console.log(arr2); // [1,2,3,4,5,6,7]cs이렇게 값을 순차적으로 하나씩 넣는 작업을 쉽게 할 수도 있다. 그냥 괄호 [] 껍데기를 벗겨서 넣어버린다는 개념으로 생각하면 이해가 쉽다. ... 키워드가 구조분해할당 방식에서도 쓰이므로 헷..