Express에서 절대경로 세팅

Express에서 절대경로를 세팅하고 소스에 적용

---

React 프로젝트에서 상대경로를 쓰게 되면 폴더가 깊어지면 깊어질수록 import할 때 ../../ 를 입력하는 경우가 많습니다.

따라서 절대경로를 써서 @src/component/sample 이런 식으로 import하게 만듭니다.

React에서 절대경로를 사용하고자 한다면 jsconfig.json / tsconfig.json이나 webpack을 건드려서 세팅할 수 있습니다.

 

다만 Node Express에선 좀 다르고 제약사항이 있으며 어떻게 사용할 수 있는지 살펴보겠습니다.

 

필요한 라이브러리: ts-node, tsconfig-paths

 

• tsconfig.json & tsconfig.paths.json 소스

// tsconfig.json
{
	"extends": "./tsconfig.paths.json",
	"compilerOptions": {
		"module": "Commonjs",
		"target": "ES2015",
		"sourceMap": true,
		"allowJs": true,
		"esModuleInterop": true,
		"outDir": "./dist"
	},
	"include": ["src/**/*"],
	"exclude": ["node_modules", "dist/**/*"]
}


// tsconfig.paths.json
{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@src/*": ["src/*"]
		}
	}
}

src폴더를 기준으로 절대경로를 세팅했으니 불러올 때 from '@src/controllers/...' 로 불러오면 됩니다.

React에선 @pages, @src, @styles 등 다 가능한데 Node express에선 테스트 했을 때 @src 하나만 가능했습니다.

따라서 tsconfig.paths.json에 @src 하나만 넣었습니다.

 

다만 이걸 한다고 끝이 아니라 ts-node, tsconfig-paths패키지를 설치 후  package.json에서도 바꿔야 할 것이 있습니다.

 

• package.json

"scripts": {
    "dev": "env-cmd -f .env.local nodemon --exec ts-node -r tsconfig-paths/register src/app.ts",
    "build": "tsc -p tsconfig.json",
    "startProduction": "env-cmd -f .env.production ts-node -r tsconfig-paths/register dist/app.js"
},

env-cmd 라이브러리로 환경변수가 담긴 파일을 명시해주고 (여기 예시에선 .env.local, .env.production) 개발환경에서 무언가를 바꾸면 nodemon이 알아서 서버를 재실행해줍니다.

ts-node -r tsconfig-paths/register 를 꼭 해줘야 tsconfig.json에서 설정한 절대경로를 인식해서 불러올 수 있습니다.

 

한번 개발소스랑 빌드된 dist폴더의 소스랑 비교를 해볼까요?

// 개발 소스
import asyncHandler from '@src/middleware/async';
import { generateUID, LinkArrFetchMetadata } from '@src/util/customFunc';
import ErrorResponse from '@src/util/errorResponse';


// build를 실행하여 ES2015로 컴파일 된 소스
const async_1 = __importDefault(require("@src/middleware/async"));
const customFunc_1 = require("@src/util/customFunc");
const errorResponse_1 = __importDefault(require("@src/util/errorResponse"));

빌드된 소스에서도 @src/ 로 되어있기 때문에 ts-node -r tsconfig-paths/register 를 해주지 않으면 node에서 인식을 하지 못합니다.

따라서 js로 변환된 dist/app.js를 실행할 때도 ts-node -r tsconfig-paths/register 를 명시적으로 입력해줘야 합니다

(npm run startProduction 부분)