import 순서에 대해서

[bbearcookie]

FE Discussion #2 에 있던 내용을 마이그레이션 했습니다.

프로젝트 초기 환경을 셋업하면서, import하는 순서에 대해서 고민하고 정리해봤는데요!
아래와 같은 내용은 어떠실지 공유하고자 Discussion을 작성합니다.

// react와 매우 연관이 있는 라이브러리
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { ErrorBoundary } from 'react-error-boundary';

// 네트워크와 관련한 라이브러리
import axios from 'axios';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// 그 외 다양한 서드파티 라이브러리
import { useForm } from 'react-hook-form';
import z from 'zod';

// @ 로 적용된 경로
import { getHaha } from '@/apis/haha';
import { testValue } from '@/constants/test';
import router from '@/routes/router';

// .. 로 시작하는 경로
import { superAdd } from '../calculator';

// . 로 시작하는 경로
import { add } from './calculator';

// 각종 컴포넌트 및 페이지
import Header from '@/components/Header';
import InnerComponent from './components/InnerComponent';
import HelloPage from '@/pages/HelloPage';

// 각종 타입
import { TestType } from '@/types/testType';
import { hahaType } from './types/hahaType';

// 이름 없이 가져오는 각종 css import
import './main.css';
import '@/styles/hello.css';

우선 중점적으로 생각했던건 서드파티 라이브러리는 우리가 작성한 코드보다 위쪽에 등장해야 한다는 것입니다.
또한 서드파티 라이브러리도 우선순위에 따라서 3단계의 레이어로 분할했습니다.
(리액트와 밀접한 연관이 있는 라이브러리를 최상위에 배치)

그 다음으로 우리의 소스코드를 import하는 순서도 3개의 레이어로 나눴는데요,

절대경로 @
부모경로 ..
현재경로 .
순으로 가져옵니다.

다만 컴포넌트나 페이지는 한 곳에 몰았는데요, React에서는 컴포넌트를 중심으로 개발하기 때문에 해당 컴포넌트가 어떤 컴포넌트를 사용하는 지를 한 군데 몰아서 명시적으로 파악할 수 있게 하면 깔끔하다고 생각했습니다.

타입과 같은 경우도 유사한 고민으로 가장 하단에 몰았는데, 타입 자체가 실행 가능한 로직에 해당하는 소스 코드는 아니기도 하고, 값이 아니라는 점에서 다른 변수들과는 구분된다고 생각했기 때문입니다.

(다만, 해당 타입이 types 라는 디렉토리를 거치지 않는다면 하단에 배치되진 않을 수 있긴 합니다.)

오늘 회의에서 한번 이야기를 나눠보면 어떨까요!?