Final Project - (4) 2020_0201

제목에 날짜를 고치다가 보니까 어느새 2020년 1월이 가고 2월이 되었다. 프로젝트 하다가 보면 시간이 어떻게 가는지 모르겠다.

 

오늘은 어제 react native expo 설정에 이어서 typescript를 설정하려고 한다. 

 

expo cli로 expo init을 통해 타입스크립트 기본 설정이 되어있는 프로젝트를 만들수 있다. 하지만 그건 정말 기본적인 셋팅만 되어 있는 것이고 실제 프로젝트에서 사용할 수 있도록 추가적인 설정이 필요하다고 생각했다. 

 

사실 타입스크립트에 대한 지식이 전무해서 어떻게 하면 리액트 네이티브 프로젝트에 타입스크립트를 적용할 수 있는지 구글링을 통해서 많이 알아보았다. 

 

먼저 expo init에서 blank(typescript) 옵션을 통하여 타입스크립트 기본 설정이 되어있는 테스트 프로젝트를 만들었다.

 

프로젝트를 살펴보니 tsconfig.json이라는 파일에 기본적인 타입스크립트 컴파일 옵션이 되어있었는데 이 부분 설정을 우리 프로젝트에 맞게 설정해줘야 할 것 같았다. 그래서 우선 tsconfig 옵션이 어떠한 것이 있는지 찾아보았다. 

 

https://www.typescriptlang.org/v2/en/tsconfig#rootDir

title

https://docs.expo.io/versions/latest/react-native/typescript/

Using TypeScript with React Native - Expo Documentation

https://vomvoru.github.io/blog/tsconfig-compiler-options-kr/

tsconfig 컴파일 옵션 정리

https://typescript-kr.github.io/pages/Compiler%20Options.html

TypeScript 한글 문서

우선 위 레퍼런스들을 보면서 컴파일 옵션이 무엇이 있고 어떠한 옵션인지 보면서 공부하였다. 공식문서나 한글로된 레퍼런스를 보면서도 이러한 컴파일 옵션들이 실제 어떻게 작동하는지 감은 잘 오지 않았지만, 다른 expo-typescript example 프로젝트에서 어떠한 옵션들을 사용했고 왜 이러한 옵션을 사용했는지는 알 수 있었던 것 같다. 

 

https://github.com/teachme2/expo-typescript-app/blob/chat/tsconfig.json

https://github.com/janaagaard75/expo-and-typescript

https://medium.com/@francesco.agnoletto/how-to-set-up-typescript-with-react-native-4cede6f26203

https://trustyoo86.github.io/react/2019/01/06/reactnative-typescript-1.html

https://velog.io/@k7120792/Typescript%EC%99%80-Express%EB%A1%9C-%EC%9E%AC%EB%B0%8C%EB%8A%94-%EB%AC%B4%EC%96%B8%EA%B0%80%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%902

 

컴파일 옵션들에 공부한 후에 위의 프로젝트 컴파일 옵션 예제들을 보면서 우리 프로젝트에는 어떠한 옵션들을 적용해야하는지 생각해보았다.

 

특히 맨 위에 깃헙 레포를 보면서 많이 참고하였는데 타입스크립트를 처음 써보기 때문에 어떤식으로 타입스크립트 파일이 컴파일이되고, 타입스크립트로 개발을 어떻게 진행하는지에 대한 지식 아직 많이 부족하다. 그래서 ts 혹은 tsx 파일들이 어떻게 컴파일 되어서 js 파일로 변환이 되고 그것으로 expo를 실행하는지 알아보기 위하여 noEmit을 false로 해서 나온 js 파일을 가지고 expo가 실행되도록 만들었다. (outDir, rootDir 지정)

 

package.json 에서 스크립트가 어떻게 되어있는지도 참고를 많이 하였고, 디렉토리 구조도 참고하였다. 

 

스크립트에 tsc로 컴파일 후에 npm start가 되도록 하였고, tsc -w 기능도 사용할 수 있도록 스크립트를 만들었다.

 

그리고 대부분의 프로젝트 예제에서 사용하고 있는 옵션들이 무엇이 있는지 보고 그 옵션이 어떤 옵션인지 확인한 후에 우리 프로젝트에 필요하다고 판단 (사실 아직 잘 몰라서 맞는지는 모르겠음..ㅎ)되면 tsconfig 옵션에 넣었다.

 

처음에 expo가 어떻게 실행되는지, 그리고 expo에서 typescript 파일들이 어떻게 실행되는지도 감도 잘 안오고 거기에 추가적으로 타입스크립트 컴파일 설정도 붙여서 하려니까 정말 많이 헤매고 시간도 많이 썼던 것 같다. 그래도 얼추 프로젝트의 타입스크립트 셋팅은 한 것 같은데 팀원들과 리뷰 및 논의가 필요할 것 같다.

 

프로젝트가 본격적으로 시작되고 기능 구현을 위해 코드를 작성하면서 타입스크립트 에러를 체크하다보면 이 옵션들이 무엇인지 좀 더 자세히 그리고 어떻게 해야하는지 알게 될 것이라 생각한다.

 

다음은 eslint와 prettier 설정을 해볼 것이다.

설정을 하다 생각난게 dotenv도 설정을 해야할 것 같아서 이것도 같이 하려고 하고 있다.