ㄷㅣㅆㅣ's Amusement

목차2017/04/13 - [Programming/React] - [React] Node.js + React -- 1. 초간단 프로젝트 만들기2017/04/13 - [Programming/React] - [React] Node.js + React -- 2. 개발환경 구축 포스팅 1,2를 하는데에 30분이 채 걸리지 않았으리라 믿어 의심치 않는다.일단 환경까지 구축했으니... 디폴트 뷰 말고 react를 이용해서 멋드러진(물론 비교대상은 디폴트뷰)를 만들어보자. 그럼 한시간쯤 될듯? 1. react-router- routing은 문자 그대로 path를 설정해주는 것이다. 예를들어 ("localhost:3000/", "localhost:3000/about", "localhost:3000/404"등 주소에따라..

목차2017/04/13 - [Programming/React] - [React] Node.js + React -- 1. 초간단 프로젝트 만들기 이전 포스팅만으로 React를 이용한 front end 개발을 하기위한 준비는 모두 마쳤다.(Raspberry pi에 설치한 것만 아니라면 대략 5분쯤 걸렸으려나... 아참, raspberry pi에서 Node.js를 설치하는 방법은 부록으로 나중에 포스팅 해야겠다.) $ npm startcs- 이 커맨드를 날리면, dev향 서버를 띄우게 되는데, 우리가 전에 봤던.. 그 원자력(?)모양의 아이콘이 돌돌 돌아가는 기본 페이지가 뜬다.- express(express도 node 앱을 만들어준다. 물론 주된 사용은 라우팅)를 사용했다면 "Welcome to Expres..

React를 처음 공부할 때에는 Rails에서 했으나, 요즘 트렌드가 Node (Node.js)이고 앞으로도 계속 그러할 것이므로... Node.js도 공부하면서 다시 포스팅을 시작한다. (구글 형님들의 V8엔진은 역시 후덜덜) (React가 무엇인지 궁금하다면 클릭!!) 일단 놀라운 것은, Node.js에서 React를 돌리게끔 하는것은 Rails의 그것보다 만배는 더 쉽다는 것이었다!!(개인차가 있을 수 있으나, 대부분 Ruby보다 JavaScript가 더 친숙할 것이라는 가정 하에...)(물논 나에게 React를 가르쳐줬던 사수는 Ruby on Rails의 절대고수였었다.) 1. Node.js 설치 - 공식 URL : https://nodejs.org/ko/ - 이 포스트에서 쓰는 버전 : Mac ..

React는 [부모 컴포넌트 -> 자식 컴포넌트] 방향으로만 데이터를 전달하는 것을 지향한다. 이렇게 하면 컴포넌트들이 매우 단순해질 수 있기 때문이다.자식 컴포넌트로 데이터를 전달하기위해 사용하는 props와 state에 알아보자. props properties를 줄여서 표기한 것.컴포넌트에 전달되는 데이터. - props를 전달받은 컴포넌트에서 props를 직접 수정하지 않도록 한다. - 값을 변경하고 싶다면 state를 사용한다.PropTypes props의 유효성 검증isRequired를 사용하여 필수속성을 나타낼 수 있다.API 설명의 도구로 활용할 수 있음.ex) 123456789var Painter = React.createClass({ propTypes: { inkColor: React.P..

React의 라이프 사이클 메소드는 컴포넌트 안드로이드나 iOS와 같이 사용 단계에 맞는 후킹 기법을 제공한다. 초기화 getDefaultProps인스턴스를 생성하는 시점에 딱 한 번 호출.복제되는 것이 아니며, 하나의 값을 모든 인스턴스가 공유한다.getInitialState인스턴스를 생성할 때마다 호출.이 시점부터 this.props에 접근 가능.componentWillMount최초 렌더링 직전에 호출.렌더링 하기 전 컴포넌트 상태에 영향을 줄 수 있는 마지막 단계render컴포넌트를 나타내는 가상 DOM을 만든다.React는 이 메소드에서 가상 표현 객체를 실제 DOM과 비교하여 변경할 부분이 있는지 확인한다.필수 작성 메소드이며 다음과 같은 작성 규칙을 따른다.접근은 this.props, this..