필수 항목
- 프로젝트 개요
- 협업: 프로젝트 관리, 업무 분배, Merge 까지의 과정 등
- 기술 스택
- 서비스 소개
- 시연 영상(편집X, 실시간)
<aside>
💡 시연 영상은 미리 찍어둔 영상이든, 최종 프로젝트 발표 영상 녹화 중 발표자가 실시간으로 시연을 진행하든 형식은 상관 없습니다. 여기서 핵심 포인트는 시연에는 편집이 진행되면 안 된다는 것입니다.
</aside>
목차
01. 프로젝트 개요
- 프로젝트 소개
- 프로젝트 선정 배경
- 주 타겟층
- 기대효과
- 팀 소개 (재밌게~) (업무분배 요소추가)
02. 기술 스택
- 백엔드 기술 스택
- 프론트엔드 기술 스택
- 협업 툴 (노션, 슬랙) → 설명하면서, ~~~ 프로젝트 관리 및 브랜치전력, 지라 티켓 PR리뷰 어케했는지 보여주고~
03. 트러블 슈팅
- 백엔드 (간략하게 2 ~3개)
- 프론트엔드 (간략하게 2 ~3개) → 바톤 이어받아서 발표.
- 다이나믹 임포트
- 하위에서 데이터를 받아온 다음에 랜더링이 되어야함
- 근데 랜더링 된 다음에 데이터가 들어가게 되니까
- 하위 컴포넌트를 랜더링하는데 에러가 남
- 못 그려서 주기 때문에 에러가남
- 랜더할 수 있는 조건이 완료 되었을때 그때 임포트하여 할 수 있게 다이나믹 임포트를 사용했다.
- 로그인 여부 처리 한계점
- 로컬이 더 빠를수없다. → 로컬에서는 빌드로 처리 →
04. 시연 영상
<aside>
👉 step1. 이벤트 생성
</aside>
- 로그인 페이지
- 메인 페이지
- 이벤트 생성 페이지
- 이벤트 정보
- 입력없이 next → errorAlert 띄우기
- 제목 :
메리크리스마스
- 참여인원수:
5
- 커버이미지:
3번
- next
- 선물 타입 설정
- 선물 등록
- 선물 추가하기 버튼 클릭
- 1번 선물
- 제목:
커피
- 사진:
기프티콘 3장 (멀티 선택)
- 메세지:
별다방 쿠폰 번호: 임의의 쿠폰 번호
- (메시지 예시 : 스타벅스 : 9508 8701 4562)
- 2번 선물
- 완료
- 타이머 설정
- 현재 시간 확인
- 이벤트 오픈 시간 설정 (나중시간!!!!!)
- 이벤트 종료 시간 설정 (알아서)
- finish
- 링크 생성 완료
- 시연 영상 시 해당 이벤트 링크 뿌릴 예정 언급!
- 해당 링크로 바로 들어가기
- 생성자는 참여할 수 없다는 alert 보이기
- 이벤트 생성자
- 랜덤 선물 받기 페이지
- 사전에 미리 만들어진 랜덤 선물 페이지에 들어가서 선물을 받는다. (시간 관계상 미리 만들어 놓은 것을 언급)
- 타이머 ~~~초 남았을 때 선물 못받음 표시 보이기! (타이머 많이 남아있는 것 접속)
- 타이머 00 됐을 때 밀어서 선물 받기 (오픈 되어있는 것 접속)
- 선물 랜덤으로 받아짐
- 이미지 저장
- 눈치게임 선물 받기 페이지
- 선물 디테일 페이지
- 마이 페이지 - 받은 선물함
- 마이 페이지 - 나의 이벤트
로그인 인증 인가 처리 스크립트보드
문제인식
처음 로그인 페이지를 제외한 모든 페이지는 우리 서비스에 가입한 사용자만 접근이 가능하다.
로그인이 되어 있지 않았을때 로그인 페이지로의 라우팅 처리를 모두 해주었다.
그런데 이번에 저희가 사용한 Next.js는 SSR로 동작하기 때문에 서버에서 내려준 기존 페이지를 받은 후에야 react에서 로그인 여부를 확인하게됩니다. 결국 잠시 동안은 기존 페이지가 보이는 문제가 발생하였습니다.
해결 방안
SSR에서 로그인 처리를 시도해보고자 하였습니다.
여러 자료와 론 멘토님의 조언대로라면 서버에서 직접 인증을 거치는 방식의 로직이 필요했습니다.
인증을 서버에서 처리하기 위해 프론트에서 백엔드에 요청을 보낼 때, Next JS의 getSeverSideProps 옵션에 쿠키 값을 지정하여 보내는 방식으로 말이죠.