우리는 한다, 개발을.

intra PNet 패널 정산 다운로드 개발일지

⌛ 3 mins

1. 진행

2. array.reduce() 메서드

3. 잘못 사용한 array.map(() =>{}) 메서드


기존 PNet 프로젝트 목록들을 다운로드 받는 기능을 추가된 항목을 붙이는 작업을 맡게 되었다


분석

작업할 DB의 테이블들

설문에 참여하는데 필요한 데이터의 테이블명이 Log_Svy_xx(01~12) 설문에 참여와 참여완료 데이터들이 해당 테이블에 쌓이게 된다

각 설문의 정보는 Project_List(메인 프로젝트 목록)와 Project_Svy(서브 프로젝트 목록)으로 구성이 됨

위에서 언급한 Log_Svy_XX 테이블들의 데이터가 들어가는 조건은 메인프로젝트가 몇 월에 생성되어는지 알아야 한다.

여기서 Project_Svy_Group, Project_Svy_GroupDetail 테이블도 포함이 되어 있다

예시)

5월에 생성된 메인프로젝트 아래에 6월, 7월에 생성된 서브 프로젝트들 각각에 서브프로젝트로 설문 데이터들이 메인프로젝트의 생성된 월을 참조하여 Log_Svy_05 테이블로 데이터들이 쌓이게 된다.


진행

각 서브 프로젝트(설문)내에 있는 매출탭 정보의 일부 데이터를 붙여주는 로직을 작성을 해야 합니다.

로직 순서

  1. 기간내에 해당되는 서브 프로젝트의 종료일 기준으로 목록을 검색
  2. 각 서브 프로젝트(설문)들로 그룹별로 개수, point, total 개수들 구함
  3. 검색된 그룹별로 Object에 가공하는 과정
  4. 각 서브프로젝트에 HSID의 값이 있으면 패널허브 정보를 갖고옴
  5. 엑셀 시트에 작성

느낌점

기존 매출 탭에 작동되는 소스들을 분석 후에 생각난 느낌 점은

기존 다운로드의 기능을 참조를 한다고 해도 이건 DB에 부담되는 작업이라고 생각이 든다

어찌됐든 간에 기존 소스를 참조하여 작업을 시작이 되었고, 여기 저기 문제가 많이 발생하게 됩니다.


문제점

  1. 프로젝트 목록을 불러오는 쿼리문의 조건은 서브 프로젝트의 기간으로 검색이 되기 때문에 많은 서브 프로젝트의 목록들이 검색이 되고 Log_Svy_xx 테이블들에서 데이터를 찾아야 하므로 DB에 부담감이 가는 작업이다
    • 각 서브프로젝트의 그룹별로 검색을 하고 count와 완료 상태(C, S, Q, B) / 완료 디테일상태(CO1, CO2, CO(N)…, SO1, SO(N)…, QO, BO, BO1)개수를 파악 해야 하기 때문에 쿼리문 검색을 할때가 DB에 부담이 가는것 사실이다
    • 해당 부분은 array.reduce() 메서드를 사용하여 메인프로젝트의 몇월을 구분하여 그룹화 하는 방식을 조언을 받아 쿼리문도 부담이 가지 않는 방향으로 작성
    • Log_Svy_xx 테이블 검색 조건을 메인프로젝트의 번호 in ()으로 검색 방법으로 필요한 정보만 검색을 할수 있도록 작성하였다
  2. 그렇게 구한 프로젝트별 그룹들을 결과 받아서 Object 형태로 가공
    • array.reduce() 메서드를 사용하여 내에서 리턴 받은 값을 변수 prev와 지금의 값 부여된 변수 curr로 작업을 진행
    • JSON 형태로 가공하는데 if문을 많이 사용한 점에서 아쉬움이 있다
    • 구상한 JSON 형태
      {
      "메인프로젝트 번호" : {
      "서브프로젝트 번호" : {
         "그룹 ID": {
            "상태(C,S,Q,B)" : {
               "자세한 상태(CO1, CO2, SO1, QO, BO, BO1)": {
                  "cnt": 12,
                  "total": 200
               }
            },
            "세팅비": 0
         }
      }
      }
      }
      
  3. axios의 제한 시간이 2분내에 다운이 돼야 하는 문제
    • 2분내로 몇 개월까지 다운이 되는지가 관건
    • 최대 6개월까지 2분 이내로 다운 받아지는것을 테스트로 통해서 알 수 있었다
    • 제한 시간을 늘릴수 있지만 2분으로 합의함

완료

패널 정산 버튼

패널 정산 페이지

패널 정산 페이지 내에 추후 옵션들이 들어갈 예정이라고 한다.(아직은 결정된 사항이 없음)


array.reduce() 메서드

PNet의 view페이지에서 사용한적은 있으나 해당 메서드를 통해서 그룹화로 만들 생각을 못함

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce


잘못 사용한 array.map(() =>{}) 메서드

배열이나 배열 내용과 새로운 배열을 재구성하는데 사용되는 메서드로서, map 메서드를 forEach 메서드 처럼 작동을 하길래 그대로 map 메서드를 사용했던 점에 있다.

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map