🟦 WHYGRAM을 소개합니다 👩‍💼

🔹 프로젝트 결과 (.gif)

✅ 로컬 회원가입 & 로그인 & 이메일 인증

✅ 마이페이지 & 프로필 편집 & 팔로우 목록

✅ 다른 사용자 페이지 & 팔로우 추가/취소

✅ & 홈피드 & 게시물 업로드 & 인피니티스크롤

✅ 소셜로그인 (카카오 , 구글)

🔹 프로젝트의 목적

• 인스타그램을 모방한 SNS사이트입니다.
• UI와 기능 모두 인스타그램과 최대한 비슷하게 만드는 것이 목표였습니다.
  • WHYGRAM 프로젝트 보러가기 (github)
  • WHYGRAM 에러와 활동기록 보러가기 (github)
  • WHYGRAM 계획서 보러가기 (whimsical)
• 박도흠강사님의 facebookclone강의를 복습하고 응용하기 위한 목적으로 계획한 프로젝트입니다.
• 그렇기 때문에 이 프로젝트의 모든 코드들이 강사님의 코드와 매우 비슷합니다.
  • facebookclone 강의 소스 보러가기 (github)
• 국비과정의 최종 결과물로 내는 과제엿습니다. 그래서 시간이 부족하여 미완성한 부분이 많습니다.

🔹 팀원

(full) : html , JS , java , db 모두 작업했다는 뜻입니다.
(기능) : JS , java , db만 작업했다는 뜻입니다.
	(다른 팀원이 html , css는 해놓은 상태에서) 	 

✅ 🧑 태태

• 비밀번호 찾기 html , css
• 이메일 full
• 로그아웃 full
• 피드 헤더 full
• 프로필 사진 업로드 full
• 게시물 업로드 full
• 소셜 로그인 (카카오, 구글만) full
• WHYGRAM 사이트의 css
• DB create 쿼리
• 시큐리티
• 프로젝트 패키지 구조 설계

✅ 🐢 거북이

• 로컬 로그인 full
• 회원가입 full
• 비밀번호 찾기 기능
• 중복확인 기능
• 팔로우 (삭제, 추가, 리스트) full
• 팔로워 리스트 full
• 피드 게시물 (리스트, 디테일, 댓글 , 좋아요) full
• 프로필 게시물 (리스트, 디테일, 댓글 , 좋아요) full
• DB 구조 설계
• UI 설계
• model 구조 설계
• 페이지 기능 설계
• 시큐리티
• 깃헙 기록 (issues, projects)

🔹 github 협업 규칙

• merge
  • <master> : pull → <branch> - merge to current → commit & push
  • <branch> : master에서 pull → 작업을 하고 → commit & push
• 디버깅은 merge 끝내고 <master>에서 할 것
• commit message : 무엇을 작업했는지 상세히 적기

🔹 model 구조

• entity - db 연동
• domain - entity를 상속 받음 , select 결과를 담는 것
• DTO - select때 컬럼에 없는 값을 mapper에 넘겨줄 파라미터 , sql문을 완성해주는 것 ( entity와 pk가 겹침 ex 페이징, 검색 )
• domain , DTO - select용.

🔹 기술스택

🔹 기능

여기 또는 사진을 클릭하여 WHYGRAM의 "기능"을 시각적으로 보시길 바랍니다.

⭕ : 구현완료 - 그러나 css에 버그가 있는 경우가 있습니다.
❌ : 구현실패 

✅ 회원관리

• 회원가입 (⭕)
• 로컬로그인 (⭕)
• 소셜로그인 (⭕)
• 로그아웃 (⭕)
• 비밀번호 찾기 (⭕)
• 프로필
  • 프로필 사진 , 업로드 (⭕)
  • 소개글 (⭕)
  • 팔로우 (⭕)
  • 팔로우, 팔로워 리스트 (⭕)
  • 프로필 편집
    • 비밀번호 확인 (❌)
    • 이름, 닉네임, 소개글, 이메일, 성별 수정 (⭕)
    • 비밀번호 변경 (❌)
    • 회원탈퇴 (❌)

✅ 피드 (게시물)

• 나의 게시물 리스트
  • 사진리스트 (대표 사진 1장) (⭕)
  • hover하면 좋아요 여부와 수, 댓글 여부와 수 (⭕)
  • click하면 디테일 모달 (⭕)
    • 댓글 보기 (⭕)
    • 댓글 추가, 삭제, 수정, 좋아요 (❌)
    • 글 좋아요 (⭕)
    • 대표사진, 글 수정 (❌)
    • 글 삭제 (❌)
    • 디테일의 프로필 사진 click하면 그 유저의 프로필로 이동 (⭕)
• 나의 좋아요 리스트 (❌)
  • 상세 기능 나의 게시물 리스트와 같다.
• 인피니트 스크롤 (⭕)
• 홈
  • 게시물 업로드 (⭕)
  • 영상 업로드 (❌)
  • 친구찾기 (❌)
  • 나와 내가 팔로우하는 사람들의 전체게시물 리스트 (⭕)
    • click시 디테일 모달은 나의 게시물 리스트-디테일모달과 같다.

🔹 UI

여기 또는 사진을 클릭하여 WHYGRAM의 "UI"를 시각적으로 보시길 바랍니다.

🔹 DB구조

여기 또는 사진을 클릭하여 WHYGRAM의 "DB구조"를 시각적으로 보시길 바랍니다.

WHGRAM의 DB는 총 7개의 테이블로 나누어져 있습니다.

• 회원관리 기능을 위한
  • users 테이블 (회원정보를 저장)
  • follow 테이블 (팔로우와 팔로워 리스트를 저장)
• 피드 (게시물) 기능을 위한
  • feed테이블 (게시물의 기본정보를 저장)
  • contents테이블 (게시물의 사진을 저장)
  • cmt테이블 (게시물의 댓글을 저장)
  • feed_fav테이블 (게시물의 좋아요 리스트를 저장)
  • cmt_fav테이블 (댓글의 좋아요 리스트를 저장)

• users테이블의 pk를 contents테이블을 제외한 모든 테이블에 외래키로 참조를 걸었습니다.
  • 그래서 회원이 아닌 사람이 다른 테이블에 기록될 일이 없고,
  • 기록된 외래키 정보만으로도 users테이블의 pk가 외래키로 참조된 모든 테이블에 join으로 접근하여 여러가지 정보들을 조합하고 추론할 수 있었습니다.
  • 예) 팔로워 목록, 팔로우 여부, 좋아요 여부, 댓글 여부, 프로필 사진 클릭하여 프로필로 이동 등

• feed테이블의 pk또한 마찬가지로 users와 follow 테이블을 제외한 게시물과 연관된 테이블에 모두 외래키로 참조를 걸었습니다.
  • 그래서 게시물로 업로드 되지 않은 것이 다른 테이블에 기록될 일이 없고
  • 기록된 외래키 정보만으로도 feed테이블의 pk가 외래키로 참조된 모든 테이블에 join으로 접근하여 여러가지 정보들을 조합하고 추론할 수 있었습니다.
  • 예) 게시물의 좋아요 개수, 게시물의 댓글 개수, 게시물의 대표사진 정하기
  • 또한 외래키 참조를 할 수 있어 feed테이블에 게시물, 사진, 댓글, 좋아요를 한번에 컬럼으로 넣지 않고,
  • 세부 기능에 따라 각 테이블로 나눌 수 있게 되어서 기능 구현을 할 때 더욱 편리함을 느꼈습니다.
  • 이렇게 하나의 테이블을 세부 기능으로 여러 테이블로 나누어도 외래키 참조로 서로 연결되어 있기에 정보가 잘못 기록되는 일도 없었습니다.

🟦 WHYGRAM의 미흡한 부분 🧐

🔹 css

• 페이지 하나하나 엉성한 css와 부트스트랩이 적용되었습니다.
• 텍스트와 게시물들이 보기 좋게 나열되지 못하였습니다.
• 가장 아쉬운 점은 backEnd에서 frontEnd로 분명히 데이터들이 잘 가져와졌지만, css때문에 이미지 슬라이드가 되지 않거나, 리스트에 계속 데이터가 중복으로 쌓입니다.

🔹 반응형 웹

• css에 약함을 보이는 저희 팀은 반응형 웹을 만들기가 너무 어려웠습니다.
• 그래서 이 프로젝트는 반응형이 엉성하게 되는 부분도 있고 아예 되지 않는 부분도 있습니다.

🔹 미완성 기능들

• 소셜 로그인 : 네이버 , 페이스북
• 프로필 편집 : 비밀번호 확인, 비밀번호 변경, 회원탈퇴
• 댓글 : 추가, 삭제, 수정 , 좋아요
• 마이페이지 리스트 대표사진 수정
• 게시물 수정 , 삭제
• 나의 좋아요 리스트
• 영상 업로드
• 친구 찾기

🔹 배포 서비스

프로젝트를 서버에 올려 배포하지 못했습니다.

🟦 WHYGRAM을 통해서 거북이가 배운 점 👩‍💼

🔹 AJAX

게시물, 댓글, 팔로우 등 프로젝트의 거의 모든 기능을 ajax로 구현했습니다. 그래서 자연스럽게 연습하고 다양한 에러 경험을 할 수 있게 되었습니다. ajax의 처리 과정을 잘 이해하게 되었고 자신감도 생겼습니다. 이번 프로젝트에서 가장 만족하는 부분이 AJAX로 기능을 구현하며 개발 할 수 있게 되었다는 것입니다.

🔹 JS

JS를 정말 어려워 하던 저였는데, 이번 프로젝트를 통해 실패도 많이 해보고 많이 찾아보는 과정에서 학습을 효과적으로 하게되었습니다. 그래서 이제는 JS에 자신감을 가지게 되었습니다. 이번 프로젝트에서 가장 만족하는 부분이 JS로 기능을 구현하며 개발 할 수 있게 되었다는 것입니다. JS를 더욱 깊게 공부해보고 싶은 욕심이 생겼습니다.

🔹 MYSQL

SQL은 너무 쉬워서 공부가 필요없다고 생각했는데, 이번 프로젝트를 통해서 제 생각이 틀렸다는 것을 알게되었습니다. JOIN과 GROUPBY가 어려워서 몇 일을 헤맸습니다. 부족함을 많이 느껴서 SQL을 더욱 깊게 공부하여 데이터베이스를 효율적으로 다루고 싶은 욕심이 생겼습니다.

🔹 SPRING MVC

SPRING은 너무 어렵다는 소문을 들어서 배우기 전부터 겁을 많이 먹었습니다. 하지만 막상 배워보니 간편한 JSP같다는 생각이 들었습니다. MVC패턴도 쉽게 느껴졌습니다. 하지만 시큐리티는 몇 주동안 붙잡고 있어도 아직 이해가 쉽지 않습니다. 스프링의 이론적인 부분을 공부하고 싶다는 욕심이 생겼습니다.

🔹 로직

이 프로젝트를 통해 프로그래밍 로직을 많이 연습하게 되었습니다.
중복검사, 마우스가 올려지면 이모디콘이 바뀌는 기능을 만들 때 자꾸 이상하게 구현이 되어서 로직에 대해 생각을 많이 하게 되었습니다. 늘 강사님이 하시는 대로 따라하다가, 이렇게 스스로 로직을 짜보니까 알고리즘 공부에 대한 욕심이 생겼습니다.

🔹 팀워크

처음으로 팀 프로젝트를 만들어봤습니다. 팀원 태태와는 친하지 않은 상태에서 같이 프로젝트를 하게 되었는데, 서로 성격과 실력이 달라서 맞춰나가기가 쉽지 않았습니다. 하지만 팀을 위해 양보하자는 마음을 가진 태태 덕분에 다행이 어느정도 완성을 하고서 마무리를 지을 수 있게 되었습니다. 저는 이번 팀 프로젝트를 통해서 내가 해야할 일이 상대 팀원보다 더 많아도 불평하기 보다는 팀을 위한다는 생각으로 열심히 해야한다는 마음가짐을 가지게 되었습니다.

🔹 적성

이번 프로젝트를 통해 웹개발자, 이 길이 제 적성이라는 것을 많이 느꼈습니다. 집중력이 너무 안좋아서 지금까지 공부와 업무에 스트레스를 심하게 받았습니다. 하지만 웹 개발을 할 때는 완전히 빠져있다는 느낌이 들 정도로 집중을 할 수 있습니다. 그러한 자신을 느낄 때 뿌뜻하고 자존감이 커집니다. 그래서 더욱 재미를 느끼고 열정을 느낍니다. 또한 욕심도 많이 생겨서 배우고 싶은 것도 많고, 이미 배운 것도 더욱 깊게 알고 싶은 것도 많아졌습니다.

🔹 자신감

감히 나라는 사람이 이렇게 어려워 보이는 길을 갈 수 있을까, 두려움과 걱정이 아주 많았습니다. 하지만 5개월동안의 국비 수업을 통해 엉성하지만 프로젝트를 해냈습니다. 아직 부족한 점이 많은 저이지만, 실무에 나가면 선배님들과 함께 일을 할 수 있지 않을까, 회사에 조금이라도 도움이 되는 사람이 될 수 있지 않을까라는 희망이 생겼습니다. 앞으로도 꾸준히 노력한다면 정말 그렇게 될 수 있을 거라는 자신감이 생겼습니다. 빨리 현장으로 가서 선배님들과 함께 일하며 배우고 싶어졌습니다.