Typescript 로 클립보드 관련 오픈소스를 만들어 중 다른 프로젝트에 적용하다 마주한 에러였다...
정말 처음보는 에러들은 항상 주구장창 나오는거같다 ㅎㅎ
1. 원인 찾기
처음 의심을 해본곳은 적용시킨 프로젝트의 셋팅이었다.
그렇게 구글링을 해서 찾아본 결과 vsc 세팅 문제라고 하여 시도해 보았다...
-
vsc 맨밑에 버전을 찾아보고
-
명령 팔레트를 열어서 ctrl + shift+ p (MAC = command + shift + p)
타입스크립트 버전 선택을 할수 있는곳으로가서
-
"작업 공간 버전 사용" 을 선택해보았다
과연... 첫번째 시도만에 해결될 일이 없었습니다...
그렇게 찾은 2번째 원인은 바로 babel설정 문제였습니다.
Typescript로 만든 오픈 소스 였기에 js로 빌드 후 배포를 했어야 했는데...
이런 초보적인 실수를 했더군요..
2. 원인 해결
오픈소스의 package.json을 보기로 하였다.
"main": "src/index.ts"이런식으로 오픈소스의 메인이 index.ts 로 잡혀있었다.
이렇게되면 오픈소스를 사용하는 사용자는 ts파일을 받게되어
ts 파싱? 에러를 마주하게 된다.
그러하여 나는 뭘해야하나 찾아보니
npm run build 에 이러한 코드를 추가하여 원인이 해결되었다.
"scripts": {
"build": "rm -rf dist && tsc",
}위의 코드를 해석해 보면
기존 dist폴더를 삭제 (없으면 생성) 하고 tsc로 코드 컴파일 및 빌드를 한다
빌드한 파일들은 dist 폴더에 저장
그렇게 되면 이렇게 index.ts 가아닌 index.js 파일이 생성이 되어있다.
안에 내용을 보면 Typescript언어가 js로 컴파일 되어있는것을 볼수 있다.
이 작업을 진행한후
"main": "src/index.ts" -> "main": "dist/index.js" 이런식으로 오픈소스의 메인을 바꾸면 다른 사용자들이 사용을 할때 에러가 뜨지 않는다.
3. 후기..
정말 언어만 안다고 해결되지 않는것들이 너무 많은거 같다..
컴파일, 빌드 환경 이런쪽을 더 공부해 봐야 겠다.
Reference
https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided
https://www.faqcode4u.com/faq/244570/build-cannot-use-jsx-unless-the-jsx-flag-is-provided
https://docs.microsoft.com/ko-kr/visualstudio/javascript/compile-typescript-code-npm?view=vs-2022
