[2019.07.14] 오늘의 TIL - webpack.config.js의 build 설정 시 주의사항

현재 진행 중인 프로젝트에 TypeScript React Redux를 신나게 쓰고는 있고.., 컴포넌트 라이브러리를 어떤 것을 쓸까 고민을 많이 해보았다.

4주 프로젝트 때 사용했던 ant Design이 정말 괜찮긴 했었다. 설명과 예시코드가 사용하기 쉽게 잘 되어있고, 무엇보다 디자인이 엄청 깔끔하고 사용성에 대해 직관적이다. 

 

 

그래도 한번 써 본 라이브러리여서, 이번에는 다른 것을 써 볼까 고민을 많이 했었다.

Material-UI, BootStrap, React Tool Box 등.. 리액트 관련 CSS 라이브러리가 엄청 많아 전부 사용해 보고 싶다..

그러나 이번 프로젝트의 기술 핵심은 TypeScript + React + Redux! 괜히 다른 것에 시간 투자하지 않고 해당 스택에 집중하기로 했다.

정말..다른 것도 사용해 보고 싶은 욕심이 엄청 났지만, 우선 익숙한 Ant Design으로 가는 것으로 결심!

 

 

그러나 Ant Design을 적용시키자마자 문제가 생겼으니... 

 

# package.json 

(create react app 아니고, 보일레플레이트 직접 세팅)

npm start를 하면 webpack dev모드로 번들링 후 자동 실행을 시키도록 해놨다.

그러나 작업 후 'npm start'로 빌드를 하면 아래와 같은 에러메시지가 나타났다..

모듈 안에 있는 antd.css가 계속 에러가 나는 것이다..😭

저렇게 뜨니까 처음에는 모듈에 문제가 있는 줄 알고 다시 지웠다가 삭제하고, 이전 4주 'ModuTable' 때 적용한 방식과 비교해보려고 프로젝트 새로 켜보고..

에러 메세지도 구글링 해보니 나오지 않아 엄청난 스트레스와 삽질을 하던 중, 갑자기 머릿 속에 스치는 생각이 있었으니..

 

# 정신이 엄청나게 짜릿하도록 머릿 속에 스친 생각

• TSlint 적용으로 코드 확인을 하는 상태에서 오류가 안나는 것은, 코드에 이상은 없다는 것이다.
• 그런데 npm start를 돌리면 css파일에서 문제가 난다.. 그런데 css파일에서 문제가 난다 하더라도, 일반적으로는 css적용이 안되는 것이지, 실행이 안되지는 않는다.
• 그러면 npm start로 실행시킬 때 build 중에 문제가 일어나는 것, 즉 webpack과 관련이 있을 수도 있다.
• 내 기억 상으로는 webpack.config.js 파일에 번들링 관련 로더와 대상 파일 확장자를 쓰는 부분이 있었던 것으로 기억한다.
• webpack.config.js 파일을 확인해본다.
• # webpack.config.js

• 역시...module의 rules에 test쪽에 tsx 확장자 파일만을 작성했다...왠지 저 부분에 css파일을 적용시키지 않아, ant라이브러리의 css파일이 번들링 되지 않아서 일어난 오류같다..
• 구글링으로 css webpack 번들링 방식을 찾아보고 아래와 같이 적용해본다.

# webpack.config.js

번들링 rules의 test 확장자와 css전용 로더 모듈을 설치하고 설정에 추가시켰다. 

그리고 실행하니 잘 해결되었다...

문제를 해결하고 온 몸에 소름이 돋았다.... 스스로 원인을 추측하고 구글링 없이 문제를 해결하다니...

 

이번 webpack과 유사한 문제가 일어나면 다음엔 바로 해결할 수 있을 것 같다.