import 영역을 읽기 좋게 다듬는 세 가지 방법

TL;DR

• 절대 경로 import를 활용하기
• import 정렬 기준을 적용하기
• 사용하지 않는 패키지를 제거하기

---

프론트엔드 개발을 경험해보신 분이라면, 분명 한번쯤은 정돈되지 않은 import 코드 영역을 보며 아쉬움을 느꼈던 경험이 있을 거에요.

import React, { createContext, useEffect, useState } from "react";
//Global Style
import GlobalStyle from "./components/GlobalStyle";
//Import Pages
import About from "./pages/About";
import Group from "./pages/Group";
import Nav from "./components/Nav/Nav";
import Rank from "./pages/Rank";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Forgot from "./pages/Forgot";
//Router
import { Switch, Route, useLocation } from "react-router-dom";
//Animation
import { AnimatePresence } from "framer-motion";
import "./style/app.scss";
import Footer from "./components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux";
import { checkSignedIn, onLoginSuccess } from "./redux/actions/authActions";
import { getUserAction } from "./redux/actions/userActions";
import { Auth } from "aws-amplify";
import { USER_ENDPOINT } from "./constants/URL";
import axios from "axios";
import User from "./pages/User";
import GroupDetail from "./pages/GroupDetail";
import GroupStatistics from "./components/GroupStatistics/GroupStatistics";
import Guide from "./pages/Guide";
import Message from "./pages/Message";

위 코드는 제가 프론트엔드 개발을 거의 처음 시작할 때 짰던 코드인데요, 꽤 지저분하지 않나요? 😅

이번 글에서는 외부 코드를 불러오는 영역을 읽기 좋게 개선할 수 있는 몇 가지 방법들을 소개해보려 해요.

 

Absolute Path 활용하기

⚠️ 프레임워크별로 절대 경로를 지정하는 방법은 이 글에서 다루지 않아요.

적용 방법이 Vite, CRA, Next.js, Vue, Storybook 등 사용하는 도구와 환경에 따라 달라지기도 하고,
이미 공식 문서와 인터넷에 충분히 많은 자료가 존재한다고 생각했어요.

첫 번째 방법은 import 경로로 절대 경로를 사용하는 방법이에요.

 

VSCode 등의 에디터가 발전하면서 인텔리센스 등이 import 경로를 자동으로 추론할 수 있게 되었지만,
기본적으로 외부 모듈이 아닌 로컬 모듈을 불러올 때는 상대 경로를 사용해 코드가 읽기 어려워진다는 문제가 있었어요.

#1. 내가 찾는 함수나 값의 이름을 입력하고 Trigger Suggestion을 사용하면

#2. 해당 값이 존재하는 경로 및 패키지를 자동으로 추론해줄 수 있어요.

#3. 하지만 외부 모듈이 아닌 로컬 모듈은 상대 경로를 통해 참조하게 되고,

#4. 계층 구조가 복잡해질수록 우리의 import 문도 못생겨질 거에요 😅

이런 문제를 해결하기 위해 프로젝트에서 로컬 모듈의 위치를 상대 경로가 아닌 절대 경로 기반으로 추론할 수 있도록 설정할 수 있는데요,

먼저 프로젝트의 설정이 될 tsconfig.json (또는 jsconfig.json) 에 baseUrl 과 path 속성을 정의해주세요.

{
  "compilerOptions": {
    // ...
    "baseUrl": ".", // 경로의 베이스 값을 t(j)sconfig.json 의 위치로 지정해요.
    "paths": {
      "@/*": ["./src/*"] // 매핑할 앨리어스와 경로를 "앨리어스" : ["경로"] 처럼 표기해요. 
    }
  },
}

컴포넌트를 절대 경로 기반으로 불러올 수 있는 모습 (Next.js)

import Button from "@/component/Button";

export default function Page() {
  return (
    <>
      <Button>Press Me!</Button>
    </>
  );
}

위와 같이 절대 경로를 활용함으로써 코드 길이를 줄일 수 있고, 수많은 ../ 표시를 보면서 "이게 도대체 어디서 불러오는 코드지?" 하는 의문을 줄일 수 있게 됐어요.

다만 유의할 점으로는 t(j)sconfig.json 의 baseUrl과 path를 지정해야 하는 것은 항상 동일하지만, vite, storybook 등 환경에 따라 추가 설정이 필요한 경우가 종종 있다는 것을 꼭 기억해주세요.

✅ Vite Absolute Path Setting, Next.js Absolute Path Setting 등 프레임워크별로 다른 설정 방법을 검색해 적용해주세요.

 

Prettier로 import order 설정하기

다음은 import 문의 순서를 자동으로 설정하는 방식이에요.

import 규칙을 개발자들의 컨벤션으로 잘 정하려 해도, 리팩터링 등 유지보수 과정에서 사람이 정한 규칙 은 반드시 깨지기 마련이에요.

 

맨 위에서 예시로 들었던 코드를 불러와 볼게요.

import React, { createContext, useEffect, useState } from "react";
//Global Style
import GlobalStyle from "./components/GlobalStyle";
//Import Pages
import About from "./pages/About";
import Group from "./pages/Group";
import Nav from "./components/Nav/Nav";
import Rank from "./pages/Rank";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Forgot from "./pages/Forgot";
//Router
import { Switch, Route, useLocation } from "react-router-dom";
//Animation
import { AnimatePresence } from "framer-motion";
import "./style/app.scss";
import Footer from "./components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux";
import { checkSignedIn, onLoginSuccess } from "./redux/actions/authActions";
import { getUserAction } from "./redux/actions/userActions";
import { Auth } from "aws-amplify";
import { USER_ENDPOINT } from "./constants/URL";
import axios from "axios";
import User from "./pages/User";
import GroupDetail from "./pages/GroupDetail";
import GroupStatistics from "./components/GroupStatistics/GroupStatistics";
import Guide from "./pages/Guide";
import Message from "./pages/Message";

Global Style, Import Pages, Router... 등의 주석을 남겨가며 임포트하는 요소들을 구분하려 했지만,
개발자들이 이런 것들을 일일히 신경쓸 필요 없이 개발에만 집중할 수 있도록 할 방법은 없을까요?

 

prettier-plugin-sort-imports 활용하기

VSCode 사용에 익숙해지셨다면 prettier와 format on save 의 조합으로 코드를 정리해본 경험이 있을 텐데요,

prettier-plugin-sort-imports 패키지를 활용하면 코드뿐만 아니라 import 문들의 순서를 정리하는 것도 가능합니다.

GitHub - trivago/prettier-plugin-sort-imports: A prettier plugin to sort imports in typescript and javascript files by the provi

// npm
npm i --save-dev @trivago/prettier-plugin-sort-imports

// yarn
yarn add --dev @trivago/prettier-plugin-sort-imports

패키지를 설치한 후, 프로젝트 루트에 .prettierrc 파일과 설정을 추가해 주세요.

// .prettierrc

{
  // 별도의 기준 없이 알파벳 기준으로 정렬합니다. 정렬 기준을 적용하는 방법 및 예시는
  // https://github.com/trivago/prettier-plugin-sort-imports#importorder 에서 확인할 수 있어요.
  "importOrder": ["./"], 
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

파일을 저장할 때 import 경로가 정렬되는 모습

이제 파일을 저장할 때마다 불러온 파일들이 주어진 기준대로 정렬되는 것을 확인할 수 있어요.

 

사용하지 않는 import 문을 제거하기

이제 마지막 방법인데요, 리팩터링이나 사람의 실수 등으로 사용하지 않는 import 문이 코드 내에 남아있는 경우가 종종 생겨요.

사용하지 않는 코드들은 일반적으로 트리쉐이킹을 거쳐 실제 빌드에 포함되지는 않지만, 분명 신경쓰이는 코드 중 하나에요.

 

사용하지 않는 코드를 제거하는 습관이나 코드리뷰 등 사람의 노력이 아니라 이것도 자동으로 관리할 수 있다면 정말 좋지 않을까요?

맥북을 기준으로 command + shift + p 키를 누르고, Open User Settings 에 진입해 주세요.

이후 별도의 플러그인 설치 없이 아래 구문을 설정에 추가하면, 저장 시 사용하지 않는 패키지들이 제거되는 것을 확인할 수 있어요.

{
  // ...
  "editor.formatOnSave": true, // format on save 활성화
  
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
}

파일을 저장할 때 사용하지 않는 패키지 import 들이 제거되는 모습

 

지금까지 import 영역의 코드를 다듬는 세 가지 방법을 알아보았는데요,

세 가지 방법 모두 크게 공수를 들이지 않으면서 코드 가독성을 높일 수 있어, 이 글을 읽어 보셨다면 도입해보는 것을 추천드려요~ 🙂