프로그래밍 공부 노트

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. 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 라이브러리를 이용했다. 아래

프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 import 경로를 작성하는것이 어려워진다.  상대경로를 사용하여 특정 파일을 import 하게되면 아래와 같이 작성해야 한다. ex)  ../../../components/header/index.tsx 이러한 문제점을 절대경로를 사용하여 해결할 수 있다. 하지만 절대경로에도 문제가있는데 운영체제별로 절대경로가 (root 경로가)달라서 협업시 문제가 있을 수 있다. 윈도우면 C:\\Windows\System32\... 이런식이고 맥이면 /User/lsw/... 이런식이다. 하지만 위와 같은 방식으로 root부터 절대경로를 사용하지 않고 @ 키워드 즉 alias(별칭)를 사용해서 운영체제의 root 부터가 아닌 특정 폴더에 바로 접근할 수 있는 방법을 알아볼 것이다. CRA(create-react-app) + Typescript에서 절대경로 설정 일단 절대경로를 사용하려면 tsconfig.json과 webpack 설정을 변경해야 한다. 하지만 CRA로 생성한 프로젝트는 기본적으로 webpack이 설정되어있어서  eject를 해서 webpack 설정을 직접 변경해줘야 하는데 권장되는 방법은 아니다. (버전 업데이트 등의 문제 발생) 그래서 CRA를 eject 하지않으면서도 webpack 설정을 바꾸어 줄 수 있는 라이브러리가 있다. 바로 Craco 1. Craco 설치 craco를 사용하면 CRA를 eject 하지 않아도 CRA에 설정되어있는 eslint, webpack, babel 등을 쉽게 커스터마이징할 수 있다. 두가지 라이브러리를 설치해야 한다. npm i @craco/craco npm i -D craco-alias 두 라이브러리를 설치하고 root 디렉토리에 craco.config.js 를 생성한다. craco.config.js const CracoAlias = require ( ' craco-alias ' ) ; module.exports = { plugins :