Study-Note

* webpack 브라우저 위에서 import(ES5에서는 require) 를 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다. npm으로 설치한 것 또한 사용할 수 있게 해주며 자바스크립트 파일을 하나로 합쳐주는 등 많은 것들을 자동화 시켜주는 빌드 툴! * webpack-dev-server 별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 열 수 있으며 hot-loader 를 통하여 코드가 수정 될 때마다 자동으로 리-로드 되게 할 수 있다. (개발용 서버) * 설치 방법 - 리눅스: $ sudo npm install -g webpack webpack-dev-server - 맥, 윈도우: npm install -g webpack webpack-dev-server mac에서 프..

2. Component Mapping 데이터 배열을 리액트에서 랜더링할 땐 map을 사용한다. * arr.map(callback, [thisArg]) callback 새로운 배열의 요소를 생성하는 함수 currentValue 현재 처리되고 있는 요소 index 현재 처리되고 있는 요소의 index 값 array 메소드가 불려진 배열 thisArg (선택항목) callback 함수 내부에서 사용 할 this 값을 설정 컴포넌트 매핑 class Contact extends React.Component { render() { return ( /* 하드 코딩 */ Contacts Abet 010-0000-0001 /* 반복되는 부분 => 이 부분을 또다른 컴포넌트로 바꾸기*/ Betty 010-0000-0002..

3. props & state props 컴포넌트 내부의 Immutable Data => 변하지 않는 데이터를 처리할 때 사용 - JSX 내부에 { this.props.propsName } 컴포넌트를 사용 할 때, 괄호 안에 propsName="value"와 같이 작성 this.props.children 은 기본적으로 갖고있는 props로서, 여기에 있는 값이 들어간다. class Codelab extends React.Component { render() { return ( Hello {this.props.name} {/*여기 이름 name으로 일치시키기 - name="velopert"*/} {this.props.children} //JSX ); } } class App extends React..

2. JSX JSX : 자바스크립트 내애서 HTML코드를 자유롭게 작성할 수 있다 var a = ( Welcome to React CodeLab ); "use strict"; var a = React.createElement( "div", null, "Welcome to ", React.createElement( "b", null, "React.js CodeLab" ) ); - XML-like syntax 를 native JavaScript 로 변경해준다. - " " 로 감싸지 않는다. - ( ) 를 사용하지 않아도 오류는 발생 하지 않지만 가독성을 위하여 사용하기 - 모든 JSX는 컨테이너 앨리먼트 안에 포함시켜야 한다. /* 에러 발생 코드 */ render() { return ( Hi I am Er..

1. React.js 기초 참고: React & Express 를 이용한 웹 어플리케이션 개발하기 Redux(리덕스): 클라이언트 앱의 복잡성을 제어하기 위한 하나의 state제어 수단이다. Webpack: 자바스크립트 모듈과 관련 리소스들을 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러 Express.js: 노드 상에서 동작하는 웹 개발 프레임워크 MongoDB: NoSql Database Mongoose: Node.js에서 MongoDB를 사용하기 쉽도록 하는 것 * react.js 프레임워크가 아닌 라이브러리! 프레임워크와 라이브러리의 차이 프레임워크 - 틀. 필요한 기능이 이미 만들어져 있는 것. 때문에 이 틀에서 벗어나기 어렵다. - 단 한가지 프레임워크만 사용 가능하다. 다른 ..