[React] 프로젝트 절대경로 설정하기(Part.2)

신세원·2021년 3월 21일

React 절대경로

React

목록 보기

11/28

이전에는 React Native+Typescript 절대경로 설정법에 대해 알아보았다.

오늘은 React에서 쓰이는 절대경로 설정법에 대해 간단하게 정리하고자 한다.

1. 프로젝트 생성 및 핵심 라이브러리 설치

$ create-react-app 프로젝트 이름
$ yarn add react-router-dom

2. NODE_PATH 적용

package.json을 수정한다.

  "scripts": {
    "start": "NODE_PATH=src react-scripts start",
    "build": "NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

3. jsconfig.json or tsconfig.json 생성

리액트(Creact React App)에서는 웹팩과 바벨 설정을 기본적으로 해주어 import 구문을 사용할 수 있게 해준다.
하지만 CRA 특성상 바로 바벨을 건드리기는 쉽지 않다. 그렇지만 그렇다고 설정을 못할수 있는 것도 아니다.
첨부 문서에 나와있는 대로 "절대 경로를 사용하는 방법으로 웹팩 설정을 건드려야 한다고 생각하여 리액트에선 쉽지 않은 일이 될 것 같다." 라고 생각했지만 친절하게도 위 첨부문서에 방법을 설명해주었다.

프로젝트 루트(pakage.json 동일선상 루트)에 jsconfig.json 또는 타입스크립트를 사용하고 있다면 tsconfig.json을 만든다. 이미 있다면 몇 가지 속성만 추가해주면 된다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

이렇게 설정을 완료했으면 꼭 껐다가 다시 실행한다!

4. 디렉토리 만들기

프로젝트의 디렉토리 구조는 다음과 같다.

components: 프리젠테이셔널 컴포넌트들이 위치합니다
containers: 컨테이너 컴포넌트들이 위치합니다
lib: 프로젝트에서 필요한 함수들을 여기에 저장합니다
pages: 라우트 관련 컴포넌트들이 위치합니다
redux: 리덕스 관련 코드가 위치합니다

4-1. pages 디렉토리에 라우트 전용 컴포넌트 준비하기

pages/Home.jsx

import React from 'react';

const Home = () => {
    return (
        <div>
            Home 입니다.
        </div>
    );
};

export default Home;

pages/Login.jsx

import React from 'react';

const Login = () => {
    return (
        <div>
            Login 입니다.
        </div>
    );
};

export default Login;

pages/index.jsx

export { default as Home } from './Home';
export { default as Login } from './Login';

4-2. 라우트 설정

src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home, Login } from 'pages';

function App() {
    return (
        <React.Fragment>
            <Router>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/login" component={Login} />
                </Switch>
            </Router>
        </React.Fragment>
    );
}

export default App;

값을 설정 한 다음, 개발서버를 실행하면 된다.

$ yarn start

+ NODE_PATH 설정

NODE_PATH

NODE_PATH를 src로 지정하여 빌드와 개발 서버를 여는데 사용하는 방법이 있다. 아래와 같이 사용하면 된다. 사용하기 전 cross-env를 먼저 설치한다.

$ yarn add --dev cross-env

그 다음 package.json의 build 스크립트와 start 스크립트를 수정한다.


{
  "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build"
  }
}

위 방법은 향후 없어질 방법(혹은 이미 없어진 방법)이므로 정상적으로 동작하지 않을 수도 있다. 비교적 최신 버전의 리액트를 사용하면 아래와 같은 경고 문구가 뜬다.

Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.