[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를 활용한 절대경로 설정
이제부터가 찐다.
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 경로에 croco.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을 수정하지 않고
적용할 수 있는 좋은 방법이라 생각된다.
마치며...
이번주는 주로 알고리즘을 공부했다.
차근차근 항해 측에서 제공한 알고리즘 문제를 공부 하고 그에 필요한 지식들을 공부했다.
python을 사용해서 쉽게 접근할수도 있었지만 앞으로 javascript를 사용해 개발을 할것이기 때문에 일부러 javascript를 선택해서 알고리즘을 풀었다.. (사실 취업할땐 python이 더 좋지 않을까 생각한다.
만약 문제가 된다면 python으로도 공부하고 풀어보면 좋을거같다.
주말엔 실전 및 그 동안 해왔던 프로젝트들에 만족하지 못해
따로 프로젝트를 계획했는데 백엔드 한분과 같이 진행하기로 했다. 초기 설정을 하는데 잘 하시는 분들 코드를 보면서 하면 좋은부분을 리딩하며 적용할려고 했는데 쉽진 않았다... 차근차근 하나하나 공부하면서 적용해봐야겠다.
