인스타그램 클론 코딩(Lifegram)

인스타그램 클론코딩을 하게 된 계기

항해에서 새로운 팀원들과 함께하는 클론코딩 주간이 왔다 어떤 페이지를 클론코딩할까 팀원분들과 함께 고민하다 현재 인기있고 제일 많이 쓰고 있은 인스타그램을 클론코딩하기로 하였다

 

프로젝트 개요

백과 프론트의 협업을 중심으로 인스타그램 최소 기능 클론 코딩

 

프로젝트 일정

일정	내용
7.21	Git Repository 구성, SA작성
7.22	FE 통신 테스트, 로그인/회원가입 기능, UI작업
7.24	게시글 CRUD, UI작업
7.25	좋아요 기능구현, 댓글 CRD, UI작업
7.26	사용자 정보 조회, 사용자 프로필 변경, UX 테스트, UX개선
7.27	문서 작업 및 발표

 

기술스텍

• React
• Json Sever
• Axios
• Styled-Components
• React-Query

 

프로젝트 내용

 

설명

짧은 시간내에 만드는 만큼 인스타그램 최소 기능을 구현한 클론 코딩

 

기능

• 전체 게시물(R)
• 댓글(CD)
• 인피니티 스크롤
• 나의 게시물(CRUD)
• 개인 프로필 변경
• 좋아요 기능

 

etc

인스타그램을 확인했을때 게시물 상세 조회가 2가지로 구현되어 있는 것을 확인하여 모달 UI로 만든것과 페이지 UI로 2가지 버전을 만들었다 인스타그램은 앱이 딸로 있어 핸드폰 사이즈의 반응형까지 구현되어 있지 않지만 웹페이지로 전체 구현을 하는 만큼 웹, 태블릿, 스마트폰 반응형 전부 구현하였다

 

후기

트러블 슈팅

• Git 오류
  • 한 레파지토리에서 깃 브렌치를 나누어 PR를 하는 것이 처음이라 많이 헤매고 오류가 많이 났다 몇번의 시행착오를 거친 후 현재 작업중이 브랜치에서 풀을 받는 것이 아닌 합본이 있는 develop 브렌치에서 전체 풀을 받고 기능 브렌치에서 머지하는 방식으로 변경하였다
• 인피니티 스크롤
  • 첫화면 렌더링 시 이미지가 일부 깨져 보이거나 새로고침 전까지 데이터가 잔류하는 현상이 발생했다 기존에 페이지 이동을 navigate로 설정된 url로 이동하였는데 이렇게 되면 페이지 리로딩이 안되어 기존 데이터가 남아있는 것이었다 페이지를 리로딩하는 window.location.href로 수정하였다 또한 useInfiniteQuery에 내장된 isLoading을 isFetching으로 코드를 변경하여 오류를 수정하였다
• 404페이지가 아닌 api 오류
  • 권한에 따른 주소이동을 할때 없는 주소를 주소창에 입력할 경우 404에러페이지가 나와야 하는데 api 오류가 발생하는것으로 확인되었다 어디가 문제인지 알수가 없어 흐름을 찾아 오류를 발견했다 주소가 /:id인 라우터가 있어 어떤 값을 넣었을때 id로 처리되어 있어 이 페이지로 이동되기 때문이었다 주소를 변경하여 문제를 해결하였다
• 너무  무거운 이미지
  • 인스타그램이라는 SNS 특성상 다수의 이미지가 한번에 불려오기 때문에 렌더링 속도가 느려지는 문제가 발생하였다 사용자 이미지 업로드시 프론트에서 이미지 크기를 2mb로 제한하여 문제를 해결하였다

 

아쉬웠던 점과 느낀점

아쉬웠던 점 겸 코드리뷰

깃 컨벤션이 정하긴 하였지만 종류만 정하고 영어로 할지 한글로 할지 정하지 않아 섞여 있어 통일성이 적었다 react-query를 이용한 예외처리가 전체적으로 되어있지 않았다 또한 CSS 전처리기를 선택했다면 장점을 명확하게 하는 것이 좋으나 현재 코드에서는 스타일 컴포넌트의 장점을 명확하게 살리지 못하였다 시간이 더 있었다면 인스타그램의 여러가지 기능을 더 구현할 수 있었을텐데 시간이 적어 제한된 기능만 만들수 있었어서 아쉬웠다

 

느낀점

좀더 타이트한 일정을 잡았어야 하는 점이다 이번에 처음으로 한 레파지토리에 branch를 기능별로 나누어 합하였는데 그러다 보니 나중에 전체적으로 합쳐졌을때 오류가 많이 나서 오류를 해결하느랴 시간을 써서 다른 기능을 추가적으로 구현하지 못해 아쉬웠다 저번에는 마지막에 자체 UX 테스트를 해서 불편한점을 하나하나 정리하며 개선했었는데 이번에는 시간이 없어 크게 정리를 못한점도 너무 너무 아쉬웠다