클론 코딩 - 인스타그램

와이어 프레임 :

ERD 테이블 :

구현할 기능 :

1. 회원가입/로그인

   • 일반 로그인
   • 카카오 로그인 기능

2. 게시글 CRUD

   • 게시글 조회. 등록, 삭제, 수정
   • 이미지 업로드
   • 좋아요 기능
   • 게시글 무한 스크롤

3. 댓글 CRUD

   • 댓글 조회, 등록, 삭제

4. 마이페이지

   • 자신이 작성한 게시글 무한 스크롤
   
   

이미지 업로드 기능

S3를 통한 이미지 업로드, 불러오기, 수정, 기능 구현

cf. avif 형식 :
AVIF (Alliance for Open Media)에서 개발한 이미지 파일 형식

무한 스크롤

컨트롤러

서비스

Trouble Shooting

1. 소셜 로그인
   Redirect URl로 응답이 오면서 404에러가 생겼다. →Kakao Developers Redirect URL에 클라이언트 주소 추가 → 클라이언트에서 get방식으로 서버로 요청 → Redirect URI를 클라이언트로 설정하여 헤더에 토큰값을 담아서 클라이언트로 응답을 보내주었다.
2. 이미지 업로드 관련해서 몇 가지 상황이 있었다.
   상황 이미지를 업로드 할 수 있도록 했는데 프론트에서 이미지를 받아볼 수 없었다.

접근

• DB에 경로를 저장하지 못했거나 경로를 잘 못 보냈거나 하는 경우가 있을 수 있어서 점검을 해보았다.
• 프론트 쪽에서 경로를 받아와서 이미지를 띄우게 하는 방법이 있을 것이다.

해결

• 프론트 쪽에서 이미지와 내용을 받아오는 로직을 잘 만들어주셔서 해결할 수 있었다.

3. S3에서 저장한 이미지를 불러올 수 없는 상황이 있었다.

접근

• S3에서 이미지를 꺼내가는 것을 막는 무언가가 있을 것이다.

해결

• S3의 정책 관련해서 버킷 퍼블릿 엑세스 활성화 해주었다.

회고

1주일 동안 클론코딩 협업을 하면서 프론트와 백엔드 소통이 얼마나 중요한지 다시 한번 깨닫게 되었다. 서로 알고 있는 지식과 정보가 달라서 백엔드만 공부하고 지식을 넓히는것보단 프론트 지식도 익히는게 필요하다고 느끼는 주간이였다. 인스타 그램 클론코딩을 하면서 보완하고 싶은 점이 있다면 소켓을 이용하여 채팅방을 구현해보고 싶었다. 그리고 예외처리를 더 구분하여 나눠야 할것같다.