반응형 웹개발/개발환경 설정5 storybook에서 public 폴더에 있는 에셋을 사용하고 싶을 때 😥 문제상황 storybook으로 컴포넌트를 테스트하는 과정에서 public 폴더에 있는 파일들을 절대경로로 불러왔더니 제대로 렌더링되지 않는 것을 볼 수 있었다. 🔨 해결책 package.json 파일에서 scripts 부분을 수정해주면 된다. // package.json { "scripts": { "start-storybook": "start-storybook -s ./public -p 9001" } } 이렇게 코드를 수정해주면 storybook에서도 static 파일을 가져올 수 있다. 2021. 8. 8. storybook에서 svgr 웹팩 설정이 동작하지 않을 때 😥 문제상황 storybook은 file-loader가 기본 설정으로 되어 있어서 @svgr/webpack을 설정하고 싶은 경우에는 main.js에서 unshift를 사용해 웹팩 설정을 해주어야 한다. config.module.rules.unshift({ test: /\.svg$/, use: ["@svgr/webpack"], }); next.js에서 storybook을 설치하고 @svgr/webpack을 설정해줄 때는 잘 동작했었는데, cra에서 storybook을 설치하고 @svgr/webpack을 설정하려니 동작하지 않았다. 🔨 해결책 @svgr/webpack 대신에 babel-plugin-inline-react-svg을 사용하였다. 이 경우에는 main.js에서 설정하는 방식이 웹팩과 달라진다. /.. 2021. 8. 5. next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측했다. 카톡으로 웹 사이트 링크를 전달하는 경우 카톡에서 자체적으로 메타태그들을 인식해서 사이트 이름, 썸네일 등을 띄워준다. 그런데 spa 특성상 공유 링크를 전달하게 되면, 디렉토리에 해당하는 메타태그들 값이 뜨는 것이 아니라 모든 페이지가 동일한 값이 뜬다는 불편함이 있었다. 그래서 이 문제를 해결하기 위해 웹 사이트를 next.js로 바꾸기로 결정했다. 앞으로 추가하게 될 기능들이나, SEO를 위해서도 next.js로 바꾸는 것이 맞는 선택이라고 생각했다. 이왕 옮기는 김에 typescript로 전환하.. 2021. 7. 25. 웹팩 설정하기 - 플러그인 앞의 게시물에 이어 이번에는 웹팩에서 플러그인을 설정하는 방법에 대해 정리해보았다. 🔌 플러그인 로더가 여러 형식의 파일들을 모듈로 인식할 수 있게 해주면 이 과정에서 플러그인은 코드 사이의 공백이나 변수명을 바꿔서 파일의 용량을 줄이는 역할같은 것을 해준다. 플러그인을 적용시키는 방법은 webpack.config.js 파일에서 다음과 같은 코드를 추가하면 된다. 이러한 코드를 추가하면 MyPlugin을 추가해주게 된다. const MyPlugin = require('./MyPlugin'); module.exports = { ..., plugins: [ new MyPlugin(), ] } 1. Banner Plugin 코드가 빌드되어 난독화가 진행된 경우 사람들이 코드를 알아볼 수 없다. 따라서 코드 상.. 2021. 5. 7. 웹팩 설정하기 크롬 익스텐션을 개발할 때 boliler plate를 사용하여 개발했었다. 그러다 보니 개발환경에 변경하고 싶은 부분이 있을 때 웹팩을 수정해야하는 경우가 발생했다. 하지만 웹팩에 대해 아는 것이 없어서 설정을 건드릴 수가 없었다. 그래서 웹팩과 그 외의 개발환경을 셋팅하는 방법에 대해서 정리하고, 실제 적용까지 해볼 예정이다! jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html 프론트엔드 개발환경의 이해: 웹팩(기본) 1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명.. 2021. 5. 6. 이전 1 다음 반응형
