자라선

www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/lecture/4151?tab=curriculum React & Express 를 이용한 웹 어플리케이션 개발하기 - 인프런 Velopert 님이 알려주는 ReactJS 강좌 입니다. 최근 각광받는 Javascript 라이브러리인 React 를 소개하고, 사용법을 알려주는 강좌 입니다. 초급 웹 개발 프레임워크 및 라이브러리 Front-End React 온라인 강 www.inflearn.com // 모듈을 설치 npm install --save react-addons-update // 프로젝트에서 사용하기 위해 import import update from 'react-addons-update' 배열이..

www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/lecture/4151?tab=curriculum import React from 'react'; import ContactInfo from './ContactInfo'; import ContactDetails from './ContactDetails'; export default class Contact extends React.Component { // 생성자에게 state를 생성하지만 react-hot-loader를 사용할때 // constructor를 재실행해주진 않는다.(새로고침해야함) constructor(props) { super(props); this.state = { selectedKe..

www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/lecture/4150?tab=note React & Express 를 이용한 웹 어플리케이션 개발하기 - 인프런 Velopert 님이 알려주는 ReactJS 강좌 입니다. 최근 각광받는 Javascript 라이브러리인 React 를 소개하고, 사용법을 알려주는 강좌 입니다. 초급 웹 개발 프레임워크 및 라이브러리 Front-End React 온라인 강 www.inflearn.com import React from 'react'; export default class ContactInfo extends React.Component { render() { return ( {this.props.contac..

Webpack-dev-server 모듈을 사용하여 소스코드가 수정될때마다 화면을 새로고침하여 변경점을 반영하지 않고 해당 컴포넌트에 수정사항만 찾아 화면에 반영해준다. 그러나 별도의 설정을 따로 작성해주지 않으면 전체 페이지를 새로고침을 해버리는데 그 이유는 Webpack이 어떤 파일을 어떤 상황에 바꿔야할지 정의를 해주지 않았기 때문이다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); // Webpack 정의 if(module...

Editor: vscode middleServer: nodejs package-manager: npm ※주의: 내가 시청한 강의는 16년도 강의인지라 이 밑에 의존성 모듈들은 전부 구버전으로 명시하여 모듈들을 설치하였다. # Global 의존성 설치 D:\2.develop\2.workspace\ReactInflearnStudy> npm install -g webpack@1.13.1 webpack-dev-server@1.14.1 webpack: 브라우저 위에서 import(require)를 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐주는 빌드 툴 webpack-dev-server: 별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 ..

// Contact 템플릿 class ContactInfo extends React.Component{ render(){ return( {/* props의 오브젝트 값을 사용한다.*/} {this.props.contact.name} {this.props.contact.phone} ); } } // Contact 데이터 생성 class Contact extends React.Component{ constructor(props){ super(props); // state.contactData 배열 선언 this.state = { contactData:[ {name:'Abet', phone:'010-0000-0001'}, {name:'Betty', phone:'010-0000-0002'}, {name:'Cha..

codepen.io/pen/ Create a New Pen ... codepen.io JS Preprocessor Babel은 ES6의 문법을 ES5로 변환해줌 Add External Script에는 React와 React Dom를 추가함 React: 컴포넌트를 담당 React Dom: 실제 Dom에 렌더링을 담당 더보기 JS에서 class가 ES6부터 추가됨 JAVA와 비슷하게 class를 정의하여 구현 할 수있고 static 메소드도 추가할 수있음 단 인터프리터 언어 답게 class 정의가 우선적으로 읽혀야지만 사용할 수 있음. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes JSX class Codelab extends React.Co..

React를 간단하게나마 공부하여 프론트엔드 개발의 방식을 이해하고자 함 공부할 강의 (무료이나 마지막 업데이트가 16년이라 제대로 공부하기엔 적합하지않음) www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/dashboard ES6 - ECMA Script 2015년에 등장한 공식 자바스크립트 문법 Redux - 어플리케이션의 상태를 관리하는 라이브러리 webpack - 모듈 번들러, 각종 로더 및 플러그인을 통해서 프로젝트를 빌드함 React는 view를 담당하는 Library 라고함.. Angualar는 프레임워크이며 다양한 기능을 갖추고 있음 React Native는 모바일 네이티브 앱을 React js로 구현할수 있는 프레임워크 React 라이..