개인 프로젝트 1.

리액트와 타입스크립트를 이용해 만들 예정이기 때문에, 먼저 타입스크립트를 깔아야 한다.

npm install typescript --save-dev
yarn add typescript --dev

둘 중 하나를 사용해서 깔아주면 된다. 그리고 타입스크립트를 사용하는 리액트 프로젝트를 만들면 된다.

npx create-react-app 프로젝트이름 --template=typescript
yarn create react-app 프로젝트이름 --template typescript

그런데 문제가 있었다. 타입스크립트를 써야 한다는 걸 중간에 떠올리고, 그냥 리액트 프로젝트를 만들어버린 거다.

 

이미 있는 리액트 프로젝트에 타입스크립트를 추가하려면 리액트 프로젝트에 이렇게 추가해준다.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
yarn add typescript @types/node @types/react @types/react-dom @types/jest

이제 정말 됐겠지? 하고 봤는데 이미 작성한 코드들에 수많은 오류가 떠 있었다.

타입을 지정하지 않은 코드는 타입을 지정해주면 사라졌는데, 문제는 이거였다.

 

'--jsx 플래그가 사용되지 않았습니다.'

 

이게 왜 설정되지 않았다는 거지? 하면서 검색을 해보니... 아주 간단했다. tsconfing.json에 jsx설정을 안 해둔 거였다... compilerOption 안에 다음을 추가해주면 된다.

"jsx": "react-jsx"

그런데 또 오류가 있었다.

이 정도면 그냥 리액트 프로젝트를 지우고 새로 만드는 게 빨랐을 것 같다.

 

바로 이미지 import가 안 되는 현상이었는데, 해당 형식 선언을 찾을 수 없다고 나왔다.

이건 여러 방법이 있는 것 같았는데, 어느 한 블로그에서 해결 방법을 찾았다.

 

우선 src 폴더에 custom.d.ts라는 파일을 만든다. 그리고 그 안에 다음과 같이 입력한다.

declare module "*.jpg";
declare module "*.png";
declare module "*.jpeg";
declare module "*.gif";

이러면 이제 오류가 없어진다.

 

그리고 마지막 오류.

index.tsx에 발생한 오류였다.

 

'HTMLElement | null' 형식의 인수는 'Element | DocumentFragment' 형식의 매개 변수에 할당될 수 없습니다.'

 

보아하니, 들어간 인수가 null이 될 수도 있으니 들어갈 수 없다고 하는 것 같다.

이를 해결하는 방법을 두 개 찾았는데...

 

1. as HTMLElement 사용.

2. ! 사용.

 

1번은 무조건 이 인수를 HTMLElement라고 설정하는 방법이고, 2번은 값이 무조건 할당되어 있다고 말해주는 방법이다.

어느 걸 사용해도 똑같으니, 좀 더 짧은 !를 써서 해결했다.

 

 

 

 

타입스크립트를 좀 더 써봐야겠다. 잘 될 지는 모르겠지만... 열심히 하는 수밖에.