my_lesson/_ReactJS17 ReactJS - interactive game -create-react-app ReactJS - interactive game -create-react-app react v16.3.2create-react-app v1.5.2/...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 NodeJS, NPM, Yarn 설치 [바로가기]django+reactjs project [바로가기]상호작용하는 게임을 만들면서 ReactJS를 익혀보자 원문보기~$ yarn create react-app my-app //2020.01.15 Update~$ cd my-app~my-app$ rm -f src/* && touch index.js && touch index.css // don't delete the folder, just its contents ~my-app/src$ .. 2018. 4. 17. React-router - Server side Rendering _특징 ReactJS - Server side Rendering _특징 server side rendering 의 장점검색 최적화구글 검색엔진은 크롤러에 javascript 엔진이 내장되어 있기 때문에 개발자의 별도 작업 없이도 준비한 데이터를 렌더링해준다. 크롤링을 지원하지 않는 사이트에서 가능하게 하려면 서버사이드 렌더링을 따로 구현해야 된다. 성능개선서버 사이드 렌더링을 하게 되면 첫 렌더링된 html을 client에게 전달해주기 때문에 초기 로딩속도를 향상시킬 수 있으며, javascript파일을 불러오고 렌더림 작업이 완료되기 전에도, 유저가 사이트의 contents를 이용 할 수 있게 된다. server side rendering 의 단점프로젝트의 복잡도서버사이드 렌더링을 구현하면 프로젝트의 복잡도가.. 2018. 4. 14. React-router - react-hot-loader ReactJS - react-hot-loaderreact-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 Install react-hot-loaderreact-hot-loader는 코드의 바뀐 부분을 실시간으로 반영해주는 plugin이다.설치할 때 꼭 버전을 준수하자 react-hot-loader@next~cra-router$ yarn add react-hot-loader@next entry 를 다시 배열 형태로 돌려준다.~cra-router/config$ webpack.config.dev.js : entryentry: [ 'react-hot-loader/patch', 'react-dev-u.. 2018. 4. 14. React-router - Code Splitting _webpack Prodoction ReactJS - Code Splitting _webpack Prodo react-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 webpack environment~cra-router/config$ webpack.config.prod.js : entry entry: { vendor: [ require.resolve('./polyfills'), 'react', 'react-dom', 'react-router-dom', ], app: paths.appIndexJs, } pages를 불러올 때 이를 자동으로 pages/index.async.js로 차환하도록 설정~cra-router/config$.. 2018. 4. 13. React-router - Code Splitting _route code splitting asyncComponent ReactJS - Code Splitting _route code splitting asyncComponent react-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 asyncComponent 항수는 파라미터로 컴포넌트를 불러오는 함수를 받아와서 성태관리를 자동으로 해준다. ~cra-router/src/lib$ asyncRoute.jsimport React from 'react'; export default function asyncComponent (getComponent) { return class AsyncComponent extends React.Component { state =.. 2018. 4. 13. React-router - CodeSplitting(prodoction) _ Create chunk ReactJS - CodeSplitting(prodoction) _ Create chunk react-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 비동기적 코드 불러오기 : Create Chunk 코드를 비동기적으로 불러오면, webpack에서 처리를 하면서 코드를 분리시키는과정을 chunk라 한다. ~cra-router/src/components$ SplitMe.jsimport React from 'react'; const SplitMe = () => { return ( SplitMe );}; export default SplitMe; 여러줄의 import파일을 한줄로 대체 하기위한 i.. 2018. 4. 12. 이전 1 2 3 다음
