🖥️ React로 포트폴리오 사이트 만들기 (배포까지)

 

이번 글에서는 React를 사용하여 나만의 포트폴리오 사이트를 만드는 방법과 GitHub Pages 및 Netlify를 통해 간편하게 배포하는 방법을 실전 중심으로 소개하겠습니다.

🚩 포트폴리오 사이트 구성하기

React로 포트폴리오 사이트를 만들 때는 다음과 같은 구성을 추천합니다.

• 홈 페이지: 소개 및 핵심 역량 강조
• 프로젝트 페이지: 본인의 주요 프로젝트와 기술 스택 소개
• 연락처 페이지: 소통할 수 있는 연락처 또는 소셜 링크

✅ 실전 포트폴리오 제작 예시

CRA(Create React App)를 통해 빠르게 시작해 봅시다.

npx create-react-app my-portfolio
cd my-portfolio
npm start

🚀 GitHub Pages로 포트폴리오 배포하기

GitHub Pages는 정적 페이지를 무료로 배포할 수 있는 가장 쉬운 방법입니다.

1. gh-pages 설치

npm install gh-pages --save-dev

2. package.json에 배포 설정 추가

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "homepage": "https://{username}.github.io/{repository-name}"
}

3. 배포 실행

npm run deploy

🎯 Netlify로 포트폴리오 배포하기

Netlify는 간편한 배포, 자동 배포 설정, 맞춤 도메인 설정 등 강력한 기능을 제공합니다.

Netlify 배포 절차

1. Netlify 사이트에 가입하고 로그인합니다.
2. "New site from Git"을 클릭하여 GitHub 저장소를 연결합니다.
3. 빌드 명령어와 배포할 디렉터리를 지정합니다. (기본적으로 CRA는 build 디렉터리입니다.)
4. "Deploy site"를 클릭하여 간단히 배포합니다.

📌 배포 시 유의할 점

• GitHub Pages와 Netlify 모두 배포 전 로컬에서 build가 성공적으로 진행되는지 확인하세요.
• 페이지가 정상적으로 표시되지 않는다면 URL 경로 설정과 package.json의 homepage를 재확인하세요.

🎈 마무리

지금까지 React를 이용한 포트폴리오 사이트 제작과 손쉬운 배포 방법을 알아보았습니다. 직접 실습해 보면서 멋진 나만의 포트폴리오를 완성해 보세요!