[TS] React로 진행한 프로젝트를 중간에 Typescript로 변경하기 2

React로 진행한 프로젝트를 중간에 Typescript로 변경하기 1

지난번에 변경하는 방법을 공부를 했는데 직업 바꾸려니 추가로 해줘야 하는 부분이 더 있어서 추가로 기록해 둔다.

 

기존에 vite로 환경을 구축하고 React로 진행했던 프로젝트(VITE와 Firestore를 사용했다.)를 Typescript로 업그레이드했다. 다른 타입스크립트 프로젝트를 참고하며 해결했다. 타입스크립트를 설치하고 파일 확장자를 바꾸자마자 뜨는 지독한 빨간 줄 해결하기~ 😀🤜

 

 

가장 상위 파일에 HTMLElement 붙여주기

// main.jsx

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
);

// main.tsx

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
);

 

 

tsconfig.json 만들어주기

Router.tsx부터해서 불만이 많다고 몸부림치는 파일들이 가득하다. 뭐가 문제인지도 모르겠는 와중에

'React' refers to a UMD global, but the current file is a module.

라면서 불만을 토한다. tsconfig.json를 만들어주면 조용해지는데 다른 프로젝트들을 보니 references의 path에 tsconfig.node.json가 있어서 tsconfig.node.json도 만들어줬다.

 

+ tsconfig.node.json에 input이 없다고 빨간 줄이 생길 때

No inputs were found in config file '내 파일 디렉터리'.... include는 ["src"] exclude는 []다. ...

이런 에러가 뜬다면 일단 에디터를 껐다 켜본다. 나는 껐다 켰더니 해결됐다.

참고

 

 

index.html에 가서 파일 이름 변경해 주기

<!--기존-->
<script type="module" src="/src/main.jsx"></script>

<!--변경-->
<script type="module" src="/src/main.tsx"></script>

 

 

package.json에 빌드 명령어 추가하기

// 기존
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

// 수정
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

 

 

.env 파일 사용하기 위해 tsconfig에 옵션 추가하기

vite는 환경변수에 import.meta.env.VITE_변수명으로 접근한다. firebase에 필요한 key들 때문에 env를 사용했는데 빨간 줄이 떴다. tsconfig.json에 types를 추가해 주면 된다.

// 기존
{
  "compilerOptions": {
    ...
    "module": "ESNext",
    ...
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

// 추가
{
  "compilerOptions": {
    ...
    "module": "ESNext",
    "types": ["vite/client"],
    ...
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

 

 

firebase에서 사용하는 메서드 에러 해결하기

1. doc에 뜨는 에러 해결하기

마지막 인자인 params는 파라미터값을 받아오므로 undefined이 될 수 있다. doc의 세 번째 파라미터는 string만 들어올 수 있어 허용될 수 없었다. undefined일 경우를 대비해 문자열을 넣어줬다.

// 기존
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const docRef = doc(db, 'rolling-paper', params);

// 변경
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const docRef = doc(db, 'rolling-paper', !!params ? params : '홍길동');

 

2. await getDoc(docRef)에 뜨는 에러 해결하기

기존에는 콘솔에 찍어보면서 경로를 타고 타고 가서 데이터를 꺼냈다. 전에 왜 이렇게 복잡하게 해 뒀을까 생각했던 기억이 나는데 내가 접근을 잘못했던 거였다. _가 들어간 속성은 직접 접근해서 사용하라고 있는 건 아닌 것 같고 프로토타입에 있는 메서드를 이용해서 데이터에 접근하는 게 옳은 방법 같다...🥲

// 기존
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const docRef = doc(db, 'rolling-paper', params);
const letters = await getDoc(docRef);
if (letters._document.data.value.mapValue.fields !== undefined) {
    let dataList = Object.entries(
      letters._document.data.value.mapValue.fields
    );
    dataList = dataList.map((message) => {
      return message.map((el, i) => {
        return i === 1 ? el.stringValue : el;
      });
    });
    setList(dataList);
} else {
    setList([]);
}

 

타입스크립트에서는 사용할 수 있는 메서드나 접근할 수 있는 속성이 정해져 있는데 그중에 _document는 존재하지 않아서 에러가 뜬 것이었다. exists()라는 메서드로 데이터가 있는지 여부를 확인한 다음 data() 메서드로 데이터를 가져오면 객체로 데이터들이 얌전하게 들어있었다. (왜 타고 타고 들어갔던 것인가....😭) entries()로 데이터를 꺼내와 state를 변경해 주었다. 자꾸 any가 들어온다고 해서 이 부분은 어쩔 수 없었다....

해결을 못하다가 letters.을 치고 고민하고 있었는데 자동 완성이 떠서😳!!! 하며 해결할 수 있었다. 타입스크립트의 자동 완성 기능을 적극 사용해 본 기회였다.

// 수정
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const docRef = doc(db, 'rolling-paper', !!params ? params : '홍길동');
const letters = await getDoc(docRef);
if (letters.exists()) {
    let dataList: [string, any][] = Object.entries(letters.data());
    setList(dataList);
} else {
    setList([]);
}