@는 보통 JavaScript 및 TypeScript 프로젝트에서 경로 별칭을 나타내는 기호이는 특정 디렉토리를 간단하게 참조할 수 있도록 도와줌.
예를 들어,
@가 특정 폴더(예: src 또는 app)를 가리키도록 설정할 수 있음- 프로젝트 구조:
/project ├── /src │ ├── /data │ │ └── dummy.json │ └── /components │ └── MyComponent.js └── ...
- 경로 별칭 설정:
이 경우
@를src디렉토리에 매핑하면,
@/data/dummy.json은 실제로 src/data/dummy.json을 가리키게 됨설정 방법
- Webpack:
webpack.config.js파일에서resolve.alias를 사용하여 설정
- TypeScript:
tsconfig.json파일의paths옵션을 사용하여 설정
- Babel:
babel-plugin-module-resolver를 사용하여 설정
장점
- 가독성: 상대 경로 대신 절대 경로를 사용하므로 코드가 더 깔끔하고 이해하기 쉬워짐
- 유지보수: 디렉토리 구조가 변경되더라도 경로를 간단히 수정할 수 있어 유지보수가 용이
nextUI 템플릿으로 만들면,
@는 루트 디렉토리로 향하도록 설정되어 있음.
