SNS-APP 프로젝트
1. 소개
프로젝트명: SNS-APP
제작: 개인 프로젝트
제작기간: 2달사용 기술:
- front: NextJs, Redux, StyledCompoenent, antd, media-query(반응형)
- backend: NodeJs, Express, MongoDB
사용 라이브러리:
- axios, cookie, dayjs, dropzone, multer, slick, env, nodemon, jwt, cors, mongoose 등
2. 목적
- 가장 기본적인 로직인 CRUD 개발 및 axios를 이용한 http 비동기 통신 구현을 통한 풀스택 개발 실력 향상.
- 실무에서 사용되는 디자인 방법인 반응형 디자인, styledComponent, antd의 사용을 통한 UI 디자인 개발 실력 향상.
- 회원가입, 로그인, 로그아웃, 로그인 유지 기능을 구현하며 jwt를 이용한 토큰 생성 및 cookie의 http 통신 방법 공부.
- 다양한 서드파티 라이브러리를 사용하며 숙련도 향상.
3. 기획
4. 기능소개
4-1. 포스트 업로드
- 로그인한 사용자는 이미지를 업로드할 수 있으며 모달창으로 이미지를 확인할 수 있다.
- 포스트 작성 중 이미지 삭제를 눌러 해당 이미지를 삭제할 수 있다.
- 포스트는 infinityScroll 형식으로 구현하였으며 8개씩 로드된다.
4-2. 포스트 수정 및 삭제
- 로그인한 사용자는 자신이 업로드한 포스트를 수정 및 삭제할 수 있다.
- 포스트 수정 중 이미지를 업로드 및 삭제를 할 수 있다.
4-2. 좋아요
- 로그인한 사용자는 해당 포스트에 좋아요 버튼을 클릭할 수 있다.
- 좋아요 버튼을 한 번 클릭하면 좋아요가 추가되고, 한 번 더 클릭하면 좋아요가 제거된다.
4-3. 팔로우
- 로그인한 사용자는 다른 유저를 팔로우할 수 있다.
- 팔로우 버튼을 한 번 클릭하면 팔로우가 추가되고, 한 번 더 클릭하면 팔로우가 제거된다.
- 팔로워 리스트에서 나를 팔로우 한 유저를 볼 수 있으며 나를 팔로우한 유저를 내가 팔로우/언팔로우 할 수 있다.
- 팔로잉 리스트에서 내가 팔로우한 유저를 볼 수 있으며 내가 팔로우한 유저를 팔로잉 리스트에서 삭제할 수 있다.
4-4. 댓글
- 로그인한 사용자는 해당 포스트에 댓글을 달 수 있다.
- 삭제 버튼을 눌러 댓글을 삭제할 수 있다.
4-5. 스크랩
- 로그인한 사용자는 해당 포스트를 스크랩할 수 있다.
- 상단의 스크랩 탭을 눌러 스크랩한 포스트를 볼 수 있으며 삭제를 눌러 스크랩 리스트에서 삭제할 수 있다.
4-6. 프로필
- 프로필 페이지에서 유저의 이미지, 닉네임, 자기소개를 수정할 수 있다.
4-7. 회원가입
- bcrypt를 통해 비밀번호를 암호화 한다.
- jwt를 통해 유저 데이터의 token 필드에 jwt를 부여한다.
- 예외 처리를 통해 동일한 이메일을 사용해 가입할 수 없다.
4-8. 로그인
- bcrypt를 통해 비밀번호를 암호화해 유저 데이터와 대조한다.
- 로그인 시 해당 유저의 token을 cookie에 저장한다.
- 페이지 이동 시 로그인 유지를 위해 cookie의 token을 서버로 보내고 서버에서 해당 유저의 token정보와 대조해 로그인을 유지시킨다.
4-9. 로그아웃
- 로그아웃 시 브라우저의 cookie를 삭제하여 로그아웃 시킨다.
4-10. 반응형
- xl, lg, md, sm 사이즈로 나누어 웹을 반응형으로 구현하였다.
- media query 사용.
5. 마무리
front는 vercel, backend는 heroku로 배포했습니다.
앱 주소: https://project-sns-app-frontend-35sx1dc36-heetaechae.vercel.app/
현재 서버 에러로 인해 aws ec2를 공부하여 재배포할 예정입니다.
기록, 공부, 활용