React와 TypeScript로 제작된 개인 포트폴리오 웹사이트입니다.
https://ktshas.github.io/front_portfolio_resume
- React 19.1.1 - 사용자 인터페이스 구축
- TypeScript 4.9.5 - 타입 안전성 보장
- React Router DOM 7.9.1 - 페이지 라우팅
- Styled Components 6.1.19 - CSS-in-JS 스타일링
- Framer Motion 12.23.13 - 애니메이션 효과
- Lucide React 0.544.0 - 아이콘 라이브러리
- Create React App - 프로젝트 설정 및 빌드
- GitHub Pages - 웹사이트 호스팅
- gh-pages 6.3.0 - GitHub Pages 배포 자동화
portfolio-project/
├── public/ # 정적 파일들
│ ├── index.html # HTML 템플릿
│ ├── favicon.ico # 웹사이트 아이콘
│ └── *.pdf # 이력서/포트폴리오 PDF 파일들
├── src/
│ ├── App.tsx # 메인 앱 컴포넌트 (라우팅 설정)
│ ├── index.tsx # React 앱 진입점
│ ├── App.css # 전역 스타일
│ ├── index.css # 기본 CSS 설정
│ ├── theme.ts # 테마 설정 파일
│ ├── components/ # 재사용 가능한 컴포넌트들
│ │ ├── shared/ # 공통 컴포넌트
│ │ │ ├── GlobalHeader.tsx # 전역 헤더 (네비게이션)
│ │ │ ├── LocalHeader.tsx # 로컬 헤더
│ │ │ └── PortfolioNavigation.tsx # 포트폴리오 네비게이션
│ │ └── ui/ # UI 컴포넌트
│ │ ├── AddressSearch.tsx # 카카오 API 주소 검색
│ │ ├── Button.tsx # 버튼 컴포넌트
│ │ ├── Calendar.tsx # 달력 컴포넌트
│ │ ├── Card.tsx # 카드 컴포넌트
│ │ ├── PDFViewer.tsx # PDF 뷰어 컴포넌트
│ │ ├── ScheduleForm.tsx # 스케줄 등록 폼
│ │ └── UpcomingSchedule.tsx # 다가오는 스케줄 표시
│ ├── services/ # API 서비스
│ │ └── kakaoApi.ts # 카카오 API 연동
│ ├── types/ # TypeScript 타입 정의
│ │ └── schedule.ts # 스케줄 관련 타입
│ └── pages/ # 페이지 컴포넌트들
│ ├── resume/ # 이력서 페이지
│ │ ├── Resume.tsx # 이력서 메인 페이지
│ │ └── sections/ # 이력서 섹션들
│ │ ├── Hero.tsx # 프로필 섹션
│ │ ├── About.tsx # 소개 섹션
│ │ ├── Experience.tsx # 경력 섹션
│ │ ├── Skills.tsx # 기술 스택 섹션
│ │ └── Footer.tsx # 푸터 섹션
│ ├── portfolio/ # 포트폴리오 페이지
│ │ ├── Portfolio.tsx # 포트폴리오 메인 페이지
│ │ ├── PortfolioMain.tsx # 포트폴리오 홈페이지
│ │ ├── work/ # 실무 포트폴리오
│ │ │ └── WorkPortfolio.tsx # 실무 포트폴리오 페이지
│ │ └── running/ # 러닝 스케줄 프로젝트
│ │ ├── RunningSchedule.tsx # 러닝 스케줄 메인
│ │ ├── ScheduleDetail.tsx # 스케줄 상세 페이지
│ │ └── components/
│ │ └── WeatherCard.tsx # 날씨 정보 카드
│ └── contact/ # 연락처 페이지
│ └── Contact.tsx # 연락처 폼
├── package.json # 프로젝트 설정 및 의존성
└── tsconfig.json # TypeScript 설정
- 메인 애플리케이션 컴포넌트
- React Router를 사용한 페이지 라우팅 설정
- GitHub Pages 배포를 위한 basename 설정:
<Router basename="/front_portfolio_resume">
- React 애플리케이션의 진입점
- ReactDOM.render로 App 컴포넌트를 DOM에 마운트
- 프로젝트 의존성 및 스크립트 정의
- GitHub Pages 배포 관련 설정:
{ "homepage": "https://ktshas.github.io/front_portfolio_resume", "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } }
- 전역 네비게이션 헤더
- 페이지 간 이동을 위한 메뉴
- 이력서의 각 섹션을 담당하는 컴포넌트들
- Hero, About, Experience, Skills, Footer로 구성
주소 검색 기능을 사용하려면 카카오 API 키가 필요합니다.
-
.env파일 생성 프로젝트 루트에.env파일을 생성하고 다음 내용을 추가하세요:KAKAO_REST_API_KEY=your_kakao_rest_api_key_here -
카카오 API 키 발급
- 카카오 개발자 콘솔 접속
- 애플리케이션 생성 또는 기존 앱 선택
- 제품 설정 → 카카오맵 → OPEN_MAP_AND_LOCAL 서비스 활성화
- 앱 키에서 REST API 키 복사
-
보안 주의사항
.env파일은 절대 Git에 커밋하지 마세요.gitignore에.env파일이 포함되어 있는지 확인하세요- 실제 API 키는 GitHub에 노출되지 않도록 주의하세요
npm start- 개발 모드로 앱 실행
- http://localhost:3000 에서 확인 가능
- 코드 변경 시 자동 새로고침
npm run build- 배포용 최적화된 빌드 생성
build/폴더에 결과물 생성
npm test- Jest 테스트 러너 실행
- 인터랙티브 모드로 실행
gh-pages패키지 설치package.json에 homepage URL 설정- 배포 스크립트 추가
App.tsx에 basename 설정
npm run deploy- 자동으로 빌드 후 GitHub Pages에 배포
gh-pages브랜치에 빌드 결과물 푸시
predeploy스크립트가 자동으로npm run build실행deploy스크립트가build/폴더를gh-pages브랜치에 푸시- GitHub Pages가 자동으로 웹사이트 업데이트
- 코드 수정
- Git 커밋 및 푸시 (선택사항, 소스 코드 백업용)
git add . git commit -m "변경 내용 설명" git push
- GitHub Pages 배포
npm run deploy
- Styled Components: CSS-in-JS로 컴포넌트별 스타일 관리
- theme.ts: 전역 테마 설정 (색상, 폰트 등)
- Framer Motion: 페이지 전환 및 애니메이션 효과
- 반응형 디자인: 모바일/태블릿/데스크톱 지원
- 다중 페이지: 이력서, 포트폴리오, 연락처 페이지
- PDF 뷰어: 포트폴리오 문서 온라인 뷰어
- 러닝 스케줄 관리: 개인 러닝 스케줄 등록 및 관리
- 카카오 API 연동: 실시간 장소 검색 및 좌표 정보 제공
- 날씨 정보: 러닝 스케줄에 따른 날씨 정보 표시
- 부드러운 애니메이션: Framer Motion 기반 전환 효과
- 타입 안전성: TypeScript로 런타임 오류 방지
- GitHub Pages 서브패스 배포 시 라우팅 문제는
App.tsx의basename설정으로 해결
- 배포 후 변경사항이 보이지 않을 때는 브라우저 캐시 삭제 또는 시크릿 모드 사용
프로젝트 관련 문의사항이 있으시면 GitHub Issues를 통해 연락해 주세요.