이번 과제

과제 레포지토리

이번 과제는 양이 상당했다. 처음 과제 공지를 보자마자 기함을 쳤는데,
읽다보니 자신감이 생겨서 안심하다가
막상 주어진 데이터인 JSON파일을 가지고 놀다보니 좌절을 정말 많이 했다.

투자 서비스 중 고객과 계좌에 대한 정보를 관리하는 서비스를 만드는 것이고,
고객 목록, 고객의 세부 정보 목록, 계좌 목록을 가지고 데이터를 뿌리면 된다.
페이지네이션, 필터링, 검색 등 구체적으로 필요한 조건들이 있어서 마냥 잘 보이게 데이터를 뿌리기만 하는 건 아니었다.

그래서 완성한 결과물은 아래에 👇👇

결과 레포지토리

내가 구현한 부분

AccountFilter.jsx

내가 도맡았던 부분은 계좌 목록 전체 뿌리기와 필터링 그 외 세밀한 부분들이었다.

세밀한 부분들이라하면, 계좌번호 및 이름 '*'로 마스킹, 증권사명이 번호로 되어있는데, 이를 실제 증권사명으로 표기하기 등...

마냥 객체에 대한 key값 접근으로 끝나거나 문자열 replace로 끝나는, 그리 단순한 문제들은 아니었다.

중심 기능을 구현하기 전 utils로 빠질 함수들을 작성하는 것에 큰 관심이 생겼는데, 무엇보다 이름을 마스킹하는 함수를 만들었다.

//maskingName.js
export const maskingName = name => {
  const star = '*'
  let nameArray = name.split(' ').join('').split('')
  if (nameArray.length === 2) {
    nameArray[0] = star.repeat(nameArray[0].length)
  } else if (nameArray.length === 3) {
    nameArray[1] = star.repeat(nameArray[0].length)
  } else if (nameArray.length >= 4) {
    for (let i = 1; i < nameArray.length - 1; i++) {
      nameArray[i] = star.repeat(nameArray[i].length)
    }
  }
  return nameArray.join('')
}

요즘 JavaScript에 대한 책을 읽다보니 react보다 코딩테스트 느낌이 사뭇 드는 코드는 짜는 게 더 재밌다.

그런데 흔히 유행하는 알고리즘보다는 이렇게 기업 과제처럼 실용적인 함수 및 폴리필을 짜는 게 정말 재밌다.

기존에는 ~기능 react라는 키워드로 검색해서 전체 구현해야하는 코드의 90% 이상이 구글링의 결과였는데,

이번에는 multiselect mui 이렇게 검색해도 큰 소득이 없었다.
소득이라고 해봤자 filtering library인 'match-sorter'였는데,
라이브러리 공식문서를 봐도 내가 원하는 기능을 구현하기 위해 한 번에 작동하는 코드는 없었다.

그래서 자신은 없었지만 냅다 생각나는대로 흐름을 짜고 코드를 적었는데,
multiselect를 구현하기 위한 부분은 성공했으나,
이를 다른 singleselect와 함께 붙이면 특정 경우에 또 망가져서
한 번 갈고 새롭게 다시 짰는데,
다행히도 그게 잘 작동해서 정말 뿌듯했다. 그게 성공할 쯤에는 새벽 1시 가량 됐었다.

//AccountFilter.jsx
const filterData = (data, filterOptions) => {
    let matchedData = []
    for (const filterOption in filterOptions) {
      if (filterOption === 'brokers' && filterOptions[filterOption].length > 0) {
        filterOptions[filterOption].map(filter => {
          matchedData = matchedData.concat(
            matchSorter(data, filter.number, { keys: ['broker_id'] }),
          )
        })
      } else if (filterOption === 'isActive' && filterOptions.isActive != null) {
        if (matchedData.length > 0 && matchedData) {
          matchedData = matchSorter(matchedData, filterOptions.isActive, { keys: ['is_active'] })
        } else {
          matchedData = matchSorter(data, filterOptions.isActive, { keys: ['is_active'] })
        }
      } else if (filterOption === 'accountStatus') {
        if (matchedData.length > 0) {
          matchedData = matchSorter(matchedData, filterOptions.accountStatus, {
            keys: ['status'],
          })
        } else {
          matchedData = matchSorter(data, filterOptions.accountStatus, { keys: ['status'] })
        }
      } else if (filterOptions.brokers.length === 0 && filterOptions.isActive === null) {
        matchedData = data
      }
    }

느낀 점

JSON파일은 주어진 게 아니라, 위 레포지토리에서 주어진 파일로 새로 랜덤하게 생성하는 것이었다.
과제 상세 설명에 데이터 구조에 대한 정확한 설명이 없어서 데이터를 생성하는 코드를 보고 어떤 의미인 지 파악했다.
예를 들면 각기 다른 데이터가 어떤 속성을 공유하고 있는지, 동일한 값은 어떻게 갖고 그 동일한 값으로 어떻게 접근하면 되는지를 이해했다.

오늘 정오까지 제출이었는데, 어젯밤 10시부터 오늘 아침 8시까지 모각코를 하다가 마쳤다.
그래도 터지지 않는 것에는 마음이 놓이지만 완벽하게 구현한 것은 아니라 그 점에서는 조금 아쉽다.

이게 개인 과제로 주어졌으면 어땠을까하는 생각이 든다.
하루종일 잡고 있다고 가정했을 때 과연 혼자서 2~3일만에 끝낼 수 있을까?
아직은 많이 부족한 것 같다.