dhslrl321 / PCUSS-Official-Site

👩🏻‍💻 배재대학교 SW 융합 대학 정보보안학과 공식 홈페이지

🔐 💻 🖥

배포 링크

cyber.pcu.ac.kr 에서 배재대학교 정보보안학과 자체 홈페이지를 확인해보세요.

혹은 검색 엔진(naver, google) 을 통해 배재대학교 정보보안학과를 검색하세요.

안녕

---

💻 배재대학교 정보보안학과 자체 홈페이지 🖥 🔐

📝 목차

1. 팀원 소개

2. 기획 배경 및 필요셩

• • 2-1 기회 의도
• • 2-2 서비스 목적

3. What is Challenging

• • 3-1 SEO를 위한 Next js의 도입
• • 3-2 Atomic Design Pattern과 Storybook
• • 3-3 Reverse Proxy를 더 잘 사용하기

4. 프로젝트 소개

• • 4-1 사용 기술
• • 4-3 배포 구조

5. User Interface

• • 5-1 Contents List
• • 5-2 UI Prototype By Adobe XD

6. Contributors

• • 6-1 Contents List

👨‍👩‍👧‍👦 팀원 소개

👨‍👨‍👧	개발자	개발자	개발자
Name	🧑‍💼 장원익	🦹🏻‍♀️ 허혜진	🧑‍💻 최재웅
Contact	기술 블로그, Github, 회고 블로그	Github	Notion, Github

🔖 기획 배경 및 필요성

📌 기획 의도

• 학교에서 제공하는 홈페이지가 아닌 학과 자체 홈페이지를 운영하기 위함

📌 서비스 목적

• 다음과 같은 사용자에게 서비스를 제공하기 위함
  • 정보보안학과 진학을 희망하는 예비 대학생
  • 보안 인력이 되고싶어 하는 10대

👩🏻‍💻 What is Challenging

SEO 를 위한 Next js의 도입

• Create-React-App 을 이용한 개발의 단점
• SPA 에서 SEO 안되는 문제 해결

Atomic Design Pattern 과 Storybook

• Atomic Design Pattern과 Storybook
• 재사용을 목적으로 한 컴포넌트
• 컴포넌트 UI 테스트

Reverse Proxy

• 무중단 배포를 위한 로드밸런싱
• 아쉬웠던 Reverse Proxy
  • 단지 무중단 배포를 위한 로드밸런싱으로만 사용했던 용도가 아쉬움
  • 보안적인 측면에서도 이용 예정
  • 다양한 설정 적용 예정

⛳️ 프로젝트 소개

📌 사용 기술

• Front-End
  • Next.js
  • React.js
  • Testing Library
    • Storybook.js
    • Jest
• Back-End
  • Spring boot
  • Spring Security
  • Spring Data JPA
  • Spring Hateoas
  • Spring REST Docs
  • Testing Library
    • JUnit5
• Infrastructure
  • Nginx
  • Docker
  • Docker-Compose
  • Ubuntu
• Etc
  • Git / Github
  • Gitflow
  • hub.docker.com
  • Adobe XD

📌 배포 구조

📐 User Interface

📌 Contents List

1. 홈 /
2. 커리큘럼 /curriculum
3. 졸업 후 진로 /carrer
4. 선배의 인터뷰 /interview
5. 학과 활동 /activity
6. 교수진 /professor
7. 학과 구성원 /member

📌 UI Prototype

Adobe XD를 이용하여 UI 프로토타입을 제작하였습니다.

👨‍👩‍👧‍👦 Contributors

해당 서비스가 잘 유지되기 위해서는 여러 사람들이 도움을 주었습니다.

📌 Contributors

삭제 요망

이름, 닉네임	Github, Blog, Gmail	내용
장원익	dhslrl321	메인 개발자
최재웅	CJW-MAPu	메인 개발자