[내일배움캠프 AI] B5팀 - "Instagram 클론코딩" 프로젝트 결과물

목표

1. Django 배운 내용 기반으로 필수기능 완벽하게 익히기
2. Django 프로젝트 기본 구조 익히기
3. Git branch를 이용한 협업 방식 익히기(issue, PR 등..)
4. 모든 팀원이 프론트/백엔드 기능 구현

 

와이어프레임

IA

노란색 필수 구현페이지

연두색 추가 구현페이지

구현 기능

Feed 파트

• 이현지(팀장) : 프로젝트 총괄
• 유승주 : 게시글 작성,수정
• 손상훈 : 게시글 댓글 작성/조회/삭제

User 파트

• 조인걸 : 로그인/회원가입/로그아웃/비밀번호찾기
• 주세민 : 프로필/프로필 수정

 

API

User 앱

기능	메소드	URL	request	response
로그인	POST	/signin	{‘email’ : email, ‘pw’ : pw}	redirect(“/”)
회원가입	POST	/signup	{‘email’: email, ‘name’ : name, ‘username’ : username, ‘pw’ : pw}	redirect(“/signin”)
로그아웃	GET	/logout		redirect(“/signin”)
비밀번호 변경	POST	/findpassword	{‘email’:email}	redirect(“/signin”)
프로필	GET	/profile_update		UserModel
프로필 수정	POST	/profile	{‘name’ : name, ‘username’ : username, ‘website’: website, ‘bio’:bio, ‘email’: email, phone’:phone}	redirect(“/profile”)

SNS 앱

기능	메소드	URL	request	response
전체 게시글 조회	GET	/		FeedModel
상세 게시글 조회	GET	/feed/<id>	{‘id’ : id}	FeedModel
게시글 작성	POST	/feed/create/	{‘content : content}	redirect (f'/feed/{new_feed_id}')
게시글 수정	POST	/feed/update/<id>	{‘id’ : id, ‘content : content}	redirect(f'/feed/{id}')
게시글 삭제	GET	/feed/delete/<id>	{‘id’ : id}	redirect(“feed/<feed_id>”)
댓글 조회	GET	/comment/<feed_id>	{‘post_id’:post_id}	FeedCommentModel
댓글 작성	POST	/comment/create/<feed_id>	{comment : “댓글 내용”}	redirect(f'/feed/{id}')
댓글 삭제	GET	/comment/delete/<id>	{‘id’ : id}	(f'/feed/{current_feed_id}')

 

DB 설계 

 

프로젝트 시연 결과물 영상

 

사용된 기술

Git, GitHub

HTML, CSS, JS, jQuery, Bootstrap

Python, Django, rest_framework, message_framework

 

협업 방법 - Git

GitHub - sparta-B5/django-instagram-clone: [스파르타코딩클럽 내일배움캠프 AI 3기] B5팀 첫번째 인스타 클

 

핵심 기능설명

피드 게시글(이현지, 유승주)

• 게시글 작성/ 수정
  • 페이지 이동이 아닌 모달 한개를 사용해서 게시글 작성/수정
  • 게시글 작성자와 관리자계정에 수정 권한 부여
  • 수정 권한 없을 시 메세지 출력
• 게시글 조회
  • 게시글을 생성일자기준으로 최신순(내림차순)으로 구현
• 게시글 삭제
  • 게시글 작성자와 관리자계정에 삭제 권한 부여
  • 게시글 작성시 success, error 메세지 출력

 

피드 댓글 (이현지, 손상훈)

• 댓글 작성, 목록, 삭제기능구현
  • 로그인한 사람만 작성 및 삭제를 가능하게 함 + 알람창뜨게함
  • (비 로그인 시 댓글 작성 및 삭제할 수 없게하고 에러알람창구현)
  • 댓글 작성 후 게시글아래에 댓글 목록을 보여줌.
  • 관리자계정으로 모든작성자 댓글삭제가능하게 함

 

로그인/회원가입/로그아웃/비밀번호 찾기(조인걸님)

• 로그인 : 구현 완료
  • 사용자 인증, 로그인 세션 유지를 중점적으로 개발
  • 사용자 인증 과정이 정상적으로 적용되었을 때만 메인 페이지에 접속할 수 있도록 설정
  • 로그인 세션은 10분간 유지되도록 코드를 적용하였으며, 리퀘스트 발생 시 세션 시간이 리셋되도록 설정

  #세션 자동 종료 시간(s)
  SESSION_COOKIE_AGE = 600
  # request확인 시 종료 시간 리셋
  SESSION_SAVE_EVERY_REQUEST =True
  

• 회원가입 : 구현 완료
  • 회원가입 시 사용자가 입력한 데이터가 DB에 정상적으로 전달되는 것을 우선적으로 고려
  • 이메일 주소, 사용자 이름, 비밀번호에 정규식을 적용하였고, 기존에 가입된 사용자의 이메일 주소, 사용자 이름 중 하나라도 중복되는 값이 있으면 가입할 수 없도록 막아 보안을 강화
• 로그아웃 : 구현 완료
  • 로그아웃 시 세션이 종료되면서 로그인 페이지가 보여지도록 설정하였고, 세션이 종료됨과 동시에 초기 로그인 페이지와 마찬가지로 메인 페이지에 접근할 수 없도록 차단
• 비밀번호 찾기 : 구현 실패
  • 구글링을 통해 이메일 인증 시스템 구현을 시도하였으나, 개인정보 인증 시스템을 팀 프로젝트에 적용하는데 과정이 복잡하고 문제가 많이 발생하여 중도 포기

 

프로필 / (추가기능) 프로필 수정(주세민님)

• 프로필 : 로그인 인증된 UserModel 정보 불러와 프로필 페이지 구현
• FeedModel과 UserModel 작성자 정보 비교하여 가져와 프로필 피드 구현
• 프로필 수정 : 로그인 인증된 UserModel 정보 불러와 프로필 수정 구현
• 이메일 / 전화번호 정규식 추가