프로젝트 세팅 - router, path 작성

마음에 드는 웹앱 템플릿이 있어서 그거 다운받고 프로젝트를 세팅하는 과정에서 도대체 path를 어떻게 설정하는지 몰랐다.

30분 정도 헤매는 과정에서 얻은 결과... 

어어어어쨌든 성공은 했쥬,,,?

일단 의도한 결과는 나온것이므로 그 과정을 까먹기 전에 작성할련다. 난 금붕어니까...🐟

 

1. vite.config.ts에 alias로 @ 설정하기

난 이거 자동으로 되는 지정어인줄 알았더니 내가 셀프로 설정해야 하는거더라?;

어쨌든 alias로 설정해줬다.

여기서 path란 내 파일에 있는 paths.ts가 아닌(난 이건줄 알았음 그럴리가 없는데 ㅋㅎ) Node.js의 내장 모듈인 path를 의미한다. Vite설정 파일은 Node.js환경에서 실행되지만 Typescript가 path모듈 타입 선언을 찾지 못해서 계속 빨간줄이 나타났다.

➡️고로 @types/node 패키지를 설치할 것! 난 아래 명령어로 설치했더니 정상적으로 됬다.

위 패키지(@types/node)를 설치해야 'path'와 'url' 내장 모듈을 사용할 수 있으므로 반드시 설치할 수 있도록 한다!

 

정상적으로 패키지가 설치되었다면 'path'와 'url'을 사용할 수 있을 것이다.

url에서 fileURLToPath를 import하고, __filename과 __dirname을 선언한다. 

그리고 vite.config.ts에 있는 defineConfig안에 다음과 같은 설정을 작성한다.

깔끔따리 잘 작성했다. 히히!

 

2. tsconfig.json에도 path 작성하기

다음과 같이 얌전따리 잘 작성하도록 하자.

 

3. router폴더 안 파일들에서 경로를 작성하기

(1) sitemap.ts

path에 경로 잘 지정해주고,

 

(2) paths.ts

여기서도 /pages/journal처럼 나오도록 세팅 하고,

 

(3) router.tsx

const Journal = lazy(() => import('@/pages/journal'));

const router = createBrowserRouter(
... 생략,
children: [
            {
              index: true,
              element: <Dashboard />,
            },
            {
              path: '/pages/journal',
              element : <Journal />,
            }
          ],
)

 

저렇게 Journal의 path를 /pages/journal이 나오도록 잘 설정한다...

 

 

끝!