일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Live Template
- Infra
- goroutine
- AWS Infra
- Buffered channel
- Helm V3
- gitops
- 대규모 시스템 설계
- GoF 디자인패턴
- golang
- go
- 알림 시스템
- Golines
- notification system
- UnBuffered channel
- Lambda@Edge
- image resizing
- 컴포짓패턴
- 시스템 설계
- 컴포지트패턴
- GoF
- tenneling
- Logrus
- AWS
- Kubernetes
- Bastion Server
- argocd
- System Design
- 클래스 관계
- 디자인패턴
Archives
- Today
- Total
Fall in IT.
리액트 컴포넌트를 절대경로로 임포트하는 방법 본문
안녕하세요.
오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다.
아래 설명은 CRA 프로젝트를 기준으로 설명합니다 : )
왜 절대경로인가?
-
상대경로로 설정할 경우 디렉터리 구조가 깊어질수록 import 하기 어려워진다.
import Common from "../../../../utils/common";
-
절대경로로 설정할 경우 디렉터리 구조와 관계없이 손쉽게 import를 할 수 있다.
import Common from "src/utils/common";
설정 방법
- 프로젝트의 루트에 .env 파일을 생성하고 아래의 내용을 붙여넣습니다.
NODE_PATH=src/
- VSCODE에서도 Path를 잡아줘야하기 때문에 프로젝트의 루트에 jsconfig.json 파일을 생성하고 아래 내용을 붙여넣습니다.
-
{ "compilerOptions": { "baseUrl": "." }, "include": [ "src" ] }
참조
'프레임워크 > React' 카테고리의 다른 글
리액트 컴포넌트 스타일링하는 다양한 방법 (0) | 2021.03.30 |
---|---|
ESLint와 Prettier로 개발 환경 만들기 (0) | 2021.03.28 |
[React/lodash] React에서 debounce 간단 사용방법 (2) | 2020.03.31 |
Create-react-app에서 Moment.js Locale이 적용되지 않는 문제 (2) | 2020.03.14 |
리액트 CRA 프로젝트에서 PORT 변경하는 방법 (0) | 2020.02.01 |
Comments