전체 글 (11) 썸네일형 리스트형 리액트 스토리북 만들기 보일러 플레이트 코드로 진행. 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. 패키지.. 배열 고차 함수 (고계함수) 고차 함수(Higher order function)는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체 이므로 값처럼 인자로 전달, 반환 가능 const makeCounter = (predicate) => { let num = 0; //클로저 num의 상태를 유지한다. return () => num = predicate(num); //predicate는 num의 상태를 변화시킨다. } const increase = (n) => ++n const decrease = (n) => --n //makeCounter는 함수를 인수로 전달 받는다 그리고 클로저를 반환한다 const i.. [19-06-12] ES6 1. 삼항조건 연산자 (The Ternary Operator) let x = 20; const y = x > 10 ? "yes" : "no"; // "yes" 2. 간략계산법 (Short-circuit Evaluation) if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; } const variable2 = variable1 || 'new'; 경험 많은 개발자들은 그래서 비용이 높은 코드는 가능한 한 나중에 평가되도록 작성한다. OR연산자를 사용할 땐 true를 리턴할 가능성이 높은 코드를 첫 번째 조건으로 작성하고 AND연산자에선 false를 첫번째로. 인용: http://m.. Google Analytics Dimension ?, Metric ? Dimension (측정 기준) 웹사이트 방문자들의 특성(속성) 예를 들어, 방문자는 12시 20분에 한국에서 네이버를 통해 “Google Analytics”를 검색해서 방문했습니다. 그 사람은 스마트폰의 크롬 브라우저를 통해 방문했다고 가정하겠습니다. 그렇다면 방문자의 속성은 무엇인가요? 시간: 12시 20분 국가: 한국 소스/매체: 네이버/Organic 키워드: Google Analytics 기기 카테고리: 모바일 브라우저: Chrome 이 정보들이 GA의 Dimension으로 사용됨. Metric (측정 항목) Dimension을 측정하는 "숫자" 예를 들어, 우리 홈페이지에 방문한 고객의 국가별 방문수 분석하고 싶습니다. GA는 고객들의 방문 국가를 모두 수집하고 있습니다. 하지만, 방문한 국가를.. 이전 1 2 다음
