• 선택 항목

    • 디자인 시스템
    • 시장 조사
    • 등등

  • 필수 항목

    • 프로젝트 개요
    • 협업: 프로젝트 관리, 업무 분배, Merge 까지의 과정 등
    • 기술 스택
    • 서비스 소개
    • 시연 영상(편집X, 실시간)

    <aside> 💡 시연 영상은 미리 찍어둔 영상이든, 최종 프로젝트 발표 영상 녹화 중 발표자가 실시간으로 시연을 진행하든 형식은 상관 없습니다. 여기서 핵심 포인트는 시연에는 편집이 진행되면 안 된다는 것입니다.

    </aside>

    • 팀 소개 페이지(각 포지션 및 이름 기입)

    목차

    01. 프로젝트 개요

    • 프로젝트 소개
    • 프로젝트 선정 배경
    • 주 타겟층
    • 기대효과
    • 팀 소개 (재밌게~) (업무분배 요소추가)

    02. 기술 스택

    • 백엔드 기술 스택
    • 프론트엔드 기술 스택
    • 협업 툴 (노션, 슬랙) → 설명하면서, ~~~ 프로젝트 관리 및 브랜치전력, 지라 티켓 PR리뷰 어케했는지 보여주고~

    03. 트러블 슈팅

    • 백엔드 (간략하게 2 ~3개)
    • 프론트엔드 (간략하게 2 ~3개) → 바톤 이어받아서 발표.
      • 다이나믹 임포트
        • 하위에서 데이터를 받아온 다음에 랜더링이 되어야함
        • 근데 랜더링 된 다음에 데이터가 들어가게 되니까
        • 하위 컴포넌트를 랜더링하는데 에러가 남
        • 못 그려서 주기 때문에 에러가남
        • 랜더할 수 있는 조건이 완료 되었을때 그때 임포트하여 할 수 있게 다이나믹 임포트를 사용했다.
      • 로그인 여부 처리 한계점
      • 로컬이 더 빠를수없다. → 로컬에서는 빌드로 처리 →

    04. 시연 영상

    <aside> 👉 step1. 이벤트 생성

    </aside>

    1. 로그인 페이지
      • 카카오 로그인하기 버튼 클릭
    2. 메인 페이지
      • 영상 확인
      • 이벤트 만들러가기 버튼 클릭
    3. 이벤트 생성 페이지
      • 이벤트 정보
        • 입력없이 next → errorAlert 띄우기
        • 제목 : 메리크리스마스
        • 참여인원수: 5
        • 커버이미지: 3번
        • next
      • 선물 타입 설정
        • 랜덤박스로 pick
        • next
      • 선물 등록
        • 선물 추가하기 버튼 클릭
          • 1번 선물
            • 제목: 커피
            • 사진: 기프티콘 3장 (멀티 선택)
            • 메세지: 별다방 쿠폰 번호: 임의의 쿠폰 번호
            • (메시지 예시 : 스타벅스 : 9508 8701 4562)
          • 2번 선물
            • 제목: 치킨
            • 사진: 기프티콘
        • 완료
          • 꽝 개수 확인 후 next
      • 타이머 설정
        • 현재 시간 확인
        • 이벤트 오픈 시간 설정 (나중시간!!!!!)
        • 이벤트 종료 시간 설정 (알아서)
        • finish
      • 링크 생성 완료
        • 시연 영상 시 해당 이벤트 링크 뿌릴 예정 언급!
        • 해당 링크로 바로 들어가기
        • 생성자는 참여할 수 없다는 alert 보이기
        • 이벤트 생성자
    4. 랜덤 선물 받기 페이지
      • 사전에 미리 만들어진 랜덤 선물 페이지에 들어가서 선물을 받는다. (시간 관계상 미리 만들어 놓은 것을 언급)
      • 타이머 ~~~초 남았을 때 선물 못받음 표시 보이기! (타이머 많이 남아있는 것 접속)
      • 타이머 00 됐을 때 밀어서 선물 받기 (오픈 되어있는 것 접속)
      • 선물 랜덤으로 받아짐
      • 이미지 저장
    5. 눈치게임 선물 받기 페이지
      • 사전에 미리 만들어진 눈치게임 선물 페이지에 들어가서 선물을 받는다. (시간 관계상 미리 만들어 놓은 것을 언급)
      • 커피 선물 get 눌러서 선물 받기
      • 만나서 커피 교환권 당첨
      • 당첨 alert의 get 클릭
      • 마이페이지 선물 디테일로 이동
    6. 선물 디테일 페이지
      • 사용완료로 토글 전환
      • 뒤로가기
    7. 마이 페이지 - 받은 선물함
      • 사용완료 필터 클릭
      • 방금 토글처리한 선물이 사용완료된 것 확인
      • 나의 이벤트 탭으로 이동
    8. 마이 페이지 - 나의 이벤트
      • 전체 - 보여주고 설명하고 패스
      • 대기중 - 보여주고 설명하고 패스
      • 진행중 - 보여주고 설명하고 패스
      • 종료됨
        • 이벤트 클릭하여 디테일 페이지로 이동
        • 당첨자 정보 클릭
        • 생성된 이벤트 하나 삭제
      • pc화면 및 S5모바일 크기로 선택하여 보여주기 (갤럭시 5G)

    로그인 인증 인가 처리 스크립트보드

    문제인식

    처음 로그인 페이지를 제외한 모든 페이지는 우리 서비스에 가입한 사용자만 접근이 가능하다.

    로그인이 되어 있지 않았을때 로그인 페이지로의 라우팅 처리를 모두 해주었다.

    그런데 이번에 저희가 사용한 Next.js는 SSR로 동작하기 때문에 서버에서 내려준 기존 페이지를 받은 후에야 react에서 로그인 여부를 확인하게됩니다. 결국 잠시 동안은 기존 페이지가 보이는 문제가 발생하였습니다.

    해결 방안

    SSR에서 로그인 처리를 시도해보고자 하였습니다.

    여러 자료와 론 멘토님의 조언대로라면 서버에서 직접 인증을 거치는 방식의 로직이 필요했습니다.

    인증을 서버에서 처리하기 위해 프론트에서 백엔드에 요청을 보낼 때, Next JS의 getSeverSideProps 옵션에 쿠키 값을 지정하여 보내는 방식으로 말이죠.

    하지만 이 경우 쿠키 값을 프론트에서 저장하고 있어야 하기에 보안 이슈가 있습니다. 보안을 위해서는 중간다리 역할로 노드 서버가 필요하게 되구요.

    문제 해결

    하지만 현재 노드서버를 따로 구축하기에는 일정상 무리가 있었고, http-only 세팅을 하기 위해선 백엔드의 추가적인 작업 또한 필요한 점을 고려하여 이번 프로젝트에서는 access 토큰을 로컬스토리지에 저장하여 사용했습니다. 기존 페이지가 보이던 문제는 렌더링 시 조건을 추가하고, 이에 따른 스피너 처리를 통해 UX적으로 문제를 해결하였습니다.

    다이나믹 임포트 스크립보드

    개선사항

    dynamic import란 번들 파일을 빌드 타임이 아닌 런타임에 불러오는 동적 임포트 방식입니다.

    NextJS에서는 dynamic이라는 모듈을 사용하여 dynamic import가 가능합니다..

    (문제) 예를 들어 마이페이지 라우트에 매칭되는 index 파일 외의 루트 컴포넌트는 초기 로딩 시에 불러올 필요가 없습니다. NextJS가 SSR 환경에서 동적으로 모듈을 가져올 수 있다는 점을 활용하여 해당 페이지에 대해 리팩토링을 진행해보았습니다.

    (해결) 테스트를 위해 마이페이지의 하위 컴포넌트인 Tab과 TabPannel, GiftList와 EventList 컴포넌트를 동적으로 importing했습니다.

    (결과) 결과는 아래와 같이 마이페이지의 First Load 와 Size 가 줄어들었습니다.

    이에 따라, 번들링 과정에서 시간이 단축되었다는 것을 알 수 있습니다.

    추후 이와 같은 방식들을 적용해보면서 성능 개선을 계속할 예정입니다.

    (마지막 스크립트에서) 발표는 여기까지고, 준비한 시연 영상 보여드리며 마무리하겠습니다.