프로그래밍 공부 노트

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. Type '{ children: string; css: { color: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322) 찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다. /** @jsx jsx */ 위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다. /** @jsxImportSource @emotion/react */ 그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다. 번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다. 그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다. hotpink 색을 적용했지만 검정색으로 표시되었다. 해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다. eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다. 아래