[웹개발 100일] Day 0 - 계획

 

 

 

 

100일 챌린지를 하기로 했다.

목표는 처음 써보는 기술들로 CRUD + 로그인 기능을 갖춘 웹페이지 배포하기!

일단 대략적인 계획을 세워놓고 진행하면서 유동적으로 수정해나갈 예정이다.

 

 

 

📌  100일 플랜

주차별 주요 목표

🛠️ 1~2주차: 프로젝트 환경 설정 및 기본 UI 구성 (Vite, React, TypeScript, Tailwind CSS)

🖼️ 3~4주차: 사진과 글 업로드 기능 구현 (파일 업로드 UI & API 개발)

📜 5~6주차: 데이터 조회 기능 추가 (게시물 목록 및 상세 페이지 구현)

✏️ 7~8주차: 수정 & 삭제 기능 구현 (글 수정/삭제 API 및 UI 추가)

🔑 9~10주차: 로그인 기능 개발 (JWT 인증 & Google OAuth 로그인)

☁️ 11~12주차: AWS 배포 및 백엔드 최적화 (S3, EC2, RDS 배포 및 성능 최적화)

🧪 13~14주차: 테스트 & 디버깅 (통합 테스트 및 최종 디버깅, 배포 완료)

 

 

 

📌  테크 스택

🖥  프론트엔드

• React + TypeScript → UI 개발
• Vite → 빠른 빌드 & 개발 환경
• Tailwind CSS → 스타일링
• React Router → 페이지 라우팅
• JWT + Context API → 사용자 인증 관리

⚙️  백엔드

• C# + .NET → API 개발
• Entity Framework Core → DB 관리 (ORM)
• PostgreSQL → 데이터베이스
• JWT + OAuth (Google 로그인) → 사용자 인증

☁️  배포 & 스토리지

• AWS S3 → 이미지 저장
• AWS RDS (PostgreSQL) → 데이터베이스
• AWS EC2 or Lambda → 백엔드 배포
• AWS CloudFront → 프론트엔드 배포

 

 

 

📌  상세 로드맵

1~2주차: 프로젝트 환경 설정 & 기본 UI 구성

• Vite, React, TypeScript, Tailwind CSS 설정
• 기본 UI 구성 (메인, 업로드, 상세 페이지)
• React Router로 라우팅 설정
• GitHub 저장소 생성 및 버전 관리 시작

3~4주차: 사진과 글 업로드 기능 구현 (파일 업로드 UI & API 개발)

• 파일 업로드 UI 구현
• 사진과 글 업로드 API 개발 (POST /posts)
• PostgreSQL로 데이터베이스 설계
• AWS S3 연동하여 이미지 저장

5~6주차: 데이터 조회 기능 추가 (게시물 목록 및 상세 페이지 구현)

• 게시물 목록 및 상세 조회 API 개발
• 게시물 목록과 상세 페이지 UI 구현
• 페이징 기능 추가

7~8주차: 수정 & 삭제 기능 구현 (글 수정/삭제 API 및 UI 추가)

• 게시물 수정 API (PUT /posts/:id) 개발
• 게시물 삭제 API (DELETE /posts/:id) 개발
• UX 개선 (수정 후 자동 이동, 삭제 확인 모달 추가)

9~10주차: 로그인 기능 개발 (JWT 인증 & OAuth 로그인)

• 사용자 로그인 기능 개발 (JWT)
• Google OAuth 로그인 기능 추가

11~12주차: AWS 배포 & 백엔드 최적화

• 프론트엔드 배포 (AWS S3 + CloudFront)
• 백엔드 배포 (AWS EC2 or Lambda + API Gateway)
• 데이터베이스 배포 (AWS RDS)
• 성능 최적화 및 리팩토링

13~14주차: 테스트 & 디버깅

• 최종 테스트 (프론트엔드, 백엔드, DB 통합 테스트)
• 실제 배포 환경에서 버그 수정 및 디버깅
• 최종 배포 및 피드백 반영