JavaScript 썸네일형 리스트형 Rollup.js로 프로젝트 셋팅 Rollup.js를 사용하는 이유 webpack은 ES Module로 Bundle할 수 없다. webpack은 일반적으로 commonjs 형태로 번들링을 하게되는데, commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않는다. webpack은 애플리케이션 제작시 주로 사용하고, rollup은 라이브러리 제작시 사용한다. Setting 1. rollup 사용에 필요한 package 설치 "devDependencies": { "@rollup/plugin-alias": "^3.1.1", "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.1", "@svgr/rollu.. 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점대로 설치해야.. 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.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
