[React] Day_46 팀 프로젝트 후기

 

이번 프로젝트 요약 정리

 

오늘부터 새로운 조, 새로운 팀원들을 만나고

강의도 새롭게 올라와서 나아름 열심히 들었지만?

그래도 팀 프로젝트에 대해 적기는 적어야 할 것 같아서..

(가뜩이나 시간도 없는데 이것저것 넣을 것은 많아 정말 힘들었어서..🥲)

이렇게 적어봅니다 팀 뿌로작뜨 후-기

console.log(가보작호);

 

팀 프로젝트 - 뉴스피드 프로젝트 ( '살까 말까' Project)

우리 살카(살까말까의 캐릭터) 한번씩 봐주세요. 귀엽죠?

언능 귀엽다고 말해.

 

뉴스피드 프로젝트 (1) - 프로젝트 개요

이번 프로젝트는 내 게시물을 포함된 모든 게시물을 볼 수 있는 공간인 뉴우스피드 제작 프로젝트이다.

 

놀랍게도 발표 PPT 에서 따왔습니다..ㅎㅎ

 

주제는 유용하고 저렴해보였던 물건이 우리 집에만 오면 예쁜 쓰레기가 되는

다이소나 쿠팡에서 사는 칭구들..을 보다 현명하게 소비하고자 만들었다.

이름하야 살까말까 프로젝트.

소소한 물건들을 리뷰 및, 다른 사람들의 사용기를 확인해보는 사이트를 제작하였다.

 

뉴스피드 프로젝트 (2) - 기술 스택

사용된 기술은 다음과 같다.

 

 

그 외 라이브러리

• react-toastify
• react-hook-form
• slick-carousel

뉴스피드 프로젝트 (3) - 페이지 구성

페이지 구조는 다음과 같다.

로그인이 되어야만 게시물을 볼 수 있으며

비회원일 경우, 로그인페이지와 회원가입만 가능하도록 구조를 분리하여 제작하였다.

 

 

 

와이어뿌레임 링크 → (바로 가기)

 

뉴스피드 프로젝트 (4) - 페이지별 레이아웃과 기능

비로그인 (로그인 / 회원 가입)

 

로그인하지 않은 사용자, 로그인 페이지로 이동 (로그인 한 사용자만 홈페이지에 접근할 수 있습니다.)

로그인 페이지에서 회원 가입, 비밀번호 찾기, 페이지에 접근 가능

회원가입 시 이메일을 아이디로 사용하며 닉네임과 프로필 사진 설정 가능

(없으면 디폴트 이미지인 '살카'가 뜨게 하도록 제작)

프로필 사진을 등록하지 않을 시 기본 이미지가 자동 적용됩니다.

로그인 성공

홈

 

최신순으로 게시글 보임! (내비게이션 바를 이용해 다른 페이지로 접근 가능)

 

 

게시글 상세

 

게시글 카드 클릭 시, 상세 페이지로 이동

글 제목과 본문, 사진, 작성자와 작성 시각, 댓글과 좋아요 확인 가능

글에 첨부 된 사진이 여러장일 경우 슬라이드하여 볼 수 있도록 제작

 

그 외 기능

게시글 수정 및 삭제

좋아요 (좋아요 취소 포함)

댓글 쓰기 (댓글 게시자는 수정 및 삭제 가능)

 

 

게시글 수정 및 삭제

 

자신이 작성한 게시글만 수정 및 삭제 가능

 

검색

 

오래된 순서 → 최신 순서로 검색 결과 정렬 (제목으로만 실시간 검색 가능)

 

내 글 / 좋아요를 누른 글

 

작성한 글 및 좋아요를 누른 글을 확인 가능

 

글 작성

 

이미지를 최대 3장까지 삽입 가능 (글자 수는 10자 이상)

작성 완료 시, 내가 작성한 글의 상세 페이지로 리디렉션

 

마이 페이지

 

프로필 이미지 및 이름 수정 (비밀번호 변경, 계정 삭제 페이지 버튼 추가)

로그아웃은 마이페이지에서 가능

 

 

비밀번호 변경과 회원 탈퇴

 

아이디로 사용하고 있는 이메일 주소로 비밀번호 재설정 메일 전송 가능 (실제 이메일에서만 가능)

회원 탈퇴 클릭 시, 실제 db에서 삭제됨

뉴스피드 프로젝트 (5) - 요구사항 (필수/도전)

필수기능

 

- DB

 Supabase를 활용한 CRUD

 Supabase를 활용한 로그인, 회원 가입

 

- 유저 로그인 정보 관리

 onAuthStateChanged를 적극 활용하여 인증된 유저의 상태 변경 추적

 Context API를 활용한(혹은 다른 전역상태 툴을 이용한) 전역상태 관리

 

- 라우팅

 RRD(React Router DOM)

 

- 마이페이지

 내 게시물 보기

 프로필 수정 기능

 

- 배포

 호스팅플랫폼 Vercel 이용, 배포에 적용될 브랜치는 main 브랜치로

 

 

도전기능

 

- 로그인, 회원가입 예외 처리

- 비밀번호 찾기 기능

- 댓글 기능

- 좋아요, 북마크 기능

- memo, useMemo, useCallback을 이용한 렌더링 최적화 적용

 

뉴스피드 프로젝트 (5) - 기능 구현

 

필수 요구사항 구현에 관한 특이사항

- 내 게시물 보기 기능, 마이페이지가 아닌 내 글 페이지로

- RTK 사용한 전역상태 관리

 

로그인 정보 유지

- redux-persist 사용(로그인 정보 유지)

 

alret 처리 (React-Toastify)

- 사용자 친화적인 성공 또는 에러 메세지 출력

 

react-hook-form

- 폼 상태를 효율적으로 관리 및 유효성 검사(validation) 진행

 

slick-carousel

- 게시글에 첨부된 이미지 슬라이드

 

 

 

 

마무리 -  주말도 반납하라니... (오열)

 

원래 이것보다 더 많지만.. 생략하겠습니다..

 

하루에 2-3시간씩 자는게 일주일에 4번씩은 되다보니

몸에 한계가 오는거 같기도 하고...

처음으로 제대로 지각이란 것을 해버렸는데.. 아주 눈물이 줄줄 나버리는거 있죠..?

하아 것보다 이제 할일도 무쟈게 많은데 언제 하라는건지...

약속 하면서.. 다 할 수 있겠죠..?

일단 것보다 자야겠다

잘자요 여러분. (털썩) ㅇ<-<



 

KPT 회고

• Keep :  열정적이게 하는 내 모습 칭차내 ^-^)b
• Problem : 그것에 비해 너무 많은 강의와 과제
• Try : ... 잠을 포기해야겠지?

 

ㄲ ㅡ ㅌ