[React] Github page로 포트폴리오 웹페이지 만들기 #10 Route 설정-1 / 설정 변경 및 파일 변경

Github page로 포트폴리오 웹페이지 만들기

---

이제 about과 work 페이지를 만들어 route 설정을 통해서 접속 할수 있게끔 해주어야 합니다.

그전에 현재까지 진행된 사항 중 몇가지 설정을 변경 시켜 주겠습니다.

1. webpack resolve alias

---

npm 으로 설치된 모듈이외에 css나 svg 또는 component 파일들을 import 시킬때 상대 경로를 이용해 불러오고 있습니다.

// example

import GITHUB from "./resources/images/common/GITHUB.svg";

파일의 위치를 옮겨 줄때 만다. 경로를 변경 해줘야하는 번거로움이 생기므로 webpack의 resolve 설정에 alias를 추가 해 줍니다.

// webpack.config.js
...
resolve: {
    extensions: [".js", ".json", ".wasm"],
    alias: {
      "@pages": path.resolve(__dirname, "src", "pages"),
      "@resources": path.resolve(__dirname, "src", "resources"),
      "@components": path.resolve(__dirname, "src", "components"),
    },
  },
...

이 설정을 통해서 특정 경로들을 지정한 별칭을 통해 불러 올수있습니다.

2. Main.js 이동 및 파일 만들기

---

Main.js 파일을 src→ Main.js 에서 pages 디렉토리를 만들어 src→pages→main→index.js 로 변경해 줍니다.

이후 pages 디렉토리 안에 about 와 work를 만들어 각 디렉토리 안에 index.js파일을 만들어 줍니다.

index.js파일을 만들어 사용하면, import 시에 디렉토리 이름까지 작성하여 index.js에서 export된 것들을 불러 올수 있습니다.

이제 Main.js에서 변경된 main→index.js 의 모듈 경로들을 변경해 줍니다.

// src/pages/main/index.js
...
// SVG
import HIIO420 from "@resources/images/common/HIIO420.svg";
import ABOUT from "@resources/images/common/ABOUT.svg";
import WORK from "@resources/images/common/WORK.svg";
import BLOG from "@resources/images/common/BLOG.svg";
import GITHUB from "@resources/images/common/GITHUB.svg";

import {
  FlexCenterLayout,
  FlexLayout,
  GridColumnLayout,
} from "@resources/globalStyle";

마찬가지로 App.js에서 import 된 Main component의 경로도 수정해 줍니다.

// App.js

// css
import "@resources/css/app.css";

// Pages
import Main from "@pages/main";

3. about / work 밑작업

---

Route에 설정할 about과 work 안에 있는 index.js에 각각 About, Work component들을 정의해 export 시켜 줍니다.

// src/pages/about/index.js

import React from "react";

const About= () => {
  return <></>;
};

export default About;

// src/pages/work/index.js

import React from "react";

const Work = () => {
  return <></>;
};

export default Work;

아직은 아무것도 없지만, 차차 채워 나가 보도록 하겠습니다.

이제 생성한 component들을 App.js에서 route에 추가 해 줍니다.

//App.js
...
		<Routes>
      <Route exact path="/" element={<Main />}></Route>
      <Route exact path="/about" element={<About />}></Route>
      <Route exact path="/work" element={<Work />}></Route>
    </Routes>

마지막으로 main→ index.js의 about 과 work의 링크를 등록한 route의 경로로 변경해 줍니다.

// src/pages/main/index.js
...

				<SvgWrapper>
          <Link to="/about">
            <ABOUT />
          </Link>
        </SvgWrapper>
        <SvgWrapper justifyContent="center">
          <Link to="/work">
            <WORK />
          </Link>
        </SvgWrapper>

What is Next?

---

짧지만, 새로운 페이지를 만들기 위한 밑작업으로 새로운 파일을 만들고, 기존의 파일을 이동, 수정 했습니다.

이제 Work와 About을 하나둘씩 채워가면 점점 마무리가 될거 같습니다.

하하하.

끝!!!