문제 상황

나는 오랜만에 creat react app 으로 프로젝트를 시작해보려고

npx create-react-app my-app --template typescript

으로 시도했고

npx start

한 순간 대량의 오류가 우다다다 발생했다 ..

이렇게 한 10개쯤 오류가 있었던가 ..ㅎ
일단 그냥 프로젝트 시작만 하려고 한 것 뿐인데 오류가 너무 많이 발생해서
하나하나 해결해보자 다짐하고 하나씩 해결해나갔다..

해결 과정

web-vital 오류

web-vital 부분과 testing 라이브러리 부분에서 오류가 많이 발생했고 수정하려 애썼지만..
이쪽 부분을 수정해서 에러를 해결하면 다른쪽에서 터지고..
만만치 않게 엉망이 되어가는 것 같아

최후의 방법으로 두 파일을 제거해서 문제를 해결했다..
뭐 당연히 좋은 방법은 아니지만,
나는 급하게 프로젝트를 시작하는 게 우선이었으므로
일단 당장 필요하지 않은 파일을 제거해서 에러를 해결했다

import 오류

import로 App 컴포넌트를 불러왔을 때도
App이 아닌 App.tsx로 불러와야한다고 오류가 떴다..
아니 이게 무슨..

내가 모르는 사이에 이렇게 업데이트가 된건가..? 하면서
일단 하나씩 수정해가면서도 현타가 왔다.. 이게 맞나 ;_;

그래서 tsconfig파일을 수정해서 tsx도 허용한다고 해줘야하는건가
이건 뭔가 세팅이 잘못된거다 싶어서 해당 파일을 찾아봤는데

...

tsconfig 파일이 없는것이다..

tsconfig 파일 없음

그래서 나도 황급히 프로젝트를 삭제하고
구글링해서 찾은 creat react app 과정을 살펴보며 하나씩 다시 해가기 시작했다.

사람들은 그렇게 프로젝트를 생성하면 짠! 하고 tsconfig 파일이 생성되던데
왜 난 ... 아무리 프로젝트를 다시 만들어도 tsconfig 파일이 없냐고요 ..!!!!

그래서 이렇게 된 이상 tsconfig 파일을 임시로 내가 생성하자..
해서 파일을 생성했다.

그랬더니 import 오류는 없어졌다.

하얀화면이 뜨는데요?

그렇게 오류를 게임 퀘스트 깨듯이 하나씩 다 깨가면서 해결해나갔다.
그리고는 이제 다 됐나.. 싶은 마음으로 다시 npx start 입력! 엔터!

그냥 냅다 하얀화면만 떴다..
내가 원하는 아름다운 react app 시작 화면이 뜨지 않고
그냥 하얀 화면 .........

아.. 내가 또 모르는 사이에 업데이트가 되었나? ^^..
그럴리 없었다.

에러를 쫓아내면 에러가 또 찾아오고..~

그래서 개발자 도구켜서 콘솔 에러를 살펴봤는데
이번엔 콘솔에러가 저기서부터 저 끝까지 나열되어 있었다 ^^..

아 이건 뭔가 잘못되도 단단히 잘못되었다 생각했다.

해결

그래서 단순 나만의 오류는 아니겠구나 생각하고
구글링을 열심히 한 결과,
리액트 최신 버전에서 종속성 문제로 인해 충돌이 종종 발생한다고 적혀있는 것을 보았다..

참고: https://github.com/facebook/react/issues/32016

예.. 제 세상의 억까를 해결해주신 글 작성자분.. 사랑합니다..

어쨌든 그래서 난 npx를 황급히 버리고 yarn으로 다시 프로젝트를 생성하고 시작했다.

yarn create react-app my-app --template typescript

으로 생성하고

yarn add

로 시작했더니 아주 예쁜 tsconfig 파일이 들어있었으며 ^^
정상적으로 동작됐다.

그럼 npx와 yarn의 차이가 뭐길래?

• npx는 Node.js에 내장된 명령어로, 필요할 때 마다 패키지를 실행할 수 있게 해준다.

• yarn은 패키지 관리자로, creat-react-app을 설치한 후 이를 실행한다.

• npx는 그때그때 최신버전으로 실행되므로, 의존성 문제가 발생할 수 있다.

• yarn은 yarn.lock 파일을 생성해서 버전관리에 일관성을 제공하기 때문에, 프로젝트 생성 시 충돌이 발생할 가능성이 적다.

결론적으로, npx는 최신 버전을 매번 다운로드하여 실행하기 때문에 의존성 충돌이 발생할 가능성이 높고, yarn은 패키지 의존성 관리에 있어 안정성이 뛰어난 경우가 많다.

마치며

사실 개발자를하면서 버그와는 애증의 관계라고 생각한다.
버그가 발생하면 짜증나지만, 이 버그를 수정할 사람은 나뿐이라는 책임감을 가지고
버그를 하나씩 해결해나감으로써 또 쾌감을 느끼지 않는가..

그렇다보니 이 에러를 하나씩 해결해나가보자! 라는 마음을 먹고 해결해나갔는데
이번엔 이런 마음이 살짝 고집? 처럼 되어버린 것 같았다.

진작 이상함을 느끼고 구글링을 했거나,
npx 대신 yarn으로 해볼까? 라고 생각의 전환을 했어야했는데
문제 해결 에만 꽂혔다보니 이번만큼은 넓게 보지 못한 것 같아 그 부분에 반성을 했다.

시간이 촉박하다보니 더 그랬던 것 같다 !
다음번엔 더 잘하기를 !
오늘도 성장하며 마침!