안녕하세요! 볼드나인 백엔드 개발자 황성현입니다. 
Typescript로 작업을 하다 보면 모듈을 import 할 때 경로를 지정해야 할 때가 많습니다. (VSCode가 거의 알아서 해주긴 하지만..!) 이때 사용할 수 있는 방법으로는 상대 경로와 절대 경로가 있습니다.
최근 저희 프로젝트에서는 기존 상대경로로 되어있던 모듈 import 하는 방식을 절대경로 방식으로 바꾸는 작업을 진행하고 있는데요. 두 방식은 각각의 특성과 장단점이 있으며, 프로젝트의 규모나 구조에 따라 적합한 방법을 선택하는 것이 중요합니다. 오늘은 두 방식에 대해서 간단히 알아보고자 합니다.
1. 상대 경로 (Relative Path)
상대 경로는 현재 파일의 위치를 기준으로 모듈의 위치를 지정합니다. 예를 들어, import { User } from '../models/User'; 와 같이 경로를 설정합니다. 이는 현재 파일이 속한 디렉토리에서 다른 디렉토리로 이동할 때, 상대적인 경로를 사용하여 모듈을 참조하는 방식입니다.
장점:
•
이동성: 프로젝트를 다른 위치로 이동할 때도 경로가 그대로 유지되어 수정이 필요 없습니다.
•
명확성: 파일 간의 상호 참조 관계를 명확히 할 수 있습니다.
단점:
•
가독성 저하: 디렉토리 구조가 깊어지면 경로가 길어져 코드의 가독성이 떨어질 수 있습니다. 예를 들어 ../../../../../utils/helper 같은 경로는 읽기 어렵습니다.
•
리팩토링 어려움: 파일 위치가 변경되면 관련된 모든 import 경로를 수정해야 하는 불편함이 있습니다.
2. 절대 경로 (Absolute Path)
절대 경로는 프로젝트의 루트 또는 설정된 기준 디렉토리에서 파일을 참조합니다. TypeScript에서 절대 경로를 사용하려면 tsconfig.json 파일에서 baseUrl이나 paths를 설정해야 합니다. 예를 들어, import { User } from '@models/User'; 와 같이 설정할 수 있습니다.
장점:
•
가독성 향상: 경로가 짧고 명확하여 코드를 읽기 쉽습니다. 또한 프로젝트 내의 구조를 한눈에 파악할 수 있습니다.
•
유지 보수 용이: 파일 구조가 변경되어도 설정이 일관되게 유지되므로 import 경로를 수정할 필요가 없습니다.
단점:
•
설정 필요: 절대 경로를 사용하려면 추가적인 설정 작업이 필요합니다. 이는 특히 프로젝트 초기 설정에서 추가적인 작업을 요구합니다.
•
이동 시 주의 필요: 프로젝트 전체를 다른 위치로 이동하거나 구조를 크게 변경할 경우, tsconfig.json의 설정을 수정해야 할 수 있습니다.
결론적으로, 작은 프로젝트나 간단한 모듈 구성에서는 상대 경로가 충분히 효과적일 수 있습니다. 그러나 대규모 프로젝트나 복잡한 구조에서는 절대 경로를 사용하여 가독성과 유지 보수를 용이하게 하는 것이 좋습니다. 최종적으로는 팀의 선호도와 프로젝트의 요구사항에 따라 적합한 방식을 선택하는 것이 중요합니다.
이 글이 TypeScript에서 상대 경로와 절대 경로 사용에 대한 이해를 돕는 데 도움이 되길 바랍니다!