코드에서 상대경로 처리로 지저분해지는 걸 막기 위해 보통은 webpack resolve.alias나 babel의 babel-plugin-webpack-alias, babel-plugin-module-resolver등 다양한 플러그인들을 사용합니다.

저희 팀에서는 webpack의 resolve 옵션을 사용해보았는데요,

/* webpack.config.js */
entry: './client/index.js'
resolve: {
    alias: {
      "Components": path.resolve(__dirname, 'client/components'),
      "@": path.resolve(__dirname, 'client'),
    },
  },

원래는 ../../Components/component 처럼 상대경로로 표현하면 헷갈리는 부분들을 위와 같이 변경할 수 있는데, 이렇게 하면 VSCode에서 IntelliSense기능이 제대로 작동하지 않아서 import하는 클래스/함수의 프로퍼티나 주석을 제대로 찾지 못해서 불편한 경우가 있습니다.

위의 이미지를 보시면 열심히 jsdoc으로 주석으로 적어놨는데도 VSCode에서 Note에 대한 정보를 제대로 찾지 못해서 생성자에서 super()가 any 로만 표시되는 것을 확인하실 수 있습니다.

이럴 경우, 프로젝트 제일 상위 폴더에 jsconfig.json파일을 생성해서, VSCode가 경로를 제대로 찾을 수 있도록 설정 해 두는 것이 좋습니다. 타입스크립트를 사용하시는 경우, tsconfig.json에 밑의 옵션을 그대로 넣어주시면 됩니다.

/* jsconfig.json */
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "Components/*": ["./client/components/*"],
      "@/*": ["./client/*"],
    }
  }
}

마우스를 super위로 옮길 시, jsdoc으로 남겨두었던 주석이 제대로 뜨는 것을 확인하실 수 있습니다!!