프로젝트 기간: 2023.01.25 ~ 2023.02.01
프로젝트를 시작하면서
👤 프론트엔드(2명): Bootstrap, React, axios
🩻 백엔드(3명): typeORM, Nest JS, socket.io, swagger, SSL, http2 AWS Service (RDS, EC2, S3, FrontCloud, Elastic Cache, Redis, )
🛠️ 도구: Git, excalidraw, drawSQL, Notion, Pigma,
🔊 배포 : vercel, AWS EC2, AWS S3, pm2기본개념 주차를 끝나고 미니프로젝트를 거쳐 본격적으로 실전프로젝트 들어가기 전에 기존에 있는 사이트를 클론코딩하는 프로젝트를 했다. 나 포함 프론트엔드 2명 백엔드 3명으로 구성되어 프로젝트를 시작하였다.
본격적으로 실전프로젝트 시작 전에 워밍업한다고 생각하고 시작했는데 생각보다 구현할 부분도 많고 공부해야할 부분도 많고 백엔드와 소통도 중요했다.
주제 선정 및 기획
🤔 무엇을 할까?
인스타그램 클론 코딩
기본 기능에 소셜로그인,DM,파일업로드의 다양한 기능이 들어가 있고 필요한 기술 내용에 대한 정보가 다양하여 실제 서비스의 디자인과 작동 방식을 구현하는데 있어 수월할 것으로 보여 해당 사이트를 클론 코딩 하기로 했다.
먼저 1안,2안으로 나눠 필수로 구현해야하는 기능과 추가적으로 구현하고 싶은 기능을 중요도 순서대로 나눠 구현을 하기로 했다.
🎨 와이어프레임
(⭐️ : 1안)
- 회원가입⭐️ : 쉽게 접근이 가능하고 로그인과 회원 가입이 쉽도록 구현 목표
1-1. 로컬로그인
1-2. 소셜로그인 (카카오 / 구글 / 애플) - 전체 피드 페이지⭐️
2-1. 좋아요 COUNT
2-2. 댓글 일부 공개
2-3. 무한 스크롤 - 상세 피드 조회 및 쓰기⭐️
3-1. 댓글 (보기 쓰기)
3-2. 좋아요 3-2-1. 좋아요 알람
3-3. 팔로우
3-4. 수정 및 삭제
3-5. 피드 작성 - DM
4-1. 실시간 DM
4-2. DM 알람 - 프로필
5-1. 프로필 수정 - 팔로잉 / 팔로워 조회 및 편집
프로젝트 진행 완료(피드백)
🤓 완성된 기능구현
- 회원가입
1-1. 로컬로그인
1-2. 소셜로그인 (카카오 / 구글 ) - 전체 피드 페이지
2-1. 좋아요 COUNT
2-2. 댓글 일부 공개 - 상세 나의
- DM
4-1. 실시간 DM
기술적 기능구현은 완료했으나 다른 컴포넌트랑 잘 작동이 되는 지 확인해야하는 기능도 있었고 유료로 구매하고 사용해야하는 기술도 있었그며 기능은 어렵지 않으나 더 중요한 기능을 구현해봐야 하는 것 때문에 몇가지 기능은 삭제하고 완성.
💥 나의 트러블 슈팅(PPT 발표자료로 대체)
요약🍀
에러발생이유 >
react modal 라이브러리의 기본 사용 코드는 useState 로 지역변수여서 컴포넌트를 나눠 컨트롤 하지 못하여서 모달 오픈 버튼을 사이드 바에서 사용하고 메인에서 모달창을 확인해주고 싶을 때 에러가 발생
해결 >
모달이 열렸다 닫혔다하는 다른 상태 값(true /false) 를 전역으로 변경
