JJC's 테크니컬 다이어리

React 앱의 개발환경 구성을 위하여 아래 대로 따라해봅니다. 1. Node.js 설치 및 VS Code 설치 (아래 공식 사이트에서 다운로드하여 설치) https://nodejs.org https://code.visualstudio.com/2. VS Code 열어 Reactjs code snippets 익스텐션 설치 (편리한 React 코드 작업을 위한 옵션) 3. 명령행(또는 파워셸)에서 설치된 버전 확인하기node -v npm -v 4 . React app 만들어 실행하기명령행(또는 파워셸)에서 아래명령으로 create-react-app 스타터 를 설치한다. ※ https://github.com/facebook/create-react-app 에서 제공하는 React 앱의 초기 템플릿을 만들어주는 ..

React Router 컴포넌트에서 자식컴포넌트로 state 전달 location.state를 활용하는 방식임. 네비게이션 메뉴를 표시하는 부분의 Link 또는 NavLink의 to 속성을 다음과 같이 지정하면 하위 컴포넌트에서 받아쓸 수 있음. [상위 Router 컴포넌트의 Link 태그] username:this.state.username}}}>하위 컴포넌트 [하위 컴포넌트 클래스의 componentDidMount 이벤트핸들러] 하위 컴포넌트에서는 다음 예제처럼 전달받은 데이터에 접근 가능 componentDidMount: function() { var recievedMessage = this.props.location.state.username },

React-Table에서 컬럼을 고정하는 방법을 공유합니다. 1. 우선react-table-hoc-fixed-columns react 모듈 을 설치한다. 참조: https://www.npmjs.com/package/react-table-hoc-fixed-columns npm install react-table-hoc-fixed-columns --save 2. import 문을 삽입한다. import ReactTable from "react-table"; import 'react-table/react-table.css'; import withFixedColumns from 'react-table-hoc-fixed-columns'; import 'react-table-hoc-fixed-columns/lib/..

React-Table 에서 컬럼은 가운데 정렬이 디폴트이다.컬럼별로 정의 하려면 아래와 같이 css 방식으로 스타일을 지정하면 간단하다. 1. 우선 App.css 에 클래스를 등록한다..right { text-align: right;} 2. 해당 React-Table 컴포넌트의 columns 에서 className을 지정한다. { Header: 'Qty', accessor: 'qty', className: "right" },

최근 React 는 기본적으로 ie9, ie11 같은 오래된 웹브라우저를 지원하지 않는다.하지만, 방법은 있지만, 실행 속도 등의 문제가 있을 수 있다. https://www.npmjs.com/package/react-app-polyfill 1. react-app-polyfill 모듈을 설치한다.npm install react-app-polyfill 이 모듈은 다음의 언어 기능을 사용가능하게 해준다. Promise (for async / await support) window.fetch (a Promise-based way to make web requests in the browser) Object.assign (a helper required for Object Spread, i.e. { ...a, ..