my_lesson/_ReactJS17 React-router - Code Splitting(prodoction) _Environment ReactJS - Code Splitting(prodoction)_Environmentreact-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 ReactJS - Code Splitting 한개의 파일에서 처음 시작부터 모든 것들을 불러 오는 것이 아니라 개발자가 설정하는데로 파일이 필요해질 때 불러오게 하는 기법이다. 다음 명령을 통해서 webpack 및 babel 환경설정을 밖으로 꺼내자~cra-router$ yarn eject vendor전역적으로 사용되는 vendor라 불리는 라이브러리를 따로 분리시켜주자.~cra-router/config$ webpack.config.dev.js : .. 2018. 4. 12. React-router - NotFound (Switch) ReactJS - NotFound (Switch)react-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 요청하는 페이지가 존재하지 않을 경우 보여질 페이지 Switch문은 차례대로 비교하여 최종적으로 찾는 페이지가 없을 경우 NotFound 페이지를 보여줌. ~cra-router/src/routes$ NotFound.jsimport React from 'react'; const NotFound = () => { return ( 존재하지 않는 페이지입니다. 404 );}; export default NotFound; ~cra-router/src/ App.jsimport React from .. 2018. 4. 11. React-router - (URLSearchParams(location.search).get('keyword') ReactJS - (URLSearchParams(location.search).get('keyword') react-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 렌더링된 검색 키워드를 파싱해서 출력해주기 ~cra-router/src/routes$ Search.jsimport React from 'react'; const Search = ({location}) => { return ( {new URLSearchParams(location.search).get('keyword')} 검색 );}; export default Search; ~cra-router/cra/components$ Hea.. 2018. 4. 11. React-router - Redirect ReactJS - Redirectreact-router v4 version4sorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 Redirect I - Simple~cra-router/src/routes$ Login.jsimport React from 'react'; const Login = () => { return ( 로그인 );}; export default Login; ~cra-router/src/routes$ MyPage.jsimport React from 'react';import { Redirect } from 'react-router-dom'; const logged = true; const MyPage = () .. 2018. 4. 11. React-router - NavLink ReactJS - NavLinksorce code는 이전 문서에서 재활용한다./...../ 는 생략되었다는 표시임파란 글씨는 추가된 것임빨간 글씨는 수정된 것임 각 루트 라우터의 상태에 따라 각각의 다른 스타일 주기 ~cra-router/src/components$Header.css/....../.item:active, .item.active { background: white; color: #5c7cfa;} ~cra-router/src/components$Header.cssimport React from 'react';import { NavLink } from 'react-router-dom';import './Header.css'; const Header = () => { return ( 홈 소개 포.. 2018. 4. 11. React-router - Add Route in route (double route) ReactJS - Add Route in route sorce code는 이전 문서서 재활용한다./...../ 는 생략되었다는 표시임 First of all, create component that is called Posts.js.먼저 Posts.js라는 컴포넌트를 생성한다.그리고 리스트를 작성하고 URL parameter를 이용해 Link를 걸어준다. ~cra-router/src/routes$ Posts.jsimport React from 'react';import { Route, Link } from 'react-router-dom'; const Post = (match) => { return ( {match.params.title} );}; const Posts = () => { return ( .. 2018. 4. 11. 이전 1 2 3 다음
