jam 블로그

React의 전반적인 것 Created: Feb 14, 2020 4:08 PM React React는 Facebook에서 만든 SPA(Single Page Application)을 만들기 위해 고안된 언어입니다. 비슷한 것으로는 Vue, Angular가 있습니다. 설치 및 실행 # node를 먼저 설치 후 진행해야합니다. # node 설치 후 # create-react-app은 그간 설정하기 어려웠던 webpack 등을 자동으로 만들어주는 명령어 입니다. npm create-react-app project-name cd project-name # 실행 시 localhost:3000으로 가상 서버가 띄워집니다. yarn startReact 기초 해당 글은 16.12 최신 버전을 기반으로 작성하였습니다. p..

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) ... 로 표기합니다. /..