P'LevelUp

프로젝트 & 서비스 소개

프레벨업 (P`Level Up)

프레벨업 서비스 소개

Link

• https://p-levelup.com/

Repository

• Client Repo

• Server Repo

개발문서

⚒️ 개발스택

개발 스택 소개

• 리액트 : 경험자가 없었기 때문에 구글링을 통해 장단점을 비교하여 선택 : virtualDOM을 이용한 빠른 렌더링 성능 : 가장 높은 npm 다운로드 수와 강력한 커뮤니티로 에러상황 시 빠른 대처 가능 ↔ 뷰 : vue만의 언어가 아닌(프레임워크), js를 사용하고 싶은 욕심(라이브러리) : typescript 도입 고민 https://velog.io/@leehaeun0/React-vs-Vue-장단점-비교

• 리덕스 : 리덕스는 효율적인 전역 상태관리를 위하여 사용하였습니다. : props를 통하여 계속해서 상태를 전달하는 문제를 해결하기 위해서 전역 store를 가지고 필요한 곳에서 상태를 불러와 사용할 수 있다는 장점을 활용하고자 했습니다. : 비동기 처리를 위해 redux-thunk 사용 (redux-saga에 비해 낮은 런닝커브, 처음 배우는 스택이라는 점을 고려)

• sass : 변수지정으로 편리함 ⇒ primaryColor, errorColor 등 유용하게 사용 : 반응형 구현의 이점 ⇒ mixin을 통한 반응형코드 모듈화 ↔ 스타일드컴포넌트 (css in Js) 방식도 고려 : 번들의 크기가 커지기 때문에 인터랙션 많은 사이트에서는 효율저하문제

📈 플로우차트

클라이언트 플로우차트

백엔드 플로우 차트

💾DB스키마

DB스키마

API문서

 

핵심기능 소개

• 서비스 핵심 기능
랜딩 페이지



모임 만들기
💡
클럽장이 클럽을 개설하고, 수정, 삭제 할 수 있는 기능입니다.

 
모임 등록하기

💡

사용자가 원하는 클럽을 찾고, 최종적으로 결제하여 등록할 수 있는 기능입니다.

• 내가 만든 기능
북마크 기능
💡
원하는 클럽을 북마크에 추가 및 취소할 수 있으며 마이페이지에서 목록을 확인 할 수 있습니다.

• Redux를 이용한 전역상태 관리
• 이벤트 버블링 현상
슬라이더(캐루셀)
💡
메인페이지에서 컨텐츠 광고 배너를 구현하였고, 카테고리에 맞는 클럽들을 각각의 슬라이더에 넣어 넘기면서 볼 수 있도록 하였다.

• 캐루셀 동작원리 : 가로정렬(flex) → 이동(translate3d) → 부드럽게(transition: transform 0.2)
• Slick 라이브러리 사용
• 클럽슬라이더에서 반응형에 따른 카드개수 조절 가능
• lazy loading 지원
• 어려웠던 점 : 라이브러리이기 때문에 커스텀의 어려움


 
반응형 구현

• SCSS mixin (css변경시)

// 반응형 지점 설정
$breakpoints: (
  'x-small': ( max-width: 575px ),
  'small': ( max-width: 768px ),
  'medium': ( min-width: 769px )
  and
  ( max-width: 992px ),
  'large': ( min-width: 993px),
  'not-mobile': ( min-width: 769px),
) !default;

@mixin respond-to($breakpoint) {
  // 화면 크기를 받아서 연결
  @if map-has-key($breakpoints, $breakpoint) {
    // 해당 크기에 맞는 media query값 리턴
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }
  //해당하는 크기 존재하지 않는다면 경고창 띄움
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

• react-responsive (구조 변경 시 - header, 디테일페이지, 결제페이지)

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const Mobile: React.FC = ({ children }) => {
  const isMobile = useMediaQuery({
    query: '(max-width:768px)',
  });
  return <>{isMobile && children}</>;
};

const Tablet: React.FC = ({ children }) => {
  const isTablet = useMediaQuery({
    query: '(max-width:991px)',
  });
  return <>{isTablet && children}</>;
};

const Desktop: React.FC = ({ children }) => {
  const isDesktop = useMediaQuery({
    query: '(min-width:992px)',
  });
  return <>{isDesktop && children}</>;
};

export { Mobile, Tablet, Desktop };

배포
• Client (HTTPS까지 적용하기)
• Rout53(도메인구입) ⇒ S3 (버킷 생성 및 업로드) ⇒ CloudFront (빠른 속도 & HTTPS 배포 위해) ⇒ AWS Certificatiom (인증서발급)
• Server(HTTPS 적용)
• 프론트배포된 도메인확인 → ACM인증서 발급 → 로드밸런서로 인증서를 EC2에 적용 → Route53으로 도메인주소와 로드밸런서 주소 연결
 

추가진행사항