jam 블로그

Webpack이란? Webpack은 최신 javascript application을 위한 정적 모듈 번들러입니다. 좀 더 설명하면 es6를 쓰는 javascript들을 모아서 하나의 파일로 만듭니다. 설정에 따라서 sass나 이미지 등도 bundle 시킬 수 있습니다. 주 목적은 다중 파일들을 하나로 묶어서 웹 로딩 시 파일 다운로드 되는 것들 최대한 줄여보자입니다. Webpack에 넣을 패키지들 호환성 문제가 되지 않는 선에서 최신 버전으로 설치할 예정입니다. (최신을 사랑합니다.) webpack typescript babel 설정하기 필요한 package들을 다 설치해 봅시다. # npm 대신 yarn을 설치하고 사용할 수 있습니다. # webpack 설치 npm install -D webpack w..

const, let javscript ES6 버전에서는 변수 선언시 이전 버전의 var 말고도 const, let 키워드가 추가되었습니다. let 블록 스코프 변수로써 자신을 정의한 블록에서만 접근 가능하며 블록 밖에서는 볼 수 없습니다. function letTest() { let x = 10; console.log(x); //10 if(true) { let y= 20; console.log(y); //20 } console.log(y); //Reference Error Exception } const 읽기 전용 변수, 즉 값을 다시 할당할 수 없는 상수를 선언 const도 블록 스코프 변수라 let으로 선언한 변수와 규칙은 동일 다만, 객체 자신이 아닌 참조값이 저장하므로 객체 내부는 변경 가능 fu..

destructuring assignment (해체 할당) 이터러블이나 객체의 값/프로퍼티를 각각 배열이나 객체 생성자 리터럴과 비슷한 구문으로 변수에 할당하는 표현식 // es5 var arr = [1, 2, 3]; var a = arr[0]; // 1 var b = arr[1]; // 2 var c = arr[2]; // 3 // es6 const arr = [1, 2, 3]; let a, b, c; [a, b, c] = arr; // [1, 2, 3] let [d, , e] = arr;console.logbconsole.logb console.log(d); // 1 console.log(e); // 3 let [f, ...g] = arr; console.log(a); // 1 console.log(..

function parameter 기본값 es6에서 es5와 다르게 함수에서 파라미터 값에 기본값을 설정할 수 있습니다. //es5 function myFunc(x, y, z) { x = x === undefined ? 1 : x; y = y === undefined ? 2 : y; z = z === undefined ? 3 : z; } myFunc() // 1, 2, 3 //es6 function myFunc(x = 1, y = 2, z = 3) { console.log(x, y, z); } myFunc(x,4,z); // 1, 4, 3 펼침 연산자 (spread operator) 이터러블(iterable) 객체를 개별 값으로 나누는 펼침 연산자(spread operator) ... 로 표기합니다. /..

CORS (Cross Domain) 서버와의 통신을 위해 ajax나 XMLHttpRequest를 사용하다보면 CORS 에러가 나오는 경우가 종종 발생합니다. 할때마다 설정 방법이나 우회 방법을 항상 찾다보니 매번 고생하는거 같아 정리해봅니다. CORS 란? CORS는 Cross-Origin Resource Sharing의 약자로 보안상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들면 다음과 같습니다. # 사이트 도메인이 www.a.com 일 경우 const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === xhr.DONE) { if (xhr...