React Native 와 Typescript 절대경로 설정하는 방법에 대한 글입니다.
상대 경로와 절대 경로를 간단한 설명
상대 경로 : 현재 위치 중요
절대 경로 : 현재 위치에 영향을 받지 않음
💡 HTTP 와 HTTPS의 차이
HTTP는 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않아서 데이터가 노출되기 쉽고,
HTTPS는 SSL(보안 소켓 계층)을 사용해서 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 도난당하는 것을 방지해준다.
한 파일에서 다른 파일을 가져오기 위해서는 import 구문을 사용해야 한다.
React에서는 웹팩과 바벨 설정을 기본적으로 해줘서 import구문을 사용할 수 있게 해준다.
상대경로
프로젝트 규모가 커지면 디렉토리 구조도 복잡해진다. 디렉토리가 복잡해지면 가져오려는 파일과 현재 파일의 위치가 멀어질 수 있다. 위치가 멀수록 import가 복잡해진다.
import ImportHell from '../../../../../src/screens/ImportHell'상대경로를 사용해서 파일을 가져오면 작성하는것도 귀찮지만 폴더가 정확히 어떤 위치에 있는지 파악하기도 힘들어진다. 뿐만 아니라 코드 리펙토링 시 파일의 위치를 바꾸게 된다면 상당히 불편할 것이다.
절대경로
이걸 절대경로로 설정 한 후에 사용한다면
import ImportHeaven from 'screens/ImportHeaven'훨씬 깔끔하고 파일 위치를 찾기 편리해진다.
자바스크립트 트랜스파일 도구인 Babel 플러그인을 사용해서 경로를 설정해주면 위와 같이 절대경로로 변경할 수 있다.
1. babel-plugin-module-resolver 설치하기
Babel의 module resolver 플러그인을 개발 의존성으로 설치한다.
공식문서 보러가기
$ npm install --save-dev babel-plugin-module-resolver$ yarn add --dev babel-plugin-module-resolver2. babel.config.js 에서 alias 설정하기
babel.config.js는 기본적인 babel에 대한 설정을 저장하고 있는 config 파일이다.
React Native 는 기본적으로 아래와 같이 babel.config.js가 구성되어 있다.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};이를 아래와 같이 바꿔주었다.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
},
],
],
};root 는 기준이 되는 위치를 정해주는 것이다.
나의 React-Native 프로젝트는 scr폴더 안에 screens와 component 파일을 관리하기 때문에 기준을 ./src 로 했다.
상대경로 대신 ./src가 기준인 경로가 생기는 것이기 때문에 ./src를 생략하고 절대경로처럼 불러올 수 있다.
3. tsconfig.js 설정하기
타입스크립트를 사용한다면 tsconfig.js도 설정해야 한다.
// prettier-ignore
{
"compilerOptions": {
... 생략 ...
"baseUrl": "./src",
},CompilerOptions에 baseUrl 도 기준이되는 위치를 정해주는 것이기 때문에 babel.config.js의 root와 맞추면 된다.
4. 적용확인
경로 수정 후 metro 서버를 닫고 캐시를 제거한 후에 VSCode 재시작 후 다시 실행해준다.
캐시 삭제 명령어
yarn start --reset-cache 
기준이 되는 scr를 쓰지않고 절대경로처럼 바로 적용되는 걸 볼 수 있다.
경로 부분이 깔금해졌다!✨
5. image 절대경로로 import하기
그러나 src 폴더 안에 있는 asset > image 가 작동되지않았다.
TypeScript의 특성때문이었는데, image로 png 파일을 사용했는데, png파일에도 타입 선언을 해야했다.
[해결방법] scr폴더 안에 index.d.ts 파일을 생성하고 declare module '*.png'를 작성한다.
// src > index.d.ts
declare module '*.png'💡.d.ts 파일이란?
기존 JS 모듈을 타입스크립트에서 사용하기 용이하도록 기존 JS 모듈의 타입정보를 별도의 파일로 선언한것이다.
- JS 코드로는 컴파일 되지 않고, TypeScript 컴파일러에게 타입 정보를 알리기만 한다.
- 이 파일에 작성되는
declare namespace블록과declare module블록의 필드들에는export키워드가 기본으로 붙는다. 즉 굳이 또 붙여줄 필요가 없다.
💡declare module "ABC" 이란?
앰비언트 모듈 선언(Ambient Module Declaration) 파일에 작성하는 블록으로, 앰비언트 모듈 혹은 외부 모듈이라고도 부른다.
앰비언트 모듈 Ambient Module 이란?
👉🏻 한 마디로 어디서든 사용할 수 있는 type 정의하는 것
이러한 앰비언트 모듈 선언 파일은 컴파일 대상에 포함되기만 한다면 그곳에 선언된 모듈(여기서는 ABC)의 타입 정보를 참조할 수 있게 된다.
export를 붙인 필드만 외부에서 참조가 가능하다.
index.d.ts 파일에 이미지 png를 앰비언트 모듈로 선언하고 나면 이미지 사용할 곳에 import 하면 정상적으로 작동하는 걸 볼 수 있다.
// App.ts
import iconName from 'asset/images/~.png'
... 생략 ...
<Image
source={logoColor}
/>
... 생략 ...🔗 참고 링크
Babel로 별칭 경로 설정하기 (Module Resolver)
React Native : 절대 경로 설정하기 (+ 타입스트립트)
(21.07.15) d.ts 파일이란??
tsconfig.json 컴파일 옵션 정리
[TypeScript] module, import, export, declare 개념 정리
HTTP와 HTTPS 차이점
