Category: DevEnv

Rollup을 사용해서 npm 배포하기

시작하기제작중인 라이브러리를 npm에 배포하는 방법입니다.webpack 도구와는 조금 다른 rollup을 사용해서 번들링 하도록 하려고 합니다.webpack을 쓸 수도 있는데 rollup을 쓰는 이유는 webpack은 ES Module 형태로 번들을 할 수 없습니다.webpack을 사용 할 때에는 일반적으로 commonjs 형태로 번들링을 하게 됩니다com

webpack 이미지 설정

시작하기이전 포스트 웹팩설정에 이어서 프로젝트에서 이미지를 불러오려면 webpack에서 몇가지 설정을 해주도록 하겠습니다. 설치하기1npm install --save-dev file-loader file loader 패키지를 설치해줍니다. 설정하기webpack.config.js파일 모듈의 룰 부분에 file loader를 추가 해주도록 합니다. webpa

Storybook 설치 및 테마 설정하기

시작하기Storybook은 React, Vue 및 Angular와 독립적으로 UI 구성 요소를 개발하기위한 오픈 소스 도구입니다.뛰어난 UI를 체계적이고 효율적으로 구축 할 수 있습니다.공식 홈페이지에서 자세한 내용을 알 수 있습니다. 설치하기프로젝트 내부에서 1npx -p @storybook/cli sb init --type react storybook

Storybook을 Netlify로 정적 사이트 배포하기

시작하기서버와의 API통신없이 프론트엔드로만 구성된 정적 애플리케이션을 배포하는 용도로 최적화된 서비스입니다.netlify 홈페이지 사전작업 깃헙 저장소에 프로젝트가 있어야 합니다. 프로젝트에 스토리북이 있어야합니다. 설정하기사이트에 깃헙계정으로 로그인을 합니다. 스토리 보드 혹은 프로젝트를 빌드해줄 명령어와 명령어 입력후 만들어지는 static 폴더를

webpack typescript 적용하기

시작하기이전 포스트를 통해 Babel과 webpack 기본 설정을 했습니다.이번 포스트에서는 기본설정에서 typescript를 적용하겠습니다. 설치하기1npm install --save-dev @types/react @types/react-dom typescript ts-loader 타입스크립트 관련 패키지를 설치해줍니다. 1npx typescript -

Webpack4 그리고 babel7으로 React 개발환경 구축하기

시작하기Create-react-app을 이용해서 작업을 해오면서 eject를 하지 않는 이상 webpack과 babel의 설정을 해볼 기회는 많이 없습니다.하지만 webpack과 babel을 알고 개발환경을 구축하면서 이해를 돕도록 하겠습니다. 설치하기프로젝트 폴더를 만들어 주도록 합니다. 123mkdir ft-webpackcd ft-webpacknpm i