1. 설명
공부용으로 만든 인스타그램 클론 웹사이트
React.js, Node.js, Mysql, AWS를 이용해서 구현
react-router-dom,redux,redux-saga,axios사용express,passport-local,sequelize사용mysql사용AWS의EC2 ubuntu 20.04프리티어 사용nginx와certbot을 이용해서https적용
2. 구현한 기능들
- 유저 CRUD
- 로그인 ( local )
- 게시글 CRD ( 영상처리 불가능 )
- 댓글/답글 CRD
- 게시글/댓글/답글의 좋아요 CRD
- 팔로잉/팔로워/팔로우 CRD
- 해시태그 CRD ( + 검색 )
- 게시글 무한 스크롤링
- image-carousel
3. v1.0.0 마무리
프론트는 어떤 라이브러리를 쓸 것이며, 백은 어떤 라이브러리를 사용하고, 데이터베이스는 어떤 것을 사용하고, 배포는 어떻게 할 것이며, 프론트와 백을 같이 만들면서 생길만한 문제와 규칙 정도는 어느 정도 정하고 프로젝트에 들어갔습니다.
또한 혼자 개발하긴 하지만 개발 외적으로도
1. trello로 개발 진행 사항 기록 및 공유
2. Git과 GitHub으로 버전 관리 ( + gitflow방식으로 branch를 기능별로 나눠서 개발 )
3. velog로 개발 일지 기록
4. youtube로 데모 영상 업로드
위 4가지를 동시 작성하면서 개발을 진행했습니다.
3.1 개발하면서 생긴 문제 및 어려웠던 점
3.1.1 trello 관련
trello작성 -> 개발 순서가 아닌 개발 -> 그에 맞게trello변경trello가 익숙하지 않아서 자꾸 기록하지 않고 넘어가는 경우가 많음
3.1.2 velog
개발에 투자하는 시간이 많아서 일지를 작성할 땐 적을 내용을 모호하거나 기억이 안날 경우가 많음
또한 어디서부터 어디까지 정리를 해서 적어야 할지 정하는 것이 힘들었음
3.1.3 Git/Github
git-flow방식을 사용하려고 노력했지만, 실제로 적용한 것이 처음이고 기능 구현에 대한 이름을 제대로 짓는 것이 힘들었음
또한 기능을 제대로 구현했다고 생각하고 올려도 추후에 잘못된 부분을 찾거나, 다른 기능을 구현하면서 충돌하는 부분이 발생할 경우 어떻게 브랜치를 나눠서 어떤 메시지로 작성해야 할지 생각하는 부분이 힘들었음
3.1.4 React 관련
첫 번째 문제는 뭐든 만들 때 일단 만들고 나중에 컴포넌트로 분리하자고 생각하고 만들었던 부분이 큰 문제였습니다.
일단 만들고 보자는 마인드로 하나의 컴포넌트에 전부 넣고 만들기보다는 컴포넌트를 최소한의 단위로 쪼개서 이름만 지정해두고 그거에 맞춰서 작은 컴포넌트부터 만들면서 조립하는 방식으로 만드는 것이 결과적으로 깔끔하고 가독성 좋은 코드를 만드는 방식이라고 느꼈습니다.
두 번째로 동작을 처리하는 메서드( 비동기 요청, 사이드 이펙트 등 )를 구현할 위치를 결정하는 것입니다.
최초에는 사용할 컴포넌트에서 메서드를 구현했지만 나중에 보니 가독성도 안 좋고 에러 추적도 힘들어서 이후에 대부분의 컴포넌트에서 최상위 페이지 컴포넌트에서 하위의 모든 비동기 처리 로직을 구현하고 props로 내려주는 방식으로 만들었습니다.
이런 방식으로 구현하니 페이지 컴포넌트가 너무 비대해져서 기존 방식이랑 별 차이가 없는 것 같다고 느껴졌습니다.
만들면서 어떤 방식으로 컴포넌트의 구조를 잡아야 할지, 컴포넌트 내부에는 어떤 로직들을 넣어야 할지에 대한 생각을 많이 했지만 생각했던 방법은 모두 적용해봐도 코드가 깔끔해지지 않아서 마지막에 생각한 방식으로 구현했습니다.
세 번째로 프론트측 이미지 처리입니다.
처음에는 <img src="" />를 이용해서 이미지를 처리했지만 반응형으로 이미지 사이즈를 조절할 때 계속 크기 문제를 해결할 수가 없어서 방법을 찾다가 결국 <img />를 이용해서 이미지를 처리하기보단 background-image를 이용해서 이미지를 처리하는 게 사이즈 조절하기 더 편하다는 것을 알게 되어서 <figure>를 이용해서 이미지를 처리하도록 만들었습니다.
4. 이후 개발할 기능들
- bookmark
- image-crop
- 게시글 수정
- 게시글끼리 넘기기
- 알림 ( 좋아요 및 팔로잉 및 DM 알림 )
- DM
- 추천 친구
- 추천 검색어
- OAuth
5. 관련 주소
