웹 개발 전체 과정

1. 프로젝트 계획 및 기획

* 목표정의 : 주요 기능과 목표를 정의한다.
* 사용자 요구사항 분석 : 고객이 원하는 기능과 서비스를 파악한다.
* 와이어프레임 작성 : 웹의 레이아웃 및 UI를 설계한다.
* 기술 스택 결정 : AWS, GitLab, RDS MySql, React 등 기술스택을 결정한다.

2. 개발 환경 설정

* GitLab 프로젝트 생성 : 프론트엔드와 백엔드 코드를 저장할 레포지토리를 생성한다.
* AWS 계정 설정 : 프로젝트에 필요한 AWS 서비스를 사용할 수 있도록 설정한다.

3. 배포 및 테스트

* EC2 인스턴스 생성 :프론트엔드와 백엔드 서버를 실행할 인스턴스를 생성합니다.
* Nginx 설정 : Nginx를 사용해 프론트엔드와 백엔드를 연결하고, 로드 밸런싱 및 SSL 인증서를 설정합니다.
* CI/CD 파이프라인 구축 :GitLab을 이용해 코드 변경 사항이 자동으로 테스트되고 배포되되는 프로세스를 구축합니다.

3-1. 초기 CI/CD 파이프라인 구축

* 초기 프로젝트 설정 : 프로젝트 초기 설정 시에 프론트엔드와 백엔드의 기본 구조 및 빌드 스크립트를 작성합니다.
* 배포 환경 설정 : EC2 인스턴스 생성, Nginx 설정 등 배포에 필요한 환경을 미리 설정해 두면, 개발 과정에서 지속적으로 코드가 실서버에 배포되어 테스트할 수 있습니다.
* GitLab CI/CD 구성 : GitLab에서 제공하는 CI/CD 기능을 이용하여 프론트엔드와 백엔드의 빌드, 테스트, 배포 과정을 자동화합니다. 이를 위해 .gitlab-ci.yml 파일을 프로젝트 루트에 작성하고, 각 단계별 실행할 스크립트를 정의합니다.
* 초기 테스트 및 배포 : 파이프라인을 구축한 후, 초기 코드를 GitLab에 푸시하고 파이프라인이 정상적으로 작동하는지 확인합니다. 이 과정에서 발생하는 오류나 이슈를 해결합니다.

4. 프론트엔드 개발

* React를 이용해 웹사이트 구조 및 컴포넌트 작성 : 페이지 구현,
CSS 및 디자인 작업 : 반응형 웹 디자인, 애니메이션 등을 적용합니다.
* API 연동 : 백엔드와 통신하기 위한 API 호출 작성을 진행합니다.

5. 백엔드 개발

* NestJS를 이용해 서버 구축 : 웹사이트의 기능을 지원하는 API를 개발합니다.
* RDS MySQL 데이터베이스 설계 및 구축 : 정보를 저장할 테이블을 생성하고 관계를 설정합니다.

6. 코드 리뷰 및 협업

GitLab의 머지 리퀘스트 기능을 이용하여 서로의 코드를 리뷰하고 피드백을 주고 받습니다.
이슈 트래커를 활용하여 버그 및 개선사항을 관리하고, 마일스톤을 설정하여 프로젝트의 진행 상황을 파악합니다.

7. 테스트 및 최적화

단위 테스트, 통합 테스트, 부하 테스트 등을 진행하여 웹사이트의 안정성과 성능을 확인합니다.
웹사이트의 로딩 속도를 개선하기 위해 이미지 최적화, 코드 압축, 캐싱 등의 최적화 작업을 수행합니다.

8. 프로젝트 완료 및 유지보수

모든 개발이 완료되고 테스트가 정상적으로 진행된 후, 웹사이트를 공식적으로 출시합니다.
출시 후에도 지속적으로 사용자의 피드백을 수집하고, 필요한 기능 추가 및 버그 수정 작업을 진행합니다.