컴퓨터이야기/React4 Webpack, Babel, React 시작하기 원문 : Tutorial: How to set up React, Webpack 3, and Babel, in 2017 Webpack, Babel, React 시작하기 리액트는 대부분 SPA(Single Page Application)를 만들기 위해 사용됩니다. 그러나 Webpack과 Babel를 이용하여 웹사이트에 적용할 수 있습니다. 대부분의 초보자들이 Webpack과 React를 접목시키는 방법을 모르기에 간단한 튜토리얼을 준비 했습니다. 무엇을 배울 수 있나요? Webpack을 설치하고 설정하는 법 Babel을 설치하고 설정하는 법 React를 설치하는 법 컨테이너 컴포넌트와 프리젠테이션 컴포넌트를 작성하는 법 번들된 파일을 HTML 페이지에 포함하는 법 Webpack Dev Server를 설치하고.. 2018. 1. 9. React 시작하기 #3 React에서 사용하는 ECMAScript6 (ES6) 문법 1. Block scoped variables ES6에서 새로 등장한 변수 형태는 let과 const이다. let은 기존의 var를 대체하는 block varibale 이고, const는 상수로써 한번 선언이 되면 값을 변경 할 수 없다. 이들 두 변수는 block scope 내부에서만 존재하며, 임시사각지대인 TDZ가 존재한다. TDZ (Temporal Dead Zone) 임시사각지대, block scope 내에서는 지역변수/상수에 대한 hoisting이 이뤄지기는 하나, 선언된 위치 이전까지는 해당 변수/상수를 인식하지 못한다. 즉, hoisting은 하지만 var 처럼 undefined로 값을 초기화 시키지는 않는다. { let a = 1.. 2017. 5. 7. React 시작하기 #2 Webpack Tutorial 참조하여 나름대로 번역 및 정리해 보았습니다 :D 대체 webpack을 왜 사용할까? 현실적으로 webpack을 사용하는 이유는 아래와 같다. .js 파일들을 하나로 bundle할 수 있다. Frontend 코드에 npm 패키지를 사용할 수 있다. babel을 사용하여 ES6/ES7 자바스크립트 코드를 작성할 수 있다. 코드를 Minify하고 Optimize 할 수 있다. LESS나 SCSS를 CSS 형태로 변환할 수 있다. Hot Moudle Replacement(HMR)를 사용할 수 있다. 자바스크립트에 모든 유형의 파일을 포함할 수 있다. 엄청나게 많은 고급 기능들이 있다. 왜 이러한 기능이 필요할까? js 파일 번들 : 자바스크립트들 모듈 형태로 작성이 가능하다. 때.. 2017. 5. 7. React 시작하기 #1 본 포스팅은 Guide 문서가 아니라 제가 공부하고 이해했던 것들을 끄적이는 글 입니다 :D 들어가기에 앞서 국내 Front-end 시장에서 Front-end 개발자들이 알아야하는 녀석들이라 함은 Angular2와 React 이 두 녀석들 일 것이다. 물론 js에 대한 이해도는 기본적으로 깔려있다는 전재겠지? 개인적인 의견이니.. 아무튼 Angular2는 GOOGLE에서 만든 Framework이고 React는 Facebook에서 만든 Library이다. 그런데 Framework는 무엇이고 Library는 무엇일까? 사전적인 의미는 다음과 같다. Framework : 뼈대, 틀Library : 도서관, 서재 사전적 의미를 토대로 내 나름대로 해석해보자면 Framework는 대부분의 기능을 제공해주지만 틀 .. 2017. 4. 16. 이전 1 다음
