템플릿에서 module 버전 충돌

0) 템플릿을 사용한 이유

포트폴리오로 활용하기 위한 포트폴리오 웹페이지를 개발하면서 가능한 많은 것을 써보고 싶었고 그 중에서 실제 웹페이지를 구성할 때 필요한 것들을 공부하고 있었습니다.

그렇게 프론트 개발에 대해 공부하면서 알아보던 중 관리자 페이지 , admin 페이지가 있다는 것을 알았고 이 admin 페이지에 관해 구글링 해본 결과 상당히 많은 관리자용 템플릿들이 있다는 것을 알게 되었습니다.

( admin 페이지는 주로 쇼핑몰에 이용되는 것들이 많았고 이용자 조회, 상품관리 뿐만 아니라 다양한 레이아웃 형식까지 제공해주는 것을 확인하였습니다. )

그 중에서 star가 많고 다양한 기능을 제공하는 템플릿을 골라 이용해보기로 결정하였습니다

---

1) 템플릿 운영

그렇게 관리자용 페이지를 추가하고 난 뒤 어떻게 운영할지 고민하다가 기존 페이지와 통합시키는 것으로 결정했지만 현업에서는 따로 구분을 두어 운영한다고 알고 있습니다.

굳이 제가 구분을 두지 않은 이유는 운영하는 사람은 나 뿐이고 시중에 있는 여러 템플릿을 써보면서 발생하는 문제들을 겪어보고 싶어 현재 개발하고 있는 포트폴리오용 포트폴리오 사이트와 결합하는 것으로 결정하였습니다.

---

2) 모듈(Router) 버전 충돌

발생했던 첫 번째 문제는 Router의 버전 문제였습니다.

사실 저번에 겪어 본 적 있기도 하고 Router의 모듈 문제라는 점을 알았을 때 잘 해결할 수 있을거라고 자신하고 있었습니다. (라우터랑 많이 엮인다..)

//템플릿 코드의 일부
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";

// components
import Layout from "./Layout";

// pages
import Error from "../pages/error";

// context
import { useUserState } from "../context/UserContext";

export default function App() {
  // global
  var { isAuthenticated } = useUserState();

  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/app/dashboard" />} />
        <Route
          exact
          path="/app"
          render={() => <Redirect to="/app/dashboard" />}
        />
        <PrivateRoute path="/app" component={Layout} />
        <Route component={Error} />
      </Switch>
    </HashRouter>
  );

저번에 했던 경험을 살려 이거 switch와 Route의 관한 버전(v6 , v5) 문제라고 생각하고 버전업 시키기로 하였습니다.

---

3) 해결과정

switch를 수정하고 Route형식을 바꾸면 되겠구나라고 생각하여 as를 사용하여 수정할 수 있다라는 stackoverflow글을 보고 수정하기로 하였습니다

https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom

import { HashRouter, Route, Routes as Switch, Redirect } from "react-router-dom";

하지만 HashRouter라는 기능은 버전 v6에서는 더 이상 지원하지않고 다른 이름으로도 정의 되지 않았기 때문에 as를 사용하여 이름을 변경하는 것만으로는 해결 할 수 없게 되었습니다.

그래서 버전업을 해서 사용하려고 할 때 HashRouter의 기능을 알아보고 그대로 사용할지 말지를 고민하기로 하였습니다.

https://worker-k.tistory.com/entry/React-BrowserRouter와-HashRouter의-차이점-정리

고민해봤을 때 방법은 두 가지였습니다.

1. Router v5를 사용하고 템플릿에서 제공하는 기능을 가져가기
2. Router v6를 사용하고 직접 템플릿의 기능을 구현하기

여기서 저는 1번 Router v5를 사용하고 템플릿에서 제공하는 기능을 가져가기를 선택하였고 선택한 이유는 시간(기능 때문에 템플릿을 불러왔는데 내가 직접 구현해야하는 상황을 피하기 위해)과 성능(Router v6와 v5에 버전차이를 크게 못느꼈습니다.)때문에 선택하였습니다.

그래도 개인적으로는 가능한 최신 버전으로 구현하는 것이 좋지 않을까 생각합니다.

---

4) 해결

해결한 방법은 간단했습니다.

Router 버전에서 6을 5로 바꾼 뒤 다시 npm install을 해주게 된다면 버전이 다운그레이드 됩니다

이후에 제가 작성했던 v6 문법들을 v5로 이전에 둘 다 경험해봤기 때문에 금방 수정하게 되었습니다.

import { Switch as Routes, Route } from "react-router-dom";

function App() {
    return (
        <div>
            <Routes> 
                <Route exact={true} path="/">
                                    <component/>
                </Route>
            </Routes>
        </div>
    )
}

export default App

기존에 필요없는 부분은 다 지우고 간단하게 남기니 버전업해서 템플릿에 있는 코드를 찾아 수정하는 것 보다는 훨씬 쉬웠을거라고 생각합니다

---

5) 회고

템플릿을 가져오면서 이전에 모듈을 추가하는 것과 같이 간단하고 쉬울거라고 생각하고 있었지만 생각보다 수정하고 고려해봐야할 것들이 참 많았다고 생각합니다(사실 이것도 차후에 비하면 얼마 안될거라고 생각되지만) 하지만 이러한 개발방식과 템플릿을 추가해보는 과정은 나중에 규모가 큰 프로젝트나 현업에서 일하는 것들을 생각하면 꼭 필요하다고 생각했고 다시 삽질을 하게 되었을 때 조금 더 나은 결과로 이어질 수 있도록 이 글로 정리하게 되었습니다.