Age of Discovery

직전 포스팅에 이어서.. 이미 만들어진 CRA프로젝트의 세팅을 입맛에 맞게 변경할 일이 생겼다. 최근에 익숙하게 사용하고 있는 emotion.js의 css prop이랑 다른 모듈을 import 해올 때 누가봐도 간편해보이는 이렇게 생긴 절대경로를 세팅하고자 마음먹었고 반나절 이상을 소요했다. 뿌듯해서 글을 남겨보고자 한다. 우선 이 세팅을 하는데 craco가 필요하다. craco란? Create-React-App Configuration Override 의 약어이다. CRA는 기본적으로 웹팩이나 script 설정을 숨겨놓기 때문에 npm run eject 명령어로 추출해서 config를 변경해야하지만 한번 변경할 경우 이전상태로 돌아갈 수 없다. Craco는 이러한 단점을 커버하기 위해 탄생한 커스터마이..

사용자가 쉽게 커스텀하고 이용이 가능한 input 라이브러리를 만들어보려고 한다. input하나만드는데 보일러 플레이트가 많은 CRA는 설치하기 싫었고 CRA없이 초기세팅을 웹팩으로 빌드했다. css는 emotionJS를 사용하기로 결정했다 css in js를 구현할 때 jsx문법 내에서 style={{}}로 하는것 보단 css={{}}로 작성하는게 더 익숙했기 때문이다. (현재 진행중인 링크게더 프로젝트에서 쓰고 있다.) 딱히 성능상의 유의미한 차이는 없다ㅋㅋ... 웹팩세팅 관련 글은 다음에 다뤄보도록 하겠다. (길어질거 같음..) npm i -D @emotion/react @emotion/styled emotion 패키지를 설치해주고 typescript를 사용하는 경우 tsconfig.json의 컴파..