Portfolio Page with React - 1 | 리액트 환경 구축

Portfolio Page 프로젝트

지금까지 크던 작던 만들어왔던 프로젝트들을 한 곳에 보기 좋게 전시하고 싶다는 생각이 문득 들었다. 하나하나 모으다 보면 내 경력도 될 것이고, 개발 공부를 함에 있어서 원동력도 될 것이라 생각한다.

 

주변에 많은 사람들이 사용하는 좋은 포트폴리오 서비스들이 많지만, 이왕이면 웹 개발을 주력으로 공부하는 입장에서 포트폴리오 페이지 정도는 혼자서 만들어 써야 하지 않냐는 생각이 들었다.

부끄럽게도 지금까지 리액트를 자주 써오면서도 항상 프로젝트를 끝까지 진행하지 못해 배포는 해본 경험이 없기에, 이번에는 리액트로 포트폴리오 페이지를 배포하는 부분까지 진행하고자 한다.

---

기본 설정

현재 Windows 환경의 데스크톱을 사용 중이지만, 개발 공부를 할 때는 WSL을 이용해 Ubuntu 기반의 리눅스 환경을 사용하고 있다.

개발 디렉터리 생성 및 리액트 프로젝트 생성

cd ~/Project
npx creat-react-app portfolio-with-react

여러 프로젝트를 할 때마다 사용했던 Project폴더에 create-react-app을 사용하여 리액트 프로젝트를 시작한다.

github와 연결

git remote github https://github.com/pokycookie/Portfolio-Page-with-react.git
git branch -m master main
git push github +main

• create-react-app으로 생성된 디렉터리에 .git파일이 이미 자동으로 생성되어 있으므로, git init은 생략함
• github에서는 master대신 main을 default branch로 사용하기에, branch -m으로 branch명 변경

github와 연결까지 마쳤다. 근데 왜 연결이 바로 되는 건지 모르겠다. 비밀번호도 안쳤는데 말이다.

예전에 뭔가 설정해둔 게 있었던 것 같기는 한데 잘 모르겠다. 다시 알아봐야겠다... (되는 게 더 무섭다.)

scss 사용

이번 프로젝트에서는 왠지 기본 css가 아닌 scss를 사용하고 싶어졌다. 이를 위해 node-sass를 설치한다.

npm i node-sass

분명히 sass를 사용하려면 매우 끔찍한 준비과정이 있었던 걸로 기억하는데, 이상하게 이것만 설치했는데도 잘된다.

역시나 아무 문제없이 돌아가니까 더 무섭다. (Webpack과 같은 번들러에 대한 공부가 필요할 것 같다.)

---

Page 간단히 꾸미기

리액트 프로젝트를 배포하기 전 아래와 같이 간단하게 페이지를 꾸며보았다.

App.js

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>PORTFOLIO</p>
      </header>
      <nav>
        <ul>
          <li>
            <a href="#">Category1</a>
          </li>
          <li>
            <a href="#">Category2</a>
          </li>
          <li>
            <a href="https://pokycookie.tistory.com/" target="_blank">
              Tistory Blog
            </a>
          </li>
        </ul>
      </nav>
      <main></main>
    </div>
  );
}

export default App;

index.scss

@import "reset.scss";

$color-white: #fdf6ec;
$color-skyBlue: #b7cadb;
$color-clearBrown: #f3e9dd;
$color-darkBrown: #dab88b;
$color-brown: #e6d5b8;

body {
  background-color: $color-white;
}

.App {
  header {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    background-color: $color-darkBrown;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30px;

    p {
      font-weight: 600;
      font-size: 40px;
    }
  }

  nav {
    width: 100%;
    height: 50px;
    background-color: $color-clearBrown;
    box-sizing: border-box;

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      li {
        flex: 1;
        height: 100%;

        a {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: black;
          font-weight: 600;
          font-size: 14px;
          &:hover {
            background-color: $color-brown;
          }
        }
      }
    }
  }

  main {
  }
}

---

배포

우선 간단하게 github에서 제공하는 GitHub Pages 서비스를 이용해 해당 리액트 프로젝트를 배포해 보려고 한다.

build

ceate-react-app을 이용해 생성한 리액트 프로젝트는 배포하기 전 build의 과정을 거친다.

npm run build

이후 build가 끝나면, 새롭게 생성된 build 디렉터리에 있는 파일들을 github에 push해야 한다.

이를 위해 .gitignore 파일의 /build 부분을 제거한다.

git add .
git commit -m "build directory"
git push github main

GitHub Pages

GitHub Pages는 gh-pages라는 특정 branch를 이용해 정적 파일들을 보여준다.

따라서 build 폴더만 새로운 Branch에 업로드한다.

git subtree push --prefix build/ github gh-pages

package.json

"homepage": "https://pokycookie.github.io/Portfolio-Page-with-react"

GitHub Pages에서 제공하는 url을 프로젝트의 package.json에 입력한다. (git push하기 이전에 해야함)