ES6 import 클린 코드

카테고리 Daily 
1
2
3
4
import { colors } from "../../../themes";
import Button from "../../../components/Button";
import MyImage from "../../../assets/images/my-image.png";
import { globalStyles } from "../../../styles/globalStyles";

위와 같은 import 코드를 깔끔하게 하기 위한 3가지 방법에 대해 알아보자.

1. Barrel 패턴

1
2
3
4
5
6
7
8
9
10
11
12
// folder structure
components;
--Accordions.js;
--Button.js;
--index.js;

// index.js
export { default as Accordion } from "./Accordion";
export { default as Button } from "./Button";

// imports
import { Accordion, Button } from "components";
  • index.js 파일에 담아서 export를 한곳에서 내보낸다.

2. Aliases 사용

  • 가독성을 높이는 짧은 경로
  • 파일을 옮기더라도, import는 바뀌지 않는다.
  • snippets을 사용하면 더 쉽다.
1
2
3
4
5
6
7
8
9
10
11
12
// babel.config.js
plugins: [
  "module-resolver",
  {
    alias: {
      "@internals/assets": "./src/assets",
      "@internals/components": "./src/components",
      "@internals/hooks": "./src/hooks",
      ...
    },
  },
];
  • babel을 사용할 때는 위와 같이 alias를 지정할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// vite.config.js

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});
  • vite를 사용하면 위와 같이 사용할 수 있다.
1
2
3
4
5
6
7
// tsconfig.json
"paths": {
    "@internals/assets/*": ["./src/assets/*"],
    "@internals/components": ["./src/components/index.ts"],
    ...

}
  • typescript를 사용하면 위와 같이 사용할 수 있다.

3. import 순서 지정

prettier-plugin-sort-import

prettier는 왠만한 프로젝트에서 자주 사용되기 때문에 자동적으로 지원해주는 라이브러리를 사용하자.

댓글 공유

  • page 1 of 1

loco9939

author.bio


author.job