[웹개발 100일] Day 6 - 반성문, 새로운 주차별 계획

 

 

 

🚀 요약

오늘은 저녁에 바쁨 + 내일 외근이라 시간 낼 수가 없어서 미리 올립니다.
짬내서 1시간 정도 관련 작업을 해보았습니다.

 

작업 시간: 1시간
✅ 반성
✅ 주차별 계획 다시 작성
✅ 피그마 열어보기

 

 

 

🚀 반성문

 

오늘 회사에서 장기프젝 기획미팅을 했는데 조언을 듣다보니 근본부터 잘못하고 있다는 생각이 들었다..

네 사실 기획하기 싫어서 무작정 프론트부터 시작했어요🧎
진짜 까불지 말고 내일부터 기획서 작성하겠습니다.

한 번만 더 기회를 줘.
아직 94일 남았으니까.
수습할 수 있어.

 

 

 

🚀 새로운 주차별 계획

👨‍💻 목표: 친구들과의 추억을 기록하는 웹사이트 개발 & 배포
🛠️ 기술 스택: React + TypeScript + AWS + C#(.NET) + PostgreSQL

 

---

📌 2주차: 기획 및 초기 세팅 📝

✅ 화면 기획 (Figma 사용) 📐

• 주요 화면과 흐름 정의
• UI/UX 구성 및 디자인 요소(색상, 폰트 등) 결정

✅ DB 설계 💾

• 엔티티 및 관계 정의
• DB 모델링 도구 활용 (예: dbdiagram.io)

✅ 프로젝트 환경 설정 ⚙️

• React, TypeScript, Tailwind 설정
• .NET 백엔드 및 PostgreSQL 설정
• VSCode, Git 등 개발 환경 세팅

 

---

📌 3~4주차: 백엔드 개발 & 보안 기초 🔙

✅ DB 연결 설정 (PostgreSQL + .NET) ⚡

• PostgreSQL DB 인스턴스 생성 및 초기 데이터 삽입
• .NET에서 Entity Framework (ORM) 설정
• DB 연결을 위한 connection string 설정

✅ API 설계 및 구현 ⚡

• CRUD API 개발 (이벤트 생성, 조회, 수정, 삭제)
• 백엔드에서 DB와 API 연결 → RESTful API 제공
• 파일 업로드 (S3 or 서버 내 저장)

✅ 보안 기초 🔒

• 입력값 검증 (SQL Injection, XSS 방어)
• 인증/인가 구현 (JWT, OAuth 2.0 등)
• 환경 변수 관리 (.env 파일 활용)

 

---

📌 5~6주차: 프론트엔드 기본 기능 개발 🎨

✅ 기본 페이지 구현 🖥️

• 이벤트 목록 & 상세 페이지
• 이벤트 작성 및 이미지 업로드 기능
• 로그인 & 회원가입 UI

✅ API 연동 및 상태 관리 🔄

• React Query or Zustand 활용
• Axios로 백엔드 API 호출

 

---

📌 7~8주차: 추가 기능 & 보안 강화 🚀

✅ 프론트엔드 추가 기능

• 무한 스크롤 / 페이지네이션 구현
• UI 개선 (애니메이션 추가 등)

✅ 보안 강화 🔐

• HTTPS 적용 및 CORS 설정
• 백엔드 보안 (Rate Limiting, Helmet 등)
• CSRF & CORS 대응

 

---

📌 9~10주차: 배포 준비 & AWS 설정 🌍

✅ 백엔드 배포 (AWS 사용)

• PostgreSQL DB 설정 (RDS)
• .NET API 배포 (EC2, Lambda 등)
• 파일 업로드 (S3)

✅ 프론트엔드 배포

• React 앱 배포 (Vercel, S3 + CloudFront 등)
• CI/CD 구축 (GitHub Actions or AWS CodePipeline)

 

---

📌 11~12주차: 최적화 및 테스트 🔥

✅ 성능 최적화

• 이미지 최적화 (Lazy Loading, WebP)
• Lighthouse & Web Vitals 개선

✅ 보안 점검 🔐

• Penetration Test 진행 (OWASP Top 10 체크)
• 데이터 암호화 및 보안 로그 설정

✅ 유저 테스트 & 피드백 반영

• QA 및 버그 수정
• 추가 기능 논의

 

---

아 할 일 개많네 진짜
애써 밝은 척 이모지라도 넣어본다

 

이걸 정말 나 혼자 해야 된다고?
그 어떤 동료의 도움도 없다고??

 

흠

 

 

 

 

🚀 figma 열어보기

체계를 잡기 위한 어떤 발버둥을 쳐보는 중