인스타그램 클론 프로젝트 (개인)

1. 프로젝트명

인스타그램 클론 프로젝트

 

2. 프로젝트 개요

FE(HTML, CSS) & BE (Flask or Django) & DB(Sqlite)를 이용한 인스타그램 클론 코딩

https://www.youtube.com/watch?v=M8UPyeF5DfM&t=11171s 해당 레퍼런스 참조하여 구현

전체 프로젝트 구조에 대한 맛보기 느낌으로 진행

 

3. 프로젝트 기간

1차 스프린트 기간 : 2022.04.26 (목) ~ 2022.05.02 (월)

 

4. 프로젝트 진행

1. 인스타그램 FE 구현 메인 기능

• Navigation Bar => 구현 완료
• 스토리 (미구현)
• 피드 (게시글) => (HTML 완료 / CSS 60%)
• 댓글 작성 => (HTML 완료 / CSS 80%)
• 프로필 / 친구 추천 => (HTML 완료 / CSS 80%)

 

2. BE 연동

• Navigation Bar 기능 구현
  • 피드 (게시글) 작성
  • 마이페이지

 

• Feed 페이지
  • 댓글
  • 좋아요
  • 공유

 

3. DB연동

• DB 테이블 설계 (Feed, User, Reply 등) => (80% 완료)
• DB 연동 구현 (50%)
  • 피드 내 게시글 정보 (좋아요 수, 본문, 닉네임 등) => 구현 완료
  • 피드 내 댓글 (nickname, content) => 구현 완료
  • 유저 (name, nickname, profile_image) => 구현 완료
  • 추천 친구 (아직 설계 못함)

 

5. 프로젝트 결과 화면

 

 

6. 프로젝트 소스 코드 링크

• HTML : https://github.com/SeonminKim1/Python/blob/master/Framework_Django/Instagram_Clone_Project/templates/main/main_page.html
• CSS : https://github.com/SeonminKim1/Python/blob/master/Framework_Django/Instagram_Clone_Project/static/css/Instagram_Clone_Project/style.css

 

7. 프로젝트 1차 스프린트 간 후기

원래 주어진 프로젝트는 Front에 대한 부분을 전반적으로 구현 하는 것을 목표로 제시 받았으나, 개인적인 욕심을 조금 더 내고 싶어, 찾은 'Django + 인스타 클론 코딩' 레퍼런스를 바탕으로 구현을 진행하였습니다. Django 초기 Setting 이나, DB 조회 등의 이슈 문제로 시간을 중간중간 잡아먹혀서 Front의 CSS나 기능 구현 목표에 완벽하게 도달하진 못한 것 같습니다. 

이후 보완 점으로 기능 단위로 BE 구현을 하면서 Front의 세세한 부분도 고쳐 나가는 방향으로 프로젝트를 진행해볼 생각입니다.