한동대학교 공식 글로컬 홈페이지

공식 서비스 도메인: https://glocal.handong.edu

HGU Glocal Website 는 한동대학교의 2024년 글로컬대학 30 최종 선정에 따라 제작된 공식 홈페이지입니다.
본 웹사이트는 학교의 글로컬 프로젝트를 소개하고, 학생 및 관계자 간의 원활한 소통을 지원하기 위해 개발되었습니다.

주요 기능:

• 📌 게시판 시스템 (공지사항, 커뮤니티 등)
• 🔐 사용자 인증 (로그인 / 회원가입)
• 🌍 다국어 지원 (한국어 & 영어)
• 📱 다양한 기기 지원 (반응형 UI)

• Framework:Next.js (React 기반 SSR/SSG 지원)
• Styling:CSS Modules (컴포넌트별 스타일 관리)
• State Management:Context API (전역 상태 관리)
• Internationalization:i18n (다국어 지원)
• API Request:Fetch API (REST API 연동)

• Framework:Spring Boot (백엔드 API 구축)
• Database:PostgreSQL (RDBMS)
• Authentication: JWT 기반 인증

• Version Control:Git & GitHub (소스 코드 관리)
• CI/CD: AWS 환경에서 배포 예정
• Infrastructure:AWS EC2 + RDS (PostgreSQL)

주요 역할

• React 및 Next.js 기반의 프론트엔드 UI 개발
• 사용자 인증 및 게시판 기능 제공
• 다국어(i18n) 지원 및 반응형 웹 구현
• Spring Boot 백엔드와의 API 통신 및 통합

코드의 일관성과 유지보수성을 높이고 원활한 협업을 위해 아래와 같은 규칙을 따릅니다.

• 인덴트: 2 spaces
• 세미콜론: 사용함 ;
• 따옴표: 더블 쿼트 "
• 함수형 컴포넌트 사용 권장 (const + 화살표 함수)
• 불필요한 console.log 지양

이미지

1. 이슈 생성
2. 브랜치 생성

git switch dev
git pull origin dev
git checkout -b feat#16

3. 커밋 & 푸시

git add .
git commit -m "feat: 로그인 기능 추가 (#16)"
git push origin feat#16

4. PR 생성 → 대상 브랜치: dev

   • PR 제목: Feat/#16 로그인 기능 추가
   • PR 본문: Resolve #16

5. 코드 리뷰 → PR 병합

6. 배포 전 release ← dev 병합

git switch release
git merge dev
git push origin release

./
├── api/
│ ├── apiClient.ts # Fetch 기반 공통 API 클라이언트 (accessToken 자동 처리)
│ └── domains/ # 도메인 기반 API 분리
│ ├── board/
│ │ ├── dtos/
│ │ │ ├── requests.ts
│ │ │ └── responses.ts
│ │ └── service.ts
│ └── ...
├── auth/ # 인증 관련 로직
├── config/ # 링크 및 설정 정보
├── contexts/ # Context API 관련
├── hooks/ # 커스텀 훅 모음
├── locales/ # 다국어 지원
│ ├── en.json
│ ├── ko.json
│ └── lib/
│ └── i18n.ts
├── pages/ # Next.js 라우트 페이지
│ └── contents/board/... # 게시판 종류별 페이지 구조
├── widgets/ # 재사용 UI 및 구조적 컴포넌트
│ ├── components/
│ └── structures/
├── utils/ # 유틸 함수
├── layout.tsx # 공통 레이아웃
├── globals.scss # 전역 스타일
└── favicon.ico

• 번역 JSON: locales/en.json, locales/ko.json
• 설정 파일: locales/lib/i18n.ts
• 언어 상태: useLanguage.tsx

• IaC 도구: Terraform

  • 디렉토리 구조: dev/, prod/, modules/로 분리하여 환경별 구성 관리
  • modules/ 디렉토리에는 vpc, subnet, ec2, nat, rds, sg, s3 등 공통 인프라 리소스를 모듈화하여 재사용성과 유지보수성 향상
  • Dev/Prod 환경에 맞는 변수만 주입하여 동일한 구조를 효율적으로 분기 구성
  • 모든 리소스는 선언형 코드 기반으로 자동 생성/삭제 가능

• 네트워크 구조:

  • Dev: ALB 기반 퍼블릭 접근 구조, 프론트/백엔드 테스트 서버는 프라이빗 서브넷에 위치하며 Bastion 서버를 통해 접근
  • Prod: Elastic IP를 활용한 고정 IP 기반 배포, 프론트엔드 서버는 퍼블릭 서브넷에 위치하여 외부 접근 허용, 백엔드 서버는 프라이빗 서브넷에 위치해 내부 통신만 가능
  • Bastion 서버는 각각의 퍼블릭 서브넷에 구성되어, Dev/Prod의 모든 프라이빗 리소스에 보안 터널링 지원
  • SSL 인증서 적용 및 HTTPS 구성:
    • 학교에서 발급한 인증서(.crt, .key, ca_bundle)를 EC2 서버에 직접 등록하고, Nginx에 수동 적용하여 HTTPS 제공
    • Nginx 설정에서 ssl_certificate, ssl_certificate_key, ssl_trusted_certificate 등을 직접 구성
    • CSP 위반, 400 에러, 인증서 유효성 문제 등 발생 이슈들을 디버깅하여 해결
    • 고정 IP 기반 배포 환경에서의 SSL 적용

• CI 도구: GitHub Actions

  • develop → release 브랜치 전략 기반 CI/CD 파이프라인 설계
  • Secrets 관리로 민감 정보 보호 (ex. .env.production, application-secret.properties)

• CD 방식:

  • Frontend:

    • .env.production은 GitHub Secrets에서 복호화 후 이미지 빌드시 반영
    • docker system prune으로 배포 시 캐시 자동 정리
    • Nginx 설정으로 보안 헤더 및 백엔드와 내부 통신 처리
    • HTTPS 적용 후 CSP 정책 및 cross-origin 이슈 해결

  • Backend:

    • EC2 서버에 application-secret.properties 파일 동적 생성 및 마운트
    • 컨테이너 재실행 전 ECR 최신 이미지 pull 및 기존 컨테이너 제거

• 보안 강화:

  • OWASP ZAP 취약점 점검 자동화
  • 고정 IP 기반 취약점 보고서 생성 및 관리자 제출 완료
  • CSP, X-Frame-Options, Referrer-Policy 등 Nginx 보안 헤더 설정 완료
  • HTTPS 및 인증서 기반 보안 통신 구성을 통해 사용자 신뢰성과 운영 안정성 확보