1. 프로젝트 계획 및 기획
- 목표 정의 : 쇼핑몰의 주요 기능과 목표를 정의합니다.
- 사용자 요구사항 분석 : 고객이 원하는 기능과 서비스를 파악합니다.
- 와이어프레임 작성 : 웹사이트의 레이아웃 및 사용자 인터페이스를 설계합니다.
- 기술 스택 결정 : AWS, GitLab, RDS MySQL, React, NestJS, EC2, S3, Nginx 등을 사용하기로 합니다.
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를 이용해 서버 구축 : REST API 또는 GraphQL을 이용하여 웹사이트의 기능을 지원하는 API를 개발합니다.
- RDS MySQL 데이터베이스 설계 및 구축 : 상품, 주문, 회원 등의 정보를 저장할 테이블을 생성하고 관계를 설정합니다.
6. 코드 리뷰 및 협업
- GitLab의 머지 리퀘스트 기능을 이용하여 서로의 코드를 리뷰하고 피드백을 주고 받습니다.
- 이슈 트래커를 활용하여 버그 및 개선사항을 관리하고, 마일스톤을 설정하여 프로젝트의 진행 상황을 파악합니다.
7. 테스트 및 최적화
- 단위 테스트, 통합 테스트, 부하 테스트 등을 진행하여 웹사이트의 안정성과 성능을 확인합니다.
- 웹사이트의 로딩 속도를 개선하기 위해 이미지 최적화, 코드 압축, 캐싱 등의 최적화 작업을 수행합니다.
8. 프로젝트 완료 및 유지보수
- 모든 개발이 완료되고 테스트가 정상적으로 진행된 후, 웹사이트를 공식적으로 출시합니다.
- 출시 후에도 지속적으로 사용자의 피드백을 수집하고, 필요한 기능 추가 및 버그 수정 작업을 진행합니다.
다들 잘하는데 나만 못해?