스프린트 계획

3주차 스프린트 계획 · boostcampwm-2022/web21-devrank Wiki

개요

• Devrank는 등급 시스템을 통해 Github 활동을 조금 더 재미있게 할 수 있게 유도하기 위해 기획하게 되었다.
• 지루할 수 있는 Github 활동을 게임과 유사한 등급 시스템을 통해 성취감을 느낄 수 있다고 생각했다.
• 객관화된 수치가 있으면 현재 자신의 수준과 성장에 대해서 더 파악하기 쉬울 것이라 생각했다.
• CODUCK, OPGC라는 유사한 서비스가 있으나 현재 유지보수가 되지 않고 있다.
• 점수 산정방식에 의문이 있었음. 일일커밋이 점수에 가장 중요하게 영향을 끼치고 있어 커밋각각에 대해 가중치를 부여하지 않는다. → 우리는 기여한 레포지토리에 따라 가중치를 부여해서 점수를 좀 더 의미있게 산정하고 싶었다.

질문

<aside> ❓ 메인페이지에 어떤 새로운 정보가 들어가면 좋을 것 같나요?

</aside>

프론트엔드

• 국제화 적용

  국제화 적용 완료 언어 변경시 url에 /en/, /ko/ 가 pathname앞에 붙게 된다.

  

• SSG or SSR or CSR

  • About 페이지, Not Found 페이지의 경우는 매 요청마다 새로운 데이터를 요청해서 문서를 만들 필요가 없는 페이지(매 요청마다 페이지 결과가 같음, 데이터의 최신화가 필요없음)이므로 Next.js의 getStaticProps 즉, SSG를 사용해서 빌드타임에 페이지를 생성하여 제공하는 방법을 채택했다.
  • 메인 페이지와, 랭킹 페이지는 사용자들의 순위가 매 요청마다 최신화되어 렌더링 되어야하기 때문에 빌드타임에 페이지를 만들어놓는것보다 Next.js의 getServerSideProps 즉, SSR로 각 요청마다 최신화된 데이터를 fetch해서 문서를 생성하고 제공하는 SSR을 채택했다.
  • 이외에 라우터간 이동 및 추 후 랭킹페이지 갱신 및 필터링에는 새로고침없이 바로 바로 사용자에게 변화를 렌더링하기 위해 CSR을 채택.

• 재사용 가능한 컴포넌트에 대한 고민

  

  

  

  

  

  • 컴포넌트를 만들때 여러 경우에 커스텀해서 사용할 수 있고 재사용 가능하면서

  • 개발자가 사용하기 쉽고 직관적인 구조를 가지면서

  • UI와 기능적으로 확장가능한 컴포넌트를 만들자.

  • Dropdown 컴포넌트에 compound component 패턴 적용

  • UI 적인 부분을 커스텀하게 사용자가 만들 수 있게함

  • 컴파운드 컴포넌트 패턴이 그럼 뭐야?

    • API 복잡성이 감소
    • 마크업 구조가 유연하고 직관적
    • 관심사 분리(메인 로직:state, handler는 기본 컴포넌트에서 가지고 있고 context로 자식들에게 공유 → 책임 소재가 명확히 분리됨)

    // Bad 
    return (
      <Counter
        label="label"
        max={10}
        iconDecrement="minus"
        iconIncrement="plus"
        onChange={handleChangeCounter}
      />
    );
    
    // 가독성이 좋고 props로 가장 적합한 컴포넌트에 직관적으로 전달해줄 수 있다.
    return (
      <Counter onChange={handleChangeCounter}>
        <Counter.Decrement icon={"minus"} />
        <Counter.Label>Counter</Counter.Label>
        <Counter.Count max={10} />
        <Counter.Increment icon={"plus"} />
      </Counter>
    );
    

    그럼 우린 어떻게?

    <Dropdown
      trigger={<div>드롭다운</div>}
    >
    	<Dropdown.ItemList>
    	  <Dropdown.Item>한국어</Dropdown.Item>
    	  <Dropdown.Item>English</Dropdown.Item>
    	</Dropdown.ItemList>
    </Dropdown>
    

백엔드

• REDIS의 TTL(Time To Live)을 이용하여 메모리의 값 자동 삭제
  • REDIS를 이용하여 유저 업데이트 API 제한시간 (120초)
  • 사용자들이 유저 업데이트 API를 연속적으로 요청하는 상황을 방지
• REDIS를 이용하여 유저 조회수 업데이트 시 IP주소를 기반으로 하루에 1번만 업데이트
  • user의 request IP를 redis의 key로하고, value는 SET 자료구조를 이용해서 username을 넣는다.
  • SET자료구조이기 때문에 username의 중복은 제거 가능하다.