JeonYB 이력서 프로젝트

JeonYB의 개인 이력서를 웹사이트 형태로 구현한 프로젝트입니다. React와 TypeScript를 사용하여 개발되었으며, AWS 인프라(S3, CloudFront)를 통해 배포됩니다.

📋 프로젝트 개요

• Frontend: React, TypeScript, Tailwind CSS로 구성된 SPA (Single Page Application)
• Backend: AWS Lambda, API Gateway를 통한 동적 기능 제공 (예정)
• Infrastructure: Terraform을 통한 AWS 리소스 관리
• Deployment: S3를 통한 정적 호스팅, CloudFront를 통한 CDN 배포

🏗️ 프로젝트 구조

about-me2/
├── web/                          # 프론트엔드 React 애플리케이션
│   ├── src/
│   │   ├── components/          # 재사용 가능한 컴포넌트
│   │   │   ├── Header.tsx
│   │   │   ├── Hero.tsx
│   │   │   ├── Experience.tsx
│   │   │   ├── Skills.tsx
│   │   │   ├── CaseStudies.tsx
│   │   │   └── Footer.tsx
│   │   ├── pages/              # 페이지 컴포넌트
│   │   ├── types/              # TypeScript 타입 정의
│   │   └── utils/              # 유틸리티 함수
│   ├── package.json
│   └── vite.config.ts
│
├── terraform/                   # Terraform 인프라 코드
│   ├── about-me2/
│   │   ├── main.tf             # 메인 리소스 정의
│   │   ├── var.tf              # 변수 정의
│   │   └── setTFVal.sh         # Terraform 환경 변수 (git 제외)
│   └── modules/
│       └── cloudfront/         # CloudFront 모듈
│
├── 00.buildAndUploadStatic.sh  # 빌드 및 배포 스크립트
├── setDeployVal.sh             # 배포 환경 변수 (git 제외)
└── README.md

🚀 시작하기

사전 요구사항

• Node.js: v18 이상
• npm: v9 이상
• Terraform: v1.0 이상
• AWS CLI: 최신 버전
• AWS 계정: 배포를 위한 적절한 권한

1. 프론트엔드 개발 환경 설정

# web 디렉토리로 이동
cd web

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

개발 서버는 http://localhost:5173에서 실행됩니다.

2. 인프라 설정 (Terraform)

2.1 환경 변수 파일 생성

terraform/about-me2/setTFVal.sh 파일을 생성하고 다음 내용을 추가합니다:

#!/bin/bash

export TF_VAR_aws_region="ap-northeast-2"
export TF_VAR_environment="production"
export TF_VAR_s3_bucket_name="your-bucket-name"
export TF_VAR_s3_logging_bucket_id="your-logging-bucket"
export TF_VAR_acm_certificate_domain="*.your-domain.com"
export TF_VAR_cloudfront_domain_name="your.domain.com"

2.2 Terraform 실행

# terraform 디렉토리로 이동
cd terraform/about-me2

# 환경 변수 설정
source setTFVal.sh

# Terraform 초기화
terraform init

# 계획 확인
terraform plan

# 적용
terraform apply

3. 배포 환경 변수 설정

프로젝트 루트에 setDeployVal.sh 파일을 생성하고 다음 내용을 추가합니다:

#!/bin/bash

export S3_BUCKET="your-bucket-name"
export S3_PATH="your-path/"
export CLOUDFRONT_DISTRIBUTION_ID="your-distribution-id"

4. 빌드 및 배포

# 프로젝트 루트로 이동
cd /path/to/about-me2

# 배포 환경 변수 설정
source setDeployVal.sh

# 빌드 및 S3 업로드, CloudFront 무효화
./00.buildAndUploadStatic.sh

🛠️ 기술 스택

Frontend

• React 18: UI 프레임워크
• TypeScript: 타입 안정성
• Vite: 빌드 도구
• Tailwind CSS: 스타일링
• ESLint: 코드 품질 관리 (Airbnb Style Guide)

Infrastructure

• AWS S3: 정적 웹사이트 호스팅
• AWS CloudFront: CDN 및 HTTPS 지원
• AWS ACM: SSL/TLS 인증서
• Terraform: Infrastructure as Code

Backend (예정)

• AWS Lambda: 서버리스 함수
• API Gateway: RESTful API

📄 주요 스크립트

Web (frontend)

npm run dev        # 개발 서버 실행
npm run build      # 프로덕션 빌드
npm run preview    # 빌드 결과 미리보기
npm run type-check # TypeScript 타입 체크
npm run lint       # ESLint 실행

Deployment

./00.buildAndUploadStatic.sh  # 전체 빌드 및 배포 프로세스

🔒 보안 고려사항

• ✅ S3 버킷은 Private 설정, CloudFront를 통해서만 접근 가능
• ✅ CloudFront Origin Access Identity (OAI) 사용
• ✅ HTTPS 강제 적용 (ACM 인증서)
• ✅ 민감한 정보는 환경 변수로 관리 (setTFVal.sh, setDeployVal.sh)
• ✅ 환경 변수 파일은 .gitignore에 등록하여 Git에 포함되지 않음

📝 개발 가이드라인

• 코드 스타일: Airbnb JavaScript Style Guide 준수
• 비용 최적화: AWS 리소스 사용 시 비용 효율성 고려
• 보안: 최소 권한 원칙 적용
• 테스트: 주요 기능에 대한 단위 테스트 작성 (예정)

📄 페이지 구성

Home (단일 페이지)

• 소개: JeonYB의 자기소개
• 경력: 주요 경력과 프로젝트 경험
• 기술 스택: 사용 기술 및 숙련도
• 사례 연구:
  • 트러블슈팅 경험
  • 모니터링 강화 사례
  • 비용 최적화 사례
  • 개발자 편의도구 제작 사례

📞 문의

프로젝트 관련 문의사항이 있으시면 이슈를 등록해주세요.

📜 라이선스

ISC

👤 작성자

JeonYB