Internship - task

심준보·2023년 10월 31일
post-thumbnail

최신업데이트 날짜 - 24.01.04

국내알파리뷰 - 보수작업

작업 전 pull
branch 새로 파기

  1. backend - master (origin)

  2. frontend - develop (origin)

local로 작업

- branch를 새로 파면, 다시 가상환경을 구축해야하고 , 헤야되는것인가

- pull을 잘못하면 내가 꾸려놓은 가상환경 activate가 날아가나 (x)

내가 어떤 다른 명령어를 했기 때문,,

즉 , 다시 activate환경 설정 -> pip list적합하게

- pip list를 작업할때마다 설치를 해줘야하나(x)

// < 작업 환경설정 하기 >//

  1. 가상환경 다시 구축
  2. 가상환경에 필요한 라이브러리 pip사용하여 설치 - 버전 중요
  3. pycurl 과 같은 것은 안되거나 권한이 필요 -> 일단 주석처리 하고 다음단계 진행
  4. pycurl == 7.43.0.5 로 환경 설정 완료
  5. front => ng serve
  6. http://localhost:4200 로 로컬접속

// admin-board/table 접속 하면 에러 발생(api문제)

-> 이는 내가 받은 db가 옛날 꺼라 컬럼이 일치하지 않기 때문이다.

이러한 에러를 알기 위해

setttings.py에 debug = True

를 해주면 터미널에서 어떠한 오류인지 이유를 알 수 있다.



#.11/1 task#1

1. 리뷰 정렬 확인

1. 최신순 , 오래된 순, 평점 높은 순, 평점 낮은 순등에 대한 리뷰데이터 정렬 처리하기

2. 로딩 속도 개선하기

#1. 최신순 , 오래된 순, 평점 높은 순, 평점 낮은 순등에 대한 리뷰데이터 정렬 처리하기

기존 코드의 문제점

  • dashboard 창에서 , 리뷰의 정렬상태를 다르게 하고 싶을때, 조건을 변경하여도 적용이 안되어 최신순 리뷰데이터 순으로만 정렬되는 현상 발생

  • 문제점

    • 프론트에서 정렬상태 조건값을 서버로 넘겨주나, 서버는 위 조건을 처리하지 않고 사용자에 맞는 리뷰데이터만 넘겨주는 역할을 함
    • 그리고 받은 데이터로, 프론트는 최신순으로 정렬하는 함수를 통해 리뷰 데이터를 정렬함
  • 해결을 위해,

    • 서버에서(백엔드) 조건 값을 받아온 뒤, 그 조건에 맞게 데이터를 정렬하여 프론트에 응답하는 코드로 변경


변경 후 ,

  • 조건에 맞게 리스트가 정렬됨
  • 하지만,
    • 리뷰 데이터를 정렬하는 속도가 너무나도 느림

위 사항을 개선해야할 필요성이 있다.

#2. 로딩 속도 개선하기

현재 상태

  • serializer 된 reviewdata의 data를 처리하는데 시간을 많이 소비한다.
  • .data를 빠른 시간내로 처리하는 방안 필요

선배님 피드백

  • 정렬상태가 날짜와 같이 적용되는거 같지 않다 . 즉 기간 적용이 안되어 전체 데이터에서 처리를 하는거같다.
  • 그렇기에, default 데이터를 전체리뷰가 아닌, 한달 리뷰데이터에서 처리가 되게끔 한다면 더 빨라질 것이다.

해결방안

  • 전체 조건에 , created_at 필드값이 from_data와 to_data사이에 있는 경우만 추출되게끔 처리를 하기
  • 지금 현 상황이, 던져주는 값이 어떠한 기간값을 설정해도 전체데이터이다
  • 그래서 로딩시간이 오래걸리는것

(+) 추가로 , 한번에 모든 리뷰데이터를 다 로딩하려는 문제점 발견

-> 이를 해결하고자 , 4번쨰 페이지까지의 데이터만 먼저 로딩하는 것으로 변경


    1. 기존과 다르게 , review_selected를 조건문마다 중복을 시키는 것이 아닌, 조건문(최신순,오래된순,평점높은순,평점낮은순)을 실행하기전에 먼저 수행되도록 수정
    1. 기존의 코드는 , 필터링조건이 실행되면 사용자가 지정해놓은 기간은 적용되지 않고 전체 리뷰리스트에 대해서 필터링이 되었다.
    • 이로 인해, 전체 리뷰에 한해서 필터링이 되기때문에 시간도 오래걸릴뿐더러 필터기능이 제대로 되지 않는 것이었다.

  • 이를 해결하기 위해 ,

    __gte ,

    __lte

    orm을 적용 -> 위 두개는 filter()내의 조건문에서 '이상' ,'이하'를 적용시킬 수 있는 것이다.

이렇게 하여 , 기간별 필터링 조건이 적용되게 제대로된 필터 기능 구현

결과 ,

"휴즈네스트" 라는 쇼핑몰을 타겟으로 필터기능 수행하였을때 // 화면 로딩 시간 분석

리뷰데이터

100~150 개 : 10초 이내
1000~2000개 : 1분~1분30초 이내
8000개 이상 : 4분 이내

결론적으로, 데이터가 많은 볼륨이 큰 업체같은 경우에서는 로딩시간이 길어지는 문제가 계속 야기,
하지만,
기능적인 부분에서는 정상적으로 작동하기에 이번 테스크는 이렇게 마무리.
추후, serilaizer 부분에서 로딩속도를 개선할 수 있는 방안을 탐색해볼 예정



#.11/6 task#2

1. 필터 조건 추가

1. 현재 지급예정, 지급대기에 맞는 필터기능이 , cafe24와 같이 나오면 안될 데이터까지 나오고 있다

2. task1의 날짜,평점에 맞는 정렬기준에 현재 조건까지 추가하여 병합하기

#1. 지급예정 및 지급대기에 맞는 필터링 조건 추가하기

기존 코드의 문제점

  • dashboard 창에서 ,고급필터영역에서 지급대기 및 지급예정 체크박스를 선택하였을때 , 알맞게 필터링이 되지 않는 현상

  • 문제점

    • 서버에서, 지급예정 및 지급대기에 맞는 필터링 조건을 따로 처리해주지 않는다.
    • 이로 인해, 나오면 안될 데이터인 cafe24 or 네이버페이구매자등과 같이 불필요한 데이터까지 나오게 된다.
  • 해결을 위해,

    • 서버에서(백엔드) 지급예정 및 지급대기 값이 선택되었을때의 조건을 따로 만들어주어 필터링이 제대로 되게끔 변경한다.


  • 기존에는 "경고리뷰 - warning , 물음표 - reward_question_mark"를 제외하고는 모든 영역에서 필터링 조건을 똑같이 적용
  • 이를 해결하고자 , 지급예정&지급대기에 맞는 새로운 조건문을 중간에 추가하여 위 둘 사항이 체크되었을때 따로 조건문이 실행하게 적용

orm - filter(reward_status_new = reward_status_list[i]) 사용

위를 통해,

지급대기&지급예정을 선택하였을때는 정확하게 "알파리뷰"에서 작성된 리뷰만 필터링이 된다.

#2. task1의 날짜,평점에 맞는 정렬기준에 현재 조건까지 추가하여 병합하기

  • 문제점
    • 고급필터가 적용될 경우 , 날짜 및 평점에 따른 리스트 정렬이 되지 않는다.
    • 날짜 및 평점 정렬이 시작된 경우 , 고급필터가 적용되지 않는다.
    • 즉 , 따로 작동하며 상호작용이 일어나지 않는다
  • 해결을 위해,
    • 고급필터가 적용된 변수를 복사하여 날짜 및 평점에 사용되던 변수를 대체하도록 코드를 변경하였다.


  • "오래된순" 으로 정렬상태가 변경되었을떄, review_copy라는 미리 복사해놓은 필터가되어 들어가있는 변수에서 새로운 조건을 추가하는 것을 볼 수 있다.

  • 이로 인해, 고급필터 후의 정보가 저장된 변수를 정렬상태가 변동되었을때도 사용할 수 있는 것이다.

#.11/15 task#3

1. 새로운 필터 만들기

1. FE : 대시보드에 새로운 필터 항목 추가

2. BE : 기존 filter api 수정 - 새로운 필터 적용 version

  • FE

    • 기존 코드 로직과 동일하게 , material쪽에서 checkbox를 추가
  • BE

    • 새로운 필터의 조건에 맞는 field을 찾은 후, 그 field 값이 추출되도록 orm -filter() 적용

#.11/17 task#4

1. 새로고침 없이, 바뀐 데이터 적용되게


알아야할것,

클릭하였을때 불러지는 api에서 ,

to_be_pay_date 값이 today날짜로 변경이 된다. // 원래는 null값이다.


  1. datasource_setting() 함수에서 html에서 다뤄지는 변수값 조정이 이루어지므로,
    여기서, 값을 조정해야될 필요성이 생김

  2. 즉 , 클릭을 통해 // to_be_pay_date값이 생겼다면, "checkreward_on" 은 true로, "reward_status_new" =10으로 변경을 해준다.

  3. checkreward_on 는 , html에서 ngif 를 사용하기 위해 새로 생성한 변수이다.
    함수를통한 관리가 아닌, 변수를 통해 관리하기 위해

어려웠던 요인 //

잘 짜인 코드라고 생각했으나 , 작동에 문제가 있었던 이유는

reward_satus_new = 10 인 상태에서 review.total 또는 "지급예정" 두개의 상태가 관리된다고 생각했으나, 그것이 아니라 초기 {review.total} 상태일떄는 reward_status_new가 11 로 관리가 되어있었다.

그렇기에 , 아무리 checkreward_on을 true로 변경을 하여도 더 상위의 div 값 ngif 가 일치하지 않았기에 작동이 되지 않았다.



  • 위 방식대로 하면, 문제가 하나 생긴다.

상위인 reward_status_new = 10 div일때는 두가지 , 이때는 pay_date는 무조건 있고, checkschedule함수에 의해 나누어지는 부분이다.

하지만, 이부분을 위의 방식처럼 checkreward_on으로 관리 방식을 바꾸게 된다면,
checkschedule 로 인해 관리되는 부분은 필요없는 코드가 되어버리는것이다.

그렇기에 , checkreward_on은 처음에 검증하는 방식으로만 쓰인다는 생각으로 쓰고, 지금은 위 변수는 없애주었다.

없애도, reward_status_new가 10으로 바뀜으로써 원활하게 관리된다.



#.~12/17 task#5 - channeltalk

1. 채널톡 DB update

알파리뷰 db에 저장되어있는 고객 정보를

채널톡 db로 주기적으로 update 시키는 작업





#.12/20 task#6

1. 어드민 기본값 수정

  • FE
    - 어드민 위젯 종류 확인
    • 그에 맞게 default값을 요구사항에 맞는 값으로 모두 수정
  • BE
    - 어드민 위젯 종류 확인
    • 요구사항에 맞게 값 수정


#.12/26 ~ 12/28 task#7

1. datepicker 기능 추가

  • 현재 알파리뷰 대시보드의 datepicker는 기간별 선택만 가능했다.
    즉 , 23.12.14 ~ 24.08.13 이런식으로 기간이 정해져있어야 필터링 기능이 작동하다는 것이다.

    하지만, 단일 선택 기능이 추가되면 좋겠다는 요구사항을 받았다.

    즉 , 이제부터는 datepicker상에서 ,
    단 하루의 날짜를 선택할 경우에도 그 날짜에 맞는 단일날짜 필터링이 수행되어야 된다는 것이다.

    23년 12월 28일 선택할시 -> 작동안하는것이 아닌, 23.12.28~23.12.28 로 단 하루날짜로 필터링이 작동이 되게끔.

고민사항

  1. datepicker자체적으로 기간별 필터링만 수행이 되는 material를 사용한것이 아닌지?

    • 위와 같은 생각에,
      처음에는 그러면 option값에 따라서 다른 material이 불려와지게끔 하자란 생각을 가졌다.
      하지만, 이는 더 복잡해질것이다. 라는 피드백과 함께. 좀 더 코드를 파헤쳐봐야겠다는 결론을 냈다.
      즉, 위 방법 말고 좀 더 부드러운 방법이 있을것이라 생각했다.

위 고민사항을 토대로 , 다시 코드를 파헤쳐보았다.

현 datepicker의 수행 방법은 , 기본적인 달력을 가지고만 오고, 수행 동작 함수는 코드로 작성이 되어있었다. 현 코드는, from 과 to가 설정이 되어야 필터링이 되는 필터링 함수가 작동이 되게 되어있던 것이었다.

그랬기에, 이는 코드 재작성으로 수정이 가능하겠다는 생각을 하게됬다.

수행 방법

  1. option 추가

    • 현재의 option값은 '오늘' ,'전체' , '7일' ,'한달' 등 datepicker를 사용하지 않아도 쉽게 필터링을 할 수 있도록 편리기능처럼 제공이 되어있었다.

    • 이에 나는 '단일' 이란 option을 추가했다.

  2. 그래서, 사용자가 option -'단일'을 선택할 경우에는 단일 필터링 함수가 불려지도록 하려는 의도였다.
    즉 , 그 외에는 기존의 필터링 함수가 작동하고, 단일 선택시에만 단일 필터링 함수가 작동이 되게!

  3. 새로운 전역 변수 생성 'onlydate'란 변수 생성

onlydate = false;
  1. option - '단일' 선택시, onlydate 변수가 true로 변경 되게 !

if (option = '단일'){
  this.onlydate = true;
  }
  1. 그 후 *ngIf로 상태처리 - html
  <form *ngIf='onlydate'>...단일선택 함수 불려지게...</form>
  .
  .
  .
  .
  <form *ngIf='!onlydate'>...기존 함수 불려지게...</form>

이런식으로 , 상태처리를 해주었다.

  1. 마지막으로 , 단일 선택 함수는 이런식으로 구성한다.
   onlyDateSelection(date: NgbDateStruct) {

   		.
  		.생략
  		.
  
  		//변경파트
  
        this.toDate = date;
  		
        this.fromDate = date;
        
		//변경파트
		.
  		.생략
  		.

  
    }

즉, toDate와 fromDate둘다 date로 설정함으로써 단 하루것만 필터링이 될수 있게 된다.
기존에는, 여러 조건문을 활용하여 ,두가지 선택이 되어야만 필터링이 되게 되는 함수로 구성이 되었다.
그 함수를 건드는것보다는, 새로운 단일 함수를 생성하는것이 더 사용성이 좋다고 생각되어 새로운 함수를 생성했다.

QA

  • 그렇다면, 다시 option을 '단일'외에 다른것으로 선택으로 변경하였을 경우에는
    다시 기존의 datepicker로 작동이 되는가? -> x
  • 이를 보완하고자,
    다른 option을 클릭할시, onlydate 변수를 다시 false로 변경해줌으로써 위의 제약사항을 해결했다.


이로써 '단일 선택' 기능이 추가된 datepicker가 완성이 된다.

#.12/29 ~ 1/2 task#7-2

1. datepicker 요구사항 변경으로 인한 재작업

단일 선택 모드가 가능하게 작업을 완료하였었다.
기획팀은, 사용자 관점에서 단일모드 선택이 따로 독립적으로 위치하는 것이 좋을 거 같다는 판단을 하였다.
그래서, 재작업을 진행하였다.


  • 기존 작업 IMG

    • 보면, 기존의 모드선택은 7일,15일,한달 등 기간선택모드였다.
    • 위 선택창 아래에 단일이란 선택사안을 추가한뒤 작업을 진행하였는데, 이는 가시적으로 좋지 않게 보이고 쓰임으로써도 기간선택안에 단일모드가 있다는 것이 통일이 안되어 보일 수 있다고 공감헀다.
  • 재작업 IMG

    • 이런식으로, 단일 선택 모드를 따로 선택할 수 있도록 체크박스로 구축했다.
      '이때, 체크박스 이슈로 조금의 고생이 있었다.'

하지만, 기획 조정이 한번 더 되었다.

  • 기존의 요구사항은,
    단일모드를 선택한 후 , 날짜를 선택하는 것이었는데 이것이 반대로 변경되었다.
  • 최종 요구사항
    • 날짜를 선택하던 도중, 하루를 선택하고 나서 단일 모드를 선택하면 반영이 되게끔
      바뀌었다.
  • 위 요구사항으로 작업을 재진행하던 도중, 어려움에 겪었다.

    처음에는, 위 요구사항으로는 안될거 같다는 판단이었다.
    이유는, 날짜를 선택 한 후 모드를 선택 할 경우, 날짜 데이터값이 전달이 안될 거라고 생각했다.
    실제로 , 작업 후 진행하였을때도

    • UNDEFIEND 로 화면에 표시되었다.
  • 하지만, 고민이 짧았단 판단하에 다시 한번 고민을 해보았고 해결방법을 찾을 수 있었다.

  • 작업도중, 어려움은

    • 하루의 날짜가 선택 되고 난 뒤, 단일모드 선택 체크박스를 하였을 경우는, 단일모드가 켜지기만 할뿐 필터링이 즉각 되지 않았다.
    • console을 찍으며 계속 돌려보아도 , 그 로직의 console은 먹지 않았다.
  • 문제의 원인

    • 문제의 원인은 날짜를 필터링 하는 함수 자체가 끝이 났었기 때문이다.

    • 하루를 선택한 거 자체로, 그 필터링 함수는 동작이 끝이 난다.

    • 그렇기에 필터링 함수를 재호출을 하는 것이 필요했다.

  • 그래서 , 단일모드 선택으로 변경되는 함수가 끝나고 난 뒤, 날짜필터링 함수를 호출하게끔 수정하였다.

  • 이때, 전달될수 없었다고 생각한것은 오류였다.

  • 하루의 날짜를 선택했을떄 할당되는 전역 변수인 "fromdate"에 날짜의 값이 저장이 되어있고,
    재호출할때 위 값을 인자로 사용하면 되었다.

이렇게 해서 , "날짜 선택 후 모드 선택" 요구사항에 맞게 재작업을 했다.

이번 태스크를 하면서 느낀점이 있다.

  1. "소통" 은 중요하다.
  • 현재 기획-개발 회의에 참석하지 않고 회의를 통해서 나온 결과값을 전달받아 작업을 진행하는 프로세스로 작업을 진행하고 있었다.
  • 이는, "맡은 작업" 에 대해서 기획자에게 직접적으로 전달받는 것이 아니기에, 오차가 생길 수 있다.
  • 개발자의 입장에서, 요구사항이 계속 변경이 되는것은 조금의 효율성이 떨어진다고 생각한다.
  • 물론, 더 나은 기획이 생긴다면 요구사항을 변경하는것은 당연하다고 본다.
  • 아쉬웠던 부분은, 태스크 담당자와 기획자와의 회의의 부재였다.
    • 회의는 "오차"를 줄이기 위한 일이라고 생각한다.
    • "태스크" 라는 공통의 목표인 주제로 "담당기획자"와 "담당개발자"의 회의는 그 태스크를 수월하게 진행할 수 있는 진검다리 역할이라고 생각한다.
    • 개발자의 입장에서, 또는 기획자의 입장에서 - 아쉬운부분, 개선하면 좋을 부분등을 이야기하다보면 다시 돌아갈 확률이 적게끔 요구사항이 탄탄해질 것이라고 생각된다.
  • 결국은 , 탄탄한 기획, 태스크를 진행하고 있는 일원들의 같은 생각은 작업을 하는데 있어 정말 중요한거 같다.
  1. 요구사항이 나왔다면, 그를 해결하기까지 고민은 끝까지 해봐야한다.
  • 처음에는, 나의 시야로 위 요구사항은 되지 않을 것이란 판단을 하였다.
  • 이는 매우 경솔하고, 나의 현 위치에서는 하면 안될 행동이란 생각이 들었다.
  • 이유는 간단하다. 나의 시야는 아직 매우 좁기 때문이다.
  • 이를 위해, 앞으로는 요구사항이 생겼을때 안된다는 생각 ,
    사실 이부분이 정말 중요한데, 안된다는 판단은 못할거같아서라는 판단이 내포되어있을수도 있다.
    이는, 발전할 수 없는 태도 중 하나라고 생각된다.
  • 그렇기에 , 요구사항을 끝까지 붙잡고 "태스크의 완성점"을 위해 집념하는 힘을 더 길러야된다는 생각을 했다.

이로써, 이번 태스크의 회고는 마치도록 하겠다.



#.1/3 task#7-3

1. datepicker 버튼 통합 작업

💡 최종 요구사항
  • 날짜 선택을 할떄 , 단일 선택 또한 가능하게 되었으면 한다.
  • 단일 선택의 동작은 ,
    1. 날짜 선택 후 버튼 클릭

    2. 버튼 클릭 후 날짜 선택

      위 두가지 방법 모두 되게끔 .

💡 요구사항을 위한 방법 2가지
  1. “통합 관리 버튼” 을 하나 만들어 , 그 안에서 ‘선선택’ , ‘후선택’ 모두 가능하게 한다.

    • 테스트 완료
    • 이는 지속적으로 단일 선택이 되게끔은 안된다.
    • 클릭 하고 나서는 다시, 원래의 기간선택으로 자동적으로 돌아간다.
    • 하나의 함수가 두개의 동작을 관리한다. (선선택, 후선택)
    • 디자인적으로 가시성이 필요하다.
    • 하나의 버튼으로 “선선택” “후선택” 관리가 가능하다는게 장점이다.

    .img

  1. “기존의 선선택 버튼” 과 “기존의 후 선택 버튼” 두개를 디자인적으로 합친다.
    • 이렇게 할 경우, 지속적으로 단일 선택이 되게 관리가 가능해진다.
    • 단, 디자인을 위 1번의 “통합관리버튼” 처럼 하는 것이 아닌 아래의 사진처럼 해야 될것이다.

.img

  • 즉 , 코드적으로는 다른 두 개의 함수가 독립적으로 일을 하는 것이다.

결론적으로, 알파리뷰의 시그니처 디자인을 입힌다면 이렇게 두가지가 가능할 것이다.

.img



#.1/4 task#8

1. yesterday filter 추가 - 엑셀다운로드 or 대시보드 메인

  • 위 요청사항 또한, datepicker와 연관된 부분이다.
  • 위 관련 요청은, 본 태스크가 아닌 이야기가 한번 나왔던 부분인데, 마침 datepicker작업을 하고 있었기에 추가로 요청되었다.
  • task7 datepicker파트에 시간을 써보았기에, 어떠한 맥락인지에 대해 이해 속도가 다른 태스크에 비해 빨랐다.
    • 이는 , 서비스 코드의 이해가 얼마나 중요한지에 대한 작은 지표라고 볼 수 있을것이다.

요구사항

  • "어제" 항목을 클릭하였을때, 자동적으로 "어제"의 내용의 리뷰만 필터링 되도록 요구
  • 현재는 "오늘", "7일" ,"15일" 등의 단위의 옵션으로 이루어져있다. (7일은 오늘날짜로부터 7일전까지의 리뷰를 말한다.)

위 사항을 해결하고자,

FE part. 수정이 이루어졌으며

    1. select div를 하나 추가한다 - "어제" 로 네이밍 되어 있는.
    1. option 함수에서 "어제"에 대한 조건문을 추가한다.
    1. 기존의 함수를 참고하여, 수정
      필터링을 위해, fromdate , todate 설정을 해주어야한다.
  
if (option == "어제") {
      from.setDate(from.getDate() - 1);
      to.setDate(to.getDate() - 1);
    }
  
  • 이렇게 조건문을 추가했다.
  • setDate와 getDate 사용이 중요함을 알 수 있다.
  • 위 두개의 함수를 사용하여, to ,from 변수를 설정한다.

이렇게, 오늘 날짜의 하루를 뺀 것을 설정해주어 , "어제" 라는 옵션에 맞게 필터링이 되게끔 하였다.



#.1/8~1/18 task#9

1. 세팅모달 가이드 디자인 작업 및 팝업 창 플로우 변경

profile
밑거름이라고생각합니다

0개의 댓글