React (5) 썸네일형 리스트형 리액트 스토리북 만들기 보일러 플레이트 코드로 진행. storybook cli가 아닌 수동으로 만들기 https://storybook.js.org/docs/guides/guide-react/ 스토리북은 컴포넌트 단위의 개발 환경을 지원하는 도구 스토리북은 사실 테스트 도구라기 보다는 UI 개발 환경에 가깝다. 스토리북의 가장 큰 목적은 "UI 컴포넌트를 애플리케이션 외부의 독립된 환경에서 개발할 수 있도록" 하는 것이다. 하지만 우리가 일반적으로 사용하는 테스트 도구가 "모듈 혹은 함수를 애플리케이션 외부의 독립된 환경에서 실행해서 결과를 검증할 수 있도록" 돕는다는 것을 생각해보면, 스토리북도 테스트 도구의 역할을 일부 수행하고 있다는 것을 알 수 있을 것이다. https://meetup.toast.com/posts/178 .. jest - enzyme 테스트 주도 개발 jest와 enzyme 기존에 보일러플레이트를 만들었던 코드에서 시작. CRA로 시작해도 무방합니다 npm i -D enzyme enzyme-adapter-react-16 설치 후 src 폴더에 setupTests.js 파일 생성 import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); 스냅샷 테스팅 렌더링된 결과가 이전에 렌더링한 결과와 일차하는지 확인하는 작업 enzyme에서 테스팅 하려면 enzyme-to-json 설치 npm i -D enzyme-to-json 그 다음 package.json폴더에 test 스크립트, je.. React Route Dom Guard 특정 페이지에 들어갈 때 로그인이 필요하거나 인증후 들어가야하는 페이지가 있다. 그런 페이지를 Hoc를 이용해 비 로그인 상태일 때, Redirect시켜주는 간단한 예제 codesandbox에서 간단히 실행 Dependency는 react-router-dom 설치 //index.js import React from "react"; import ReactDOM from "react-dom"; import { LandingPage, Home } from "./component/Landing.page"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import NotFoundPage from "./component/NotFoundPage".. React Router Dom 기초 라우팅이란? 네트워크상에서 주소를 이용, 목적지까지 경로를 체계적으로 결정하는 경로선택 과정 http://www.ktword.co.kr/word/abbr_view.php?m_temp1=539 연습은 https://codesandbox.io/ 에서 공부 기본적인 CRA로 시작 후 왼쪽 Explorer에서 Add Dependency react-router-dom 설치 componenet 폴더 생성 후, LandingPage.js파일 생성 // component/LandingPage.js import React from "react"; const LandingPage = () => Good; const Home = () => home; export { LandingPage, Home }; // index.js.. 리액트 보일러 플레이트 작성 Stack . React . React-Dom . React-Router-Dom . webpack . jest jest 전까지 npm i -D webpack webpack-cli @babel/core @babel/cli @babel/preset-env @babel/preset-react html-webpack-plugin clean-webpack-plugin webpack-merge webpack-dev-server @babel/plugin-proposal-class-properties css-loader mini-css-extract-plugin clean-webpack-plugin 1. 폴더 생성 mkdir boilerplate-project && cd boilerplate-project 2. 패키지.. 이전 1 다음
