우아한테크코스 5기 프론트엔드 미션 리팩터링 1주차 7번

우아한테크코스 5기 프론트엔드 미션 리팩터링 1주차 7번

 

 

 

📋 문제 7번

 

https://github.com/woowacourse-precourse/javascript-onboarding/blob/main/docs/PROBLEM7.md

GitHub - woowacourse-precourse/javascript-onboarding: 온보딩 미션을 진행하는 저장소

 

 

⚙️ 기능 목록

 

 

1. 유저를 제외한 친구들 목록 저장 기능

    - 이름을 키값으로 현재 친구인 사람들 저장

 

2. 목록에 저장되어있느지 확인하는 기능

 

2. 방문자 점수 카운트

 

3. 함께 아는 친구들 점수 카운트

 

4. 이미 친구인 사람과 본인 제외 기능

 

5. 점수내림차순 정렬 기능

 

6. 최대 5명까지만 데이터 slice 하는 기능

 

 

 

⬅️이전 풀이

 

 

😥 미흡했던 점

• 함수가 한 가지 일만 하지 않음.
• 메서드 10줄 넘음
• let과 const 적절히 사용하지 않음.
• 복잡한 로직
• 가독성 떨어지는 정렬 기능
• 뜻을 알 수 없는 변수명

 

 

📌 고려사항

• 클래스 사용
• 메소드 10줄 제한
• 메소드는 한가지 기능만 수행
• depth 최대 2

 

 

이전에 작성했던 코드로 스터디에서 코드리뷰를 한 적이 있는데, 내가 작성한 코드인데도 로직을 단번에 이해하고 설명하기가 쉽지 않았다.

문제는 잘풀려도 남들이 읽기에는 최악의 코드였다고 느꼈다.

 

이번에 리팩토링을 하면서 최대한 메소드명이 담고 있는 기능만을 실행하도록 메소드들을 구성하였고, 약간의 로직 변화로 좀 더 이해가 쉽게 코드를 작성해보았는데 어떻게 느껴질지 잘 모르겠다. 

 

그래도 이전의 코드보다 요구사항들을 많이 첨가하여 지키도록 코드를 짜서 개인적으로 큰 변화가 생겼다고 느껴지는 풀이다.

 

 

1주차 미션을 모두 리팩터링 완료하였다. 이전 코드들에서 보여졌던 미흡한 부분들을 최대한 메꿀려고 노력하였다.

"함수는 한가지 일만 한다" 라는 요구사항이 가장 효과적으로 먹히는 코드가 바로 이 1주차 미션이 아니였나 싶다.

 

이외에도 이전에는 전혀 고려하지 않았던 것들을 고려하면서 코드를 짜는 습관이 생긴 것이 우테코 프리코스를 시작하기 전과 후의 아주 큰 차이점이다.

 

 

📋 미션 코드 저장소

 

https://github.com/soohyun-dev/javascript-onboarding/tree/soohyun-dev/src

GitHub - soohyun-dev/javascript-onboarding: 온보딩 미션을 진행하는 저장소

 

 

 

 

📜 리팩터링

 

 

class RecommendSystem {
  constructor(user, friends, visitors) {
    this.user = user;
    this.friends = friends;
    this.visitors = visitors;
    this.info = {};
    this.score = {};
  }

  recommend() {
    this.info[this.user] = [];
    this.checkFriends();
    this.checkVisited();
    this.countScore();
    return this.getList();
  }

  checkFriends() {
    this.friends.forEach((info) => {
      const [userA, userB] = info;
      this.storeInfo(userA, userB);
    });
  }

  storeInfo(userA, userB) {
    this.store(userA, userB);
    this.store(userB, userA);
  }

  store(target, plus) {
    if (this.isHaveInfo(target)) {
      this.info[target] = [...this.info[target], plus];
    } else {
      this.info[target] = [plus];
    }
  }

  isHaveInfo(checkUser) {
    if (this.info[checkUser]) return true;
    if (!this.score[checkUser]) this.score[checkUser] = 0;
    return false;
  }

  checkVisited() {
    this.visitors.forEach((visitor) => {
      this.isHaveInfo(visitor);
      this.score[visitor] += 1;
    });
  }

  countScore() {
    const targetUser = this.getTargetUser();
    targetUser.forEach((user) => {
      this.score[user] += 10;
    });
  }

  getTargetUser() {
    const alreayFriends = this.info[this.user];
    const targetUser = [];
    alreayFriends.forEach((friend) => {
      targetUser.push(...this.info[friend]);
    });
    return targetUser;
  }

  getList() {
    const alreayFriends = this.info[this.user];
    const memberList = Object.keys(this.score).filter((user) => {
      if (user === this.user) return false;
      if (alreayFriends.includes(user)) return false;
      return true;
    });
    const sortedList = this.sortList(memberList);
    return this.cutList(sortedList);
  }

  sortList(memberList) {
    return memberList.sort((userA, userB) => {
      if (this.score[userB] - this.score[userA] === 0) {
        if (userA > userB) return 1;
        return -1;
      }
      return this.score[userB] - this.score[userA];
    });
  }

  cutList(list) {
    return list.slice(0, 5);
  }
}

function problem7(user, friends, visitors) {
  const recommendSystem = new RecommendSystem(user, friends, visitors);
  return recommendSystem.recommend();
}

module.exports = problem7;