회사에서 사내 UI-library를 제작하기 하여 해당 프로젝트의 초기 세팅을 진행했다.
개인적으로는 프로젝트의 맨 바닥부터 세팅한 경험이 거의 없었기 때문에, 주로 CRA를 통한 프로젝트 세팅을 이용해왔다. 이번 경험이 좋은 공부가 되었다. 특히 webpack 설정에 있어서 많은 부분을 배울 수 있었다.
따라서 이번 프로젝트 세팅 과정을 상세하게 기록해 보기로 했는데, 내가 다른 블로그 글을 통해 많은 도움을 받았듯 이 글도 누군가에게 도움이 되었으면 좋겠다!
일단 시작에 앞서 전하고 싶은 말은, 라이브러리나 필요한 도구들을 설치하는 과정에서 중간중간 문제가 없는지, 충돌없이 잘 설치가 되었는지, 빌드가 잘 되는지 반드시 확인하면서 작업하도록 하자 제발^^
(사실 맨 처음 세팅할 때, 다른 블로그의 글들을 참고하면서 차근차근 라이브러리들을 설치하고 중간에 제대로 빌드가 잘 되는지 확인안함^^ 모두 설치 한 뒤 마지막에 확인해보는 무지성 세팅을 시전했다. 결과는 폭망이였는데 도대체 어디서 문제가 생겨서 빌드가 제대로 안되는지 확인이 어려웠다.)
📌 사용한 기술 스택
- React
- TypeScript
- webpack
- babel
- Storybook
- Styled-components
UI 라이브러리 초기세팅 과정
1. npm init
package.json이 생성된다.
2. webpack 설치 및 webpack.config.js 설정
npm i webpack webpack-cli 명령어를 통해 webpack을 설치한다.
이후 root 디렉토리에 webpack.config.js 파일을 만들고 다음과 같이 세팅한다.
// webpack.config.js
webpack: {
}3. babel 설치 및 .babelrc 설정
npm i @babel/core @babel/preset-react @babel/preset-env
- @babel/core : 바벨의 코어
- @babel/preset-react : react jsx를 트랜스 파일링 해준다.
- @babel/preset-env: ES6 코드를 ES5로 변환 시켜준다.
npm i babel-loader
webpack에 적용할 babel-loader를 설치해준다.
.babelrc 파일을 생성하고 다음과 같이 설정한다.
4. React 설치
npm i react react-dom
5. TypeScript 설치
