hjkim1004/hjkim1004.github.io

Twinkle's Portfolio

0. Environments

• node: v18.15.0, react: v18.2.0
• DVCS: git, Server: GitHub
• CI/CD: Github Actions

1. Github Pages + React 😊

1.1 Why choose these stack ❤️

풀스택 개발자라기엔 부끄럽지만, 저는 React 프로젝트 경험이 없습니다. (소스가 예쁘지 않아도 양해부탁해요🫡)

그치만 포토폴리오 페이지를 React 기술을 바탕으로 개발해보고자 합니다. 도전~~!🙌

Github Pages

우선 GitHub Pages를 선택한 이유는 <호스팅, 도메인, 서버> 등 동적 페이지를 개발 및 유지하기 위해 필요한 모든 비용이 필요 없기 때문입니다.

대신 가장 큰 단점이 정적 리소스(html, css, js, 등) 만이 가능하다는 점이죠.

Why React?

순수 정적 리소스로 개발하자니 서버 개발자로서는 생각외로 불편한 점이 많더라구요.

• IDE를 쓰기에도 애매하고 ⇒ Notepad를 써야되나..?
• 관리하기도 불편하고 ⇒ html 통채로 수정해야 되니까, 파일분리도 어려움
• 무엇보다 개발자로서 멋이 없다 ⇒ 간지에 죽고 사는 개발자로선 용납할 수 없다🤦‍♀️

React로 개발하면 러닝커브를 감당할 만큼 위의 문제들이 해소되고, 다양한 경험을 해볼 수 있는 기회기 때문에 기술 스택을 선정하게 되었습니다!

React로 개발하면 gh-pages의 지원으로 개발 소스와 배포 파일 프로젝트를 분리하지 않아도 되는 장점이 매력적인 것 같습니다.

1.2 How to run react app with github pages ❤️

github pages에서 react 앱을 배포하는 방법을 설명합니다.

1) repository 생성

우선, 자신의 계정으로 된 github pages repository를 생성합니다. ⇒ {계정명}.github.io

2) React Project 및 Local Git Repository 생성

# React Project 생성
$ npx create-react-app {계정명}.github.io --template typescript

# Local Git 설정
$ git init
$ git add .
$ git commit -m "Initial Commit"

# Server에 P올리기
$ git remote add origin https://github.com/{username}/{repository-name}.git
$ git push origin master

3) gh-pages 패키지 설치

react 앱을 github pages에 배포하도록 도와줄 gh-pages 패키지를 설치합니다.

$ npm install --save gh-pages

4) package.json 파일 수정

root에 homepage 프로퍼티에 호스팅 될 github pages 경로를 넣어줍니다.

{
  "name": "hjkim1004.github.io",
  "version": "0.1.0",
  // -------- homepage 프로퍼티 추가 --------- //
  "homepage": "https://hjkim1004.github.io",
  // --------------------------------------- //
  "private": true,
  "dependencies": {},
  "scripts": {
  // --- predeploy 및 deploy 스크립트 추가 --- //
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
  // --------------------------------------- //
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

5) React App 배포

마지막으로 React 앱을 deploy합니다.

$ npm run deploy

6) GitHub Repository 설정

Repository의 [Settings > Pages > Build and deployment]에서 Branch를 master에서 gh-pages로 변경합니다.

변경 후에는 https://{계정명}.github.io에서 배포된 사이트를 보실 수 있습니다.

1.3 CI/CD with Github Actions ❤️

틈날때마다 다양한 환경에서 개발하다 보니, 배포가 상당히 귀찮고 번거로워 GitHub Actions으로 간단하게 CI/CD를 구축해보았습니다.

Github Actions ✨

Github Actions란 깃허브에서 제공하는 워크플로우 (순차작업)를 자동화하도록 도와주는 도구입니다. 테스트, 빌드, 배포 등의 다양한 작업들을 자동화하여 처리합니다.

New Workflow

.github/workflows 폴더에 .yml 파일을 추가하거나, [Repository > Actions > New workflow]를 통해 워크플로우를 등록할 수 있습니다.

workflow 파일의 다양한 문법은 링크에서 보실 수 있습니다.

gh-pages workflow

nodejs가 v18.15.0 버전이라, 아래와 같이 workflow 파일을 구성했습니다.

name: Node.js CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]
        
    steps:
    - uses: actions/checkout@v3
    - name: Setup Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
        
    - name: Intall Dependencies
      run: npm install
      
    - name: Build Projects
      run: npm run build
      
    - name: Deploy Docs
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GH_ACTIONS_TOKEN }}
        publish_dir: ./build

Secrets 관리

코드에 있는 ${{ secrets.GH_ACTIONS_TOKEN }}에 값을 넣기 위해서는 [Repository > Settings > Secrets and variables > Actions]에서 Secret Key를 관리할 수 있습니다.

---

2. Start React App 😊

React 프로젝트를 생성하고, 포토폴리오 페이지 개발을 위한 추가 설정 내용들을 정리해보았습니다.

2.1 create project ❤️

node.js를 설치하고, 합니다.

$ node --version
v18.15.0

create-react-app패키지를 설치하고, React 프로젝트를 만듭니다.

$ npm install -g create-react-app
$ npx create-react-app {프로젝트명} --template typescript

• --template typescript 옵션: 해당 옵션을 사용하면, 타입스크립트를 세팅한 프로젝트를 생성할 수 있습니다. (저는 타입지정을 선호하기 때문에 해당 옵션을 넣었습니다.)

2.2 Path Configuration ❤️

webpack, babel을 이용해 모듈을 번들링하고, 모듈명을 변경할 수 있도록 세팅합니다.

절대 경로 vs 상대 경로

절대 경로 란 최상위 디렉토리가 반드시 포함 된 경로를 의미하며, 상대 경로 란 현재 디렉토리(비교 대상)를 기준으로 작성된 경로를 의미합니다.

// 상대 경로로 아바타 컴포넌트 불러오기
import Avatar from '../../../components/Avatar'

// 절대 경로로 아바타 컴포넌트 불러오기
import Avatar from 'components/Avatar'

webpack, babel

• 참고 블로그
• 추후 추가 예정

Edit tsconfig.json

typescript를 이용하는 경우, webpack 설정만으로는 Compile Error가 발생하므로, tsconfig.json에 아래 내용을 추가하여 절대경로를 이용할 수 있도록 설정합니다.

※ tsconfig.json 파일은 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일러 옵션을 지정하는데 사용합니다.

baseUrl 속성에 최상위 소스 디렉터리 경로를 넣어주고, paths 속성을 이용하여 사용할 경로명을 넣어줍니다.

{
  "compilerOptions": {
    // 최상위 소스 디렉터리 경로
    "baseUrl": "src",
    // 자신이 원하는 경로 설정 가능
    "paths": {
      "~/*": [
        "~/*"
      ],
      "@components/*": [
        "component/*"
      ],
      "@pages/*": [
        "page/*"
      ],
      "@assets/*": [
        "assets/*"
      ]
    }
  },
}

2.3 Router Configuration

React Router ✨

각 페이지별로 routing을 적용하기 위해서는 React Router를 이용해야합니다.

React Router의 패키지는 react-router (웹&앱), react-router-dom (웹), react-router-native (앱)으로 세가지가 있지만, 웹을 개발할 것이므로 react-router-dom을 설치합니다.

$ npm i react-router-dom # react-router 설치

※ 해당 버전은 react-router v6 이 바탕이 되었습니다.

BrowserRouter 🎶

React Router에는 HashRouter, StaticRouter, BrowserRouter등 여러가지 Router가 있지만, 그중에서도 URL이 깔끔한 BrowserRouter를 사용할 것입니다.

import React from 'react';
import { BrowserRouter, Route, Link, Routes } from "react-router-dom";

Import된 BrowserRouter, Route, Link, Switch는 아래와 같은 역할을 합니다.

• BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터입니다.
• Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링합니다.
• Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다.
• Routes - 자식 컴포넌트 Route또는 Redirect 중 매치되는 첫 번째 요소를 렌더링합니다. Routes를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다. 사용하지 않을 경우 매칭되는 모두를 렌더링합니다.

Example

<BrowserRouter>
    <div style={{padding:20, border:'5px solid gray'}}>
        <Link to="/">홈</Link><br/>
        <Link to="/profile">프로필</Link><br/>
        <Link to="/about">About</Link><br/>
        <Routes>
            <Route path="/" component={Home}/>
            <Route path="/photo" component={Photo}/>
            <Route path="/rooms" component={Rooms}/>
        </Routes>
    </div>
</BrowserRouter>

My App에 적용

최종적으로 프로그램 분기를 위해 App.tsx를 수정합니다. 아래와 같이 Navigation 및 Router를 설정해줍니다.

export default class App extends Component {
  render() {
    return (
      <div className="">
        <Header title="Twinkle's Portfolio" />
        <BrowserRouter basename={process.env.PUBLIC_URL}>
          <Navigation />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/project" element={<Project />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </BrowserRouter>
      </div>
    );
  }
}

---

Referecnes

아래 링크를 참고하세요.

• GitHub Actions 설정

• React 공식 홈페이지

• React Router 설정

• react-router-dom v6 업그레이드 되면서 달라진 것들