[React] 상대경로 지옥에서 벗어나기 (craco)

 

개요

 

React는 기존의 Vanilla JS( 프레임워크를 쓰지 않은 순수 JavaScript )나 Jquery 사용시

 

불편했던 개발자의 욕구를 충분히 충족시켜주며 성장을 계속하고 있다.

하지만 인간은 편안함에 금방 익숙해지고 새로운 불편함을 또 찾고 그것을 고쳐내려 한다.

오늘은 React에서 개발한 프론트엔드 프로젝트 규모가 방대해져 import 해야 할 대상을 상대경로로

 

../을 무한 반복하여 찾는 불편함을 해소할 craco에 대해 알아보고자 한다.

 

 

상대경로 지옥

 

- 페이지 컴포넌트 import

보통 App.js나 App.ts에 각 url에 따라 이동할 페이지 컴포넌트들을 정의 한다.

스타일에 따라 layout으로 분리하거나 몇개로 쪼개서 관리할 수 있겠지만

 

각 url에 맞는 페이지 컴포넌트들을 임포트 해줘야 하는 일은 피할 수 없다.

 

../../pages/user/Login
../../pages/user/Logout
../../pages/user/Setting
../../pages/main/Main

똑같이 반복되는 ../../을 얼마나 더 쳐야하는 것인가?

 

- action들, reduer들, store들?

redux를 사용한다면 해당 action, reduer, store들을 사용하는 곳에서 모두 import해야하는 것도 피할 수가 없다.

역시다 ../../../ 이라는 쩜의 지옥에서 헤매이는 우리자신을 볼 수있다.

 

 

 

절대경로로 관리 할 수는 없는 것인가?

 

 

이렇게 쩜의 지옥에서 우리는 벗어날 수 없는 것인가? 그냥 page는 페이지대로, redux모듈들은 리덕스 모듈 대로,

그 외 서버를 호출하는 api들이 모여있는 service는 서비스대로, data의 타입을 위해 만든 model모듈은 모델 모듈 대로

그렇게 절대경로로 지정하여 사용할 수 는 없는 것인가?

없다면 이 글을 시작도 안했겠지만...

 

 

 

Craco를 활용한 절대경로 설정

 

먼저 잘 안하는 방법부터 소개한다. 관심이 없다면 이 부분은 넘어가도 좋다.

eject 명령어를 사용해서 webpack config를 직접 수정하는 방법이다. 하지만 한번 eject를 수행하게 되면 이전의

개발환경으로 돌아갈 수 없게 된다. 때문에 특별한 사유가 아닌 이상 eject는 하지 않는 것을 권장한다.

 

이제부터가 찐이다.

craco라는 모듈을 사용하는 쉬운 방법을 소개한다.

 

 

gsoft-inc/craco

 

Create React App Configuration Override의 약자라고 한다. 중요하지 않다.

우리를 쩜의 지옥에서 벗어나게 해주는 방법이 중요하다.

그 외 자세한 사용법은 github를 참고 하시길.

 

반응형

01. 설치

 

npm, yarn, typescript 등 자신의 프로젝트 상황에 맞춘 설치를 진행한다.

 

 

npm i --save craco-alias @craco/craco


yarn add craco-alias @craco/craco

 

 

 

02. package.json 변경

 

기존 파일

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "stop": "taskkill -F -IM node.exe"
  },

 

변경 후

 

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

 

위와 같이 수정하여 craco로 프로젝트가 실행될 수 있도록 한다.

 

 

03. croco config 추가

 

프로젝트 root 경로에 craco.config.js 파일을 신규로 생성한다.

 

그리고 아래와 같이 작성한다.

 

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
        plugin:CracoAlias,
        options:{
            source : "tsconfig",
            tsConfigPath : "tsconfig.paths.json",
        }
    }
  ]
};

 

craco를 사용하기 위한 설정 파일이라 생각하면 된다.

 

 

 

04. tsconfig.json 수정

 

tsconfig에 다음과 같은 사항을 추가한다.

 

{
  // 추가 부분 시작
  "extends": "./tsconfig.paths.json",
  // 추가 부분 끝
  "compilerOptions": {
    ·······(생략)
  },
  "include": [
    "src"
  ]
}

 

tsconfig.json에서 모두 관리 할 수도 있지만 가독성과 유지보수성을 위해 따로 파일을 만들어 관리한다.

 

 

 

05. alias 추가

 

이제 다 왔다.

 

위에 "./tsconfig.paths.json" 없는 파일을 extends 시켰으니 이 파일을 만들어 줘야한다.

역시 프로젝트 root 경로에 tsconfig.paths.json를 생성하고 paths 설정을 프로젝트에 맞게 한다.

 

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": { // 아래 부분들을 자유롭게 추가 수정하여 자신만의 절대경로 생성 가능
            "@images/*":["src/images/*"],
            "@action/*":["src/_actions/*"],
            "@reducer/*":["src/_reducers/*"],
            "@store/*":["src/_store/*"],
            "@model/*":["src/model/*"],
            "@page/*":["src/page/*"]
        }
    }
}

 

 

06. 사용방법

 

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

//App.js의 router에서 페이지 컴포넌트 import시 쩜의 지옥에서 벋어난 것을 확인가능
import ProjectList from '@page/main/ProjectList';   


const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#212121',
    },
    secondary: {
      main: '#f44336',
    },
  },
});

function App() {
  return (
    <>
    <ThemeProvider theme={theme}>
    <Router>
    
            <Switch>
          <Route exact path="/">
            <ProjectList/>
          </Route>
        </Switch>
        </Router>
        </ThemeProvider>
    </>
  );
}

export default App;

 

 

지금까지 craco를 활용한 상대경로 .. 쩜의 지옥에서 벗어나는 방법에 대해 알아보았다.

create-react-app으로 프로젝트를 만들어서 개발하는 경우가 많을텐데 그때 복잡한 webpack을 수정하지 않고

적용할 수 있는 좋은 방법이라 생각된다.