절대경로

⚛️ 리액트/웹팩

웹팩으로 리액트 시작하기 2 - 절대 경로 설정하기

웹팩으로 리액트 시작하기의 두 번째 파트에서는 eslint, tsconfig, webpack, 설정을 통해 절대 경로를 적용하는 방법을 다룬다. 1. eslint 설정 eslint 을 아직 설치를 하지 않았으니 이를 먼저 설치한다. 또한 import에 관한 플러그인을 함께 설치한다. yarn add -D eslint eslint-plugin-import 이후 간단한 명령어를 통해 eslint설정 파일을 생성한다. 다음의 명령어를 실행하면 각자가 원하는 eslint을 설정할 수 있다. 해당 과정을 통해 여러 가지의 플러그인이 생성되고 eslint설정 파일이 루트경로에 생성된다. npx eslint --init 이제 생성된 eslint 설정 파일에서 다음과 같은 설정을 추가한다. import 플러그인 추가 ..

⚛️ 리액트

🧭 Paths Alias 사용하기(CRA, Storybook, Jest 설정도 함께)

😵‍💫 복잡해질 수도 있는 경로 프로젝트를 진행하다 보면 폴더의 구조가 복잡해질 가능성이 충분히 존재한다. 규모가 큰 프로젝트일수록 더욱 원하는 파일에 접근하기 위해 이리저리 움직여야 한다. 특히, 하위 폴더에 접근하는 것이 아니라 형제 폴더, 부모의 형제 폴더에 접근하는 것은 더욱 까다롭다. 다행히 vscode는 이런 복잡한 문제를 자동 import를 할 수 있는 기능을 제공해 주기 때문에 쉽게 해결 가능하다. import 하고 싶은 모듈을 타이핑을 하다 보면 자동으로 import 하는 기능을 모두 다 사용해 봤을 것이다. 이를 활용하면 다음과 같이 vscode가 알아서 모듈의 위치를 찾아 import를 해준다. import CreditCard from '../../components/CreditCar..

noah-dev
'절대경로' 태그의 글 목록