일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 실행시간 측정
- GitLab Mirroring
- eslint-import-resolver-typescript
- GitLab미러링
- visual studio code
- 티스토리 초대장/ 티스토리초대
- 프리티어
- '티스토리 초대장/ 티스토리초대'
- visual studio code cli
- GitHub 미러링
- settings sync
- 티스토리 초대장
- 유니옥션
- code 세팅
- currentTimeMillis
- 티스토리초대
- webstorm
- gitlab 연동
- react native #gradle
- 음료같은녹즙
- GitHub Mirroring
- React Native
- 초대장
- code .
- code 설치
- Path Alias
- Emmet
- 니돈내먹
- 프레시업 #풀무원 #하루한병 #건강만들기 #풀무원 녹즙
- 네이버 클라우드 플랫폼
Archives
- Today
- Total
방치하기
Expo 절대 경로 설정하기 (Path Alias) 본문
반응형
왜 Path Alias 를 사용하나?
import { PreviewType } from "../../../../../types/PreviewType";
IntelliJ 가 아니라면 대체 어느 폴더인지 알수가 없는 ../../ 이다 types 폴더가 다른 depth에 동일한 이름으로 존재한다면, 어떤건지 보고 알기 쉽지가 않다. 그래서 절대 경로를 사용하기 위해서 프로젝트 초기 부터 세팅을 하고자 한다.
React 의 경우는 Webpack 을 사용하고 대부분의 경우의 예제가 React라서, Expo (또는 React Native) 기준으로 한번 알아보았다.
우선 babel-plugin-module-resolver 를 추가 한다.
yarn add -D babel-plugin-module-resolver
그후 babel.config.js파일에 아래와 같이 Path를 등록해준다. 보통 @를 많이 붙이는것 같은데, @type과 혼동 될것 같고, 개인 사이드 프로젝트라 #으로 지정했다.
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#Navigation': './navigation/',
'#Images': './assets/images/'
}
}
]
]
};
};
그리고 Typescript를 사용하는 경운 tsconfig.json 파일에도 추가가 필요하다. 아래처럼 추가를 해줬다.
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"baseUrl": ".",
"typeRoots": ["./node_modules/@types", "@types"],
"paths": {
"#Navigation/*": [
"./navigation/*"
],
"#Images/*": [
"./assets/images/*"
]
}
}
}
이렇게 작성하니 사용하는곳에서 사용은 되지만, eslint 에서 에러가 났다.
이 문제를 해결하기위해서 아래와 같이 eslint-import-resolver-typescript 를 설치한다.
yarn add -D eslint-import-resolver-typescript
그리고 사용중인 eslint설정 부분, 저 같은경운 .eslintrc.js에 아래와 같이 추가했다.
"typescript": {}, ← 추가 (tsconfig 관련 세팅을 읽어옴)
...
settings: {
'import/resolver': {
"typescript": {},
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
...
반응형
'프로그래밍 > React Native' 카테고리의 다른 글
React-Native init 생성후 Gradle 버전 문제 (0) | 2022.01.02 |
---|
Comments