JavaScript/React.js 썸네일형 리스트형 CRA + Craco + TypeScript # setting 1. CRA 설치 yarn create react-app my-app --template typescript 2. craco 설치 yarn add @craco/craco --save --dev 3. package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 craco를 통해 실행 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test --env=jsdom" } 4. 프로젝트 가장 최상단 위치에서 craco.config.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다. # Sass-loader 1. node-sass 설치 (4점대로 설치해야.. Express + React 배포 설정 express 1. http://localhost:3000/images/kitten.jpg 와 같이 로드 할 수 있도록 static 설정을 해준다. app.use(express.static(path.join(__dirname, 'public'))); 2. http://localhost:3000/detail/5f1fff21ecee792a58c8fe17 와 같이 / 이외의 url에서 접근해도 index.html을 바라보도록 설정한다. (라우팅 처리는 react에서 한다.) app.get('*', function (req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); react webpack 설정에 publicPath: '/'를 .. typescript 환경일 때 storybook 적용하기 기본 사용법 1. cli 설치 yarn add global @storybook/cli 2. storybook을 프로젝트 내에 설치 yarn getstorybook 3. storybook 실행 yarn storybook typescript 사용법 여기까지가 바닐라 js 일 때 storybook 셋팅이고 typescript는 추가적인 setting이 필요하다. 1. .stories/0-Welcome.stories.js 를 .stories/0-Welcome.stories.tsx로 변경한다. storybook을 다시 키면 에러가 바바밤!! 발생한다! 2. @storybook/addon-info 와 react-docgen-typescript-loader 와 babel-preset-react-app 설치 yarn .. BrowserRouter에서 path를 직접 접근할 때 발생하는 이슈 링크를 타고 접근하면 상관 없는데, path를 직접 검색해서 접근하면 아래와 같은 이슈가 발생한다. Cannot GET /dynamic webpackDeverServer 설정에 historyApiFallback: true를 설정해주면 path로 직접 접근해도 잘 노출된다. // webpack.config.dev.js .... devServer: { port: 3000, historyApiFallback: true } react에서 lottie 사용하기 1. react-lottie 설치 yarn add react-lottie --save --dev 2. 디자이너분께 lottie json 받기 3. 아래와 같이 작성 import React from 'react'; import Lottie from 'react-lottie'; import classNames from 'classnames/bind'; import { hot } from 'react-hot-loader/root'; import * as bear from '../../lottie/bear'; const style = require('./index.scss'); const cx = classNames.bind(style); const lottieOptions = { animationData: b.. 리액트 LifeCycle componentWillMount() { // v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용 console.log("componentWillMount"); } componentDidMount() { // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 console.log("componentDidMount"); } componentWillReceiveProps(nextProps) { // this.props 는 아직 바뀌지 않은 상태 console.log("componentWillReceiveProps"); } stati.. 리액트 16.3 Context API 파헤치기 출처 : https://velopert.com/3606 리액트 16.3 에 소개된 새로워진 Context API 파헤치기 | VELOPERT.LOG 3월말에 리액트 16.3 이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 (componentWillMount, componentWillUpdate, componentWillReceiveProps), 기존에 존재하던 Context API 가 새로워졌는데요, 이번 튜토리얼에서는 새로워진 Context API 에 대해서, 한번 자세히 다뤄보도록 하겠습니다. 프로젝트에 사용된 코드는 GitHub Repo 에서 확인 할 수 있습니다. 시작하기 Contex velopert.com 3월말에 리액트 16.3이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 .. Reselect를 이용하여 React와 Redux 최적화하기 출처: http://guswnsxodlf.github.io/optimize-react-component-using-reselect Reselect를 이용하여 React와 Redux 최적화하기 React와 Redux를 같이 사용하면 서로의 관심사를 분리할 수 있는 좋은 조합이 된다. 하지만 어플리케이션이 복잡해질수록 설계를 제대로 해주지 않으면 성능은 떨어지기 마련이다. React에서 가장 시간이 오래 걸리는 작업 중 하나는 바로 렌더링 싸이클이다. 컴포넌트의 State... guswnsxodlf.github.io Reselect를 이용하여 Reactdhk Redux 최적화하기 React와 Redux를 같이 사용하면 서로의 관심사를 분리할 수 있는 좋은 조합이 된다. 하지만 어플리케이션이 복잡해질수록 설계.. 이전 1 2 3 다음
