Bongoose(봉구스) 는 소셜 네트워크 서비스(SNS)를 제공하는 웹 애플리케이션 입니다.
개발 기간: 2021.09.13 ~ 2021.12.15 (총 3개월)
개발 인원: 3명
Bongoose 바로가기
Bongoose 시연 영상 준비중..
Bongoose-BE 리포지토리
- 팀원 소개 및 포지션
- 프로젝트 기술 스택
- BackEnd 구조
- ERD (ER 다이어그램)
- 주요기능 미리보기
- Lesson Learned
| 오택현 🔍 | 여찬규 🔍 | 고기현 🔍 |
|---|---|---|
 |
 |
 |
| Back-End | Front-End Design |
Front-End |
| 미리보기 | 설명 |
|
로그인 & 회원가입 - 웹 페이지에 들어오면 제일 먼저 볼 수 있는 로그인 페이지 입니다. - 봉구스는 회원이 인증된 사람만 이용할 수 있기 때문에 회원가입 후 로그인을 해야 서비스 이용이 가능합니다. |
|
메인 페이지 - 봉구스의 메인페이지 입니다. - 최신 글을 빠르게 볼 수 있습니다. |
|
메인 페이지 (글 작성하기) - 글 작성 버튼을 클릭하면 작성할 수 있는 모달창이 보여지게 됩니다. - 내용이 비어있거나 이미지가 4장이상이 될 경우 벨리데이션에 걸리게 됩니다. - # 를 이용해서 해쉬태그를 작성할 수 있습니다. |
|
메인 페이지 (글 수정 & 삭제) - 자신이 작성한 글에는 수정 & 삭제하는 버튼이 나오게 됩니다. - 글의 내용을 수정할 수 있으며, 원한다면 삭제도 가능합니다. |
|
댓글 기능 - 각 게시물마다 댓글을 쓰고, 수정하고 삭제를 할 수 있습니다. |
|
좋아요! & 싫어요! 기능 - 각 게시물마다 좋아요와 싫어요를 할 수 있습니다. - 다시 취소도 가능하지만, 좋아요와 싫어요는 동시에 사용 불가 합니다. |
|
마이페이지 - 마이페이지에서는 자신의 정보를 볼 수 있습니다. - 프로필 수정 버튼을 통해 자신의 프로필 이미지, 닉네임, 1줄 자기 소개를 수정할 수 있습니다. - 최근 사진의 목록을 볼 수 있습니다. - 자신이 작성한 글 목록을 볼 수 있습니다. |
|
친구 목록 페이지 - 현재 친구관계가 되어있는 유저들의 정보를 볼 수 있습니다. - 해당 유저의 프로필 보기와 친구 삭제하기가 가능합니다. |
|
친구 찾기 페이지 - 친구를 추가할 수 있는 유저들의 목록이 보여집니다. - 원하는 유저에게 친구추가를 하면 친구가 됩니다. |
|
다른 유저 상세정보 페이지 - 친구를 추가할 수 있는 유저들의 목록이 보여집니다. - 원하는 유저에게 친구추가를 하면 친구가 됩니다. |
|
게시물 검색기능 - 해시태그 또는 유저닉네임으로 검색을 해서 검색결과를 볼 수 있습니다. |
이번 프로젝트를 하면서 많은 이슈를 경험했습니다.
그중 제일 힘들었던 부분이 JWT 로그인 부분 이였는데
토큰의 유효기간이 끝나면 리플래쉬 토큰을 이용해 재발급을 받아야 했지만
리플래쉬 토큰은 쿠키로 공유가 되기 때문에 여러 번의 CORS를 겪었습니다.
첫 번째는 클라이언트에서 백엔드와 쿠키를 공유하기 위해
axios에 withCredentials: true 옵션을 줬음에도 쿠키가 공유가 안되는 문제
이 문제는 Access-control-Allow-Origin: *로 설정되어 있기 때문에
백엔드 개발자에게 부탁을 해서 이 부분을 해결했습니다.
하지만 이 문제점을 해결하고도 쿠키 공유가 되지 않았기 때문에 다른 문제점을 찾아볼 수밖에 없었는데요..
두 번째 문제인 SameSite=Lax 가 기본값이었기에 공유가 안된 문제였습니다.
SameSite는 웹 애플리케이션에서 CSRF 공격을 방지하기 위해 HTTP 쿠키에서 설정할 수 있는 속성입니다.
처음 마추친 문제에 많은 시간이 투자하여 공부하였고 문제를 해결해 보며
쿠키에 대한 전체적인 흐름을 이해하는데 많은 도움이 된 것 같습니다.
모바일 환경에서도 이용할 수 있도록 반응형 디자인을 제공합니다!
|
|
|
|
|
|