Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- bootstrap
- github io
- github
- nextjs
- react typescript
- styled components
- getModifierState
- input type=file
- ngrok설치
- CSS
- react
- There isn’t anything to compare
- next.js css
- fetch
- createGlobalStyle
- icon
- ngrok실행
- git lab
- SCSS
- dart 변수
- 컨디셔널 렌더링
- rewrites
- nextjs 설치
- API 토큰
- Git
- npm styled-reset
- nextjs .env
- API token
- react env
- typescript react
Archives
- Today
- Total
꾸준히 성장하는 개발자
[React] npm i path --save 본문
경로 다룰 때 사용되는 라이브러리
터미널을 열고 아래처럼 입력 후 설치를 해준다.
npm i path --save
설정하는 방법
vite.config.js 파일로 가서
위에 아래처럼 입력하여 path import 해주고
import path from "path";
resolve: {
alias: {
"@component": path.resolve(__dirname, "./src/component"),
},
},
alias :{ 이 안에 작성!!! }
"경로약칭" : "경로" 이렇게 작성을 하는데
'@component' : path.resolve(__dirname, '경로' ) 위에서 이렇게 작성이 되어있는데
'@component' : 경로 약칭
path: path라이브러리
resolve( __dirname: 현재 path라는 라이브러리가 호출된 경로, '경로 ' ) : resolve 메서드를 호출
이렇게 생각하면 된다.
그래서 나중에
//App.jsx
import TestComponent from ' src/component/test/test2/TestComponent.jsx'
import TestComponent from ' @component/test/test2/TestComponent.jsx'
위에 있는 경로를 아래처럼 줄여줄 수 있는 것이다.
위는 드라마틱한 변화는 없지만
// vite.config.js
'@component' : path.resolve(__dirname, 'src/component/test/test2' )
//App.jsx
import TestComponent from ' src/component/test/test2/TestComponent.jsx'
import TestComponent from ' @component/TestComponent.jsx'
이렇게 설정이 되어 있다면 좀 더 간편하게 경로를 작성할 수 있다
'React' 카테고리의 다른 글
[React] Login 페이지 - password CapsLock 표시 (0) | 2022.06.29 |
---|---|
[React] Login 페이지 - password 보기 기능 (0) | 2022.06.29 |
.env 파일을 통한 환경변수 관리하기 (0) | 2022.06.22 |
[React] vite 사용해보기 (0) | 2022.06.13 |
[React Hook] useParams (0) | 2022.06.08 |