GPTea☕️ API 요청, TypeScript 도입

1️⃣ API 요청하기

백엔드로부터 API문서를 받았다. chats, messages, scrapbooks, scraps를 GET으로 받아오는 것이다. 다른 요청들은 작업중이라고 한다. 

fetch를 사용해서 요청을 하는데 CORS에러가 나왔다. 이제 CORS가 무엇인지 안다! 그런데 어떻게 해결하지..? 
CORS에러는 출처가 다른 곳에서 자원을 공유할 때, 필요한 설정이 되어있지 않아서 생기는 문제이다. 백엔드 서버는 구축이 되었고, 사용할 홈페이지 주소와 홈페이지 테스트용 주소만 허용을 해놓았다고 한다. 나는 지금 localhost에서 작업중이므로 임시로 proxy를 쓰기로 했다. 

리액트에서 제공하는 간단한 방법이 있어 다음 포스팅과 같이 해결하였다.

React CORS에러 해결

 

2️⃣ TypeScript로 마이그레이션(?)하기

지금까지 라우팅과 간단한 스타일링만 구현해서 진행한 것이 많지 않지만 JavaScript에서 TypeScript로 옮기는 작업을 했다. TypeScript를 조금 더 연습하고 싶고, 동시에 JavaScript공부도 될 것 같아 결정했다.
이미 CRA로 리액트앱을 만든 다음 바꾸는 것이라서 설정해주어야 할 것이 많았다.

1. 우선 CRA홈페이지에서 안내하는 바와 같이 다음을 설치한다.

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

2. 만들어놓은 파일들의 확장자를 바꿔준다. .jsx -> .tsx

3. tsconfig.json이 자동으로 생성되지 않으니 루트디렉토리에 만들고 다음을 작성해준다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

4. 기존에 사용하던 라이브러리들이 있으면 타입스크립트용으로 추가 설치해준다. 보통 @types/ 가 붙는다.

npm install @types/react-router-dom
npm install @types/styled-components

5. 나는 이 과정에서 ERESOLVE 에러가 떴다. 다음과 같이 에러가 뜨는데, typescript의 버전을 낮춰주면서 해결했다. 

CRA가 TypeScript앱을 만들 때는 무슨 버전으로 설치하는지 알아보기 위해 다른 폴더에 앱을 생성해보았다.

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

package.json을 확인해보니 4.9.5버전으로 설치가 된다. 현재 프로젝트는 5.0.4버전으로 설치가 되어 버전이 너무 높아서 라이브러리들과 호환이 안되는 것이다. TypeScript를 4.9.5 버전으로 낮춰줌으로써 에러가 사라졌다.

6. 이제 npm run start를 입력하면 앱이 실행은 되지만 코드에 문법오류가 있다. 기존의 코드에서 TypeScript문법대로 타입을 추가해주어야 한다. interface 등을 설정해주면 완료~

 

예전에 타입스크립트로 옮기는 중에 발생한 에러를 해결한 포스팅을 해놓았는데 참고가 됐다.

Module not found Error 해결방법

 

 

🙌 프로젝트 github 링크 🙌

GitHub - evergarden0412/gptea-web