Portfolio Web Application

프로젝트 소개

React를 활용해 제작한 개인 포트폴리오 웹사이트입니다.

React Router를 이용해 여러 페이지를 구성하였으며,
Single Page Application(SPA) 구조로 구현했습니다.

소개, 프로젝트, 공모전, 경력, 다이어리 기능을 포함하여
컴포넌트 기반 구조 설계와 라우팅 이해를 목표로 제작했습니다.

---

사용 기술

• React
• React Router DOM
• JavaScript (ES6)
• CSS (App.css)

---

프로젝트 구조

src/
├─ App.js
├─ App.css
├─ background.jpg
├─ Store/
│ ├─ diarySlice.js
│ ├─ store.js
│ ├─ userSlice.js
├─ Component/
│ ├─ Introduction.js
│ ├─ Project.js
│ ├─ Contest.js
│ ├─ Career.js
│ ├─ Index.js
│ └─ Diary/
│ │ ├─ Diary.css
│ │ ├─ DiaryHome.js
│ │ ├─ DiaryItem.js
│ │ └─ DiaryForm.js
│ └─ Data/
│ │ ├─ careers.js
│ │ ├─ contests.js
│ │ ├─ intros.js
│ │ └─ projects.js
│ └─ Career/
│ │ ├─ Career1.jsx
│ │ ├─ Career2.jsx
│ │ └─ Career3.jsx
│ └─ Contest/
│ │ ├─ Contest1.jsx
│ │ ├─ Contest2.jsx
│ │ └─ Contest3.jsx
│ └─ Introducton/
│ │ ├─ Intro1.js
│ │ └─ Intro2.js
│ └─ Project/
│ │ ├─ Project1.jsx
│ │ ├─ Project2.jsx
│ │ ├─ Project3.jsx
│ │ └─ Project4.jsx
│ └─ Login/
│ │ └─ Login.js
└─ index.js

---

핵심 구현 내용

React Router 기반 페이지 구성

<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/introduction" element={<Introduction />} />
  <Route path="/project" element={<Project />} />
  <Route path="/contest" element={<Contest />} />
  <Route path="/career" element={<Career />} />
  <Route path="/diary" element={<DiaryHome />} />
  <Route path="/diary/new" element={<DiaryForm />} />
</Routes>

• Routes와 Route를 활용한 페이지 분리
• Link를 이용한 네비게이션 구현
• 새로고침 없이 화면이 전환되는 SPA 구조 구현

컴포넌트 기반 설계

• 각 페이지를 독립적인 컴포넌트로 분리
• 역할 단위로 파일 구조를 정리
• 확장성과 유지보수를 고려한 설계

레이아웃 구성

• Header / Navigation / Main / Footer 구조 설계
• 네비게이션 메뉴를 통한 직관적 이동 동선 구현
• App.css를 통해 전체 스타일 일관성 유지

다이어리 기능 추가

• /diary : 다이어리 목록 화면
• /diary/new : 작성 화면 분리
• 라우팅 기반 기능 확장 경험

---

프로젝트를 통해 배운 점

• React Router를 활용한 SPA 구조 이해
• 컴포넌트 분리 설계의 중요성 학습
• 라우팅 기반 기능 확장 경험
• 레이아웃 설계 및 UI 구성 경험

---

실행 방법

npm install
npm start

브라우저에서 http://localhost:3000 접속