분류 전체보기 썸네일형 리스트형 Next.js에서 node_modules를 정상적으로 못 불러올 경우 nextjs.org/docs/advanced-features/dynamic-import Advanced Features: Dynamic Import | Next.js Dynamically import JavaScript modules and React Components and split your code into manageable chunks. nextjs.org dynamic import로 불러오면 정상적으로 불러와진다. IE Object doesn't support property or method 'assign' @babel/pollyfill이 deprecated 된다고 하여서 webpack.config.js > entry > @babel/pollyfill을 제거하고 core-js로 전환하였다. https://babeljs.io/docs/en/babel-polyfill#docsNav Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 1. core-js 설치 npm install core-js@3 --save 2. .babelrc 수정 { "presets": [ [ "@babel/preset-env", { "modules": false, "targets": { "browser.. 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 } [webpack] file-loader 와 url-loader 가 작동 안하는 이슈 해결 방법 1. css-loader option 설정이 url: false 인 경우 url: true 로 변경한다. 배포일 경우 url : true, webpack-dev-server 일 경우 url: false { test: /\.(css)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { url: true } }, ], }, 2. file-loader 가 1점 대 이상일 경우 1점대로 사용한다. "file-loader": "^1.0.2", 3. .css 와 .scss 파일에서 절대 경로가 아닌 상대 경로를 사용한다. background: url(../../../../assets/img/img-chevent.png)0 0 repeat.. 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.. mongoDB Atlas 호스팅하는 법 https://www.a-mean-blog.com/ko/blog/%EB%8B%A8%ED%8E%B8%EA%B0%95%EC%A2%8C/_/mongoDB-Atlas-%EA%B0%80%EC%9E%85-%EB%B0%A9%EB%B2%95-%EB%AC%B4%EB%A3%8C-mongo-DB-%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%EC%84%9C%EB%B9%84%EC%8A%A4 단편강좌: mongoDB Atlas 가입 방법(무료 mongo DB 클라우드 서비스) - A MEAN Blog https://mongodb.com 에서 온라인 Mongo DB를 생성해 봅시다. 계정당 0.5GB의 DB를 무료로 제공합니다. 생성된 DB는 connection string을 사용해 각종 프로젝트에 사용할 .. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음
