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

이제 react로 페이지를 만들기 위해 필요한 것들을 설치하고, 기본적인 코드를 작성해 봅니다.

필요한 것은 react , react-dom , react-router-dom 입니다.

1. 설치 및 코드 작성

npm install --save react react-router-dom react-dom

설치를 해줍니다.

index.html 의 body 태그안에 id가 App 인 div 태그를 추가 해줍니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="App"></div>
  </body>
</html>

index.js 에서 index.html에있는 #App 에 렌더링 해줄수 있도록 코드를 작성합니다.

// index.js
// modules
import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom";

// Elements
const rootDomElement = document.getElementById("App");
const rootRenderElement = createRoot(rootDomElement);
const rootJsxElement = (
  <BrowserRouter>
    <div>test</div>
  </BrowserRouter>
);

// Rendering

if (rootDomElement.hasChildNodes()) {
  ReactDOM.hydrate(rootJsxElement, rootDomElement);
} else {
  rootRenderElement.render(rootJsxElement);
}

우선은 ,. BrowserRouter안에 test를 찍어 봤습니다.

2. dev server 실행

터미널에 npm run dev 로 webpack-dev-server를 실행해 봅니다.

npm run dev

아주 잘 실행 되네요 ㅎㅎ

너무나 간단하게 실행이 됩니다.

index.js 에 작성된 코드들을 설명하는 부분은 따로 글을 작성해 볼까합니다.

What is Next?

react의 버전이 올라가면서 사용되는 함수들도 많이 바뀐거 같습니다.

이제 github에 repository를 만들어서 빌드된 파일을 올려 봅니다.

끝!