TODAY I LEARN 🎁

TODAY I LEARN PROBELM 🦠

내가 짠 코드와 리아님이 짠 코드의 차이점에 대해서

배운점

1.코드의 명확성 - 변수명을 누군가 내 코드를 보고 이해할 수 있게끔 짰는가? ⇒ 코드가 길어지다보면 혼자만 이해할 수 있는 코드명을 쓴다든지 나만 이해할 수 있는 로직을 사용해서 코드를 짜게된다. 누군가와 협업하여 작업한다는 것을 명심하고 작업하자. 2.중복을 줄일 수 있는 지 고민해보았는가? ⇒ 내가 짠 아래의 코드를 보면 중복되는 부분들이 너무많다. 이렇게 중복 되는 부분들이 많다는 건 중복을 줄 일 수 있는 여지가 있다는 것을 의미한다.

3. 의미없는 메모리 공간을 할당하여 효율성을 고려하였는가? ⇒ 코드를 보면 빈배열을 4개씩이나 선언해서 메모리에 공간을 만들어서 관리하고 있는데 이 부분이 꼭 필요한지 확실하게 코드를 짜면서 깊이 생각해보지 못한 듯 싶다.

내가 작성한 코드

  async createLabel(@Args() { labels }: CreateProductInput): Promise<String> {
    // input에 입력된 labelName, 라벨 isVisible, 새로 입력된 labelName만을 관리하기 위한 빈 배열
    const labelName = [];
    const isVisible = [];

    for (const inputLabel in labels) {
      // 입력된 라벨을 반복문으로 돌면서 배열 labelName과 isVisible에 따로 넣어준다.
      const inputLabelValue = Object.values(labels[inputLabel]);
      isVisible.push(inputLabelValue[0]);
      labelName.push(inputLabelValue[1]);
    }
    // 입력받은 labelName과 isVisible 여부를 담은 배열들 
		//console.log(labelName, isVisible)

    // 1. 이미 존재하는 라벨 여부 확인
    const existedLabel = await this.prisma.label.findMany({
      where: {
        name: {
          in: labelName
        },
      },
      select: {
        name: true,
        id: true,
      },
    });
    const existedLabelWithId = existedLabel.map((item) => {
      return { labelId: item.id, labelName: item.name, isVisible: true };
    });

    // 2. 새로 등록된 라벨의 Id와 isVisible을 매핑
    const mappedExistedLabel = existedLabelWithId.map((e, i) => {
      let temp = labels.find((element) => element.labelName === e.labelName);
      if (temp.labelName) {
        e.isVisible = temp.isVisible;
      }
      delete e.labelName;
      return e;
    });

    console.log(mappedExistedLabel);
    // labelId와 isVisible로 매핑된 현존하는 라벨

    // 3. 새로운 입력된 라벨이 있을 경우
    if (existedLabel.length !== 0) {
      // 3_1. 새로 발견된 라벨만 filter로 걸러 서 배열에 담아준다.
			// 입력된 labels과 existedLabel, 현존하는 라벨이 일치하지 않는 것만 필터로 걸러서 배열에 담아준다.
      const foundNewLabel = labels.filter(
        (inputLabel) =>
          !existedLabel.some(
            (inputExistedLabel) => inputLabel.labelName === inputExistedLabel.name,
          ),
      );

      // 3_2. 새로 발견된 라벨을 prisma로 생성하기 위해 labelName => name으로 변경
      const res = foundNewLabel.map((item) => {
        return { name: item.labelName };
      });

      // 3_3. 새로운 라벨들을 createMany를 통해 label로 등록
      const newLabel = await this.prisma.label.createMany({
        data: res,
      });

      const newLabelName = [];
      const newLabelIsVisible = [];

      // 3_4. 새로 발견된 라벨을 prisma로 생성하기 위해 labelName => name으로 변경
      const result = foundNewLabel.map((item) => {
        return { name: item.labelName, isVisible: item.isVisible };
      });

      // 3_5. 새로 입력된 newLabelName과 newLabelIsVisible을 관리하기 위한 빈 배열
      for (const inputLabel in result) {
        // 새로운 라벨들을 조회하기 위해서 반복문을 돌면서 새로 입력된 labelName과 isVisible을 배열 안에 넣는다.
        const inputLabelValue = Object.values(result[inputLabel]);
        newLabelName.push(inputLabelValue[0]);
        newLabelIsVisible.push(inputLabelValue[1]);
      }

      // 4. 새로 등록된 라벨을 조회한다.
      const registeredNewLabel = await this.prisma.label.findMany({
        where: {
          name: {
            in: newLabelName,
          },
        },
        select: {
          name: true,
          id: true,
        },
      });

      // 5. 새로 등록된 라벨의 Id를 labelId로 변경 isVisible을 추가 하기 위해 m
      const registeredNewLabelWithId = registeredNewLabel.map((item) => {
        return { labelId: item.id, labelName: item.name, isVisible: true };
      });

      // 6. 새로 등록된 라벨의 Id와 isVisible을 매핑
      const mappedNewLabel = registeredNewLabelWithId.map((e) => {
        let temp = foundNewLabel.find((element) => element.labelName === e.labelName);
        if (temp.labelName) {
          e.isVisible = temp.isVisible;
        }
        delete e.labelName;
        return e;
      });

      console.log(mappedNewLabel);
      // labelId와 isVisible로 매핑된 새로 등록된 라벨

			//현존하는 라벨과 새로 등록된 라벨을 합쳐서 배열에 담는다.
		const res= mappedExistedLabel.concat(mappedNewLabel)
      // 이후 has_label테이블에 reviewTarget을 생성할 때 한 번에 생성하여 has_label 테이블에 등록한다.
    
    return res;
  }

HOW TO FIX MY PROBELM 💊

ERROR를 해결한 🔑 Set map과 set에 대해 참고하면 좋은 글 : https://medium.com/@hongkevin/js-5-es6-map-set-2a9ebf40f96b

• Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다.

// Array 객체와의 관계
var myArray = ['value1', 'value2', 'value3'];

// Array를 Set으로 변환하기 위해서는 정규 Set 생성자 사용
var mySet = new Set(myArray);

mySet.has('value1'); // true 반환

// set을 Array로 변환하기 위해 전개 연산자 사용함.
console.log([...mySet]); // myArray와 정확히 같은 배열을 보여줌

• has() 메서드는 Set 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다.

const set1 = new Set([1, 2, 3, 4, 5]);

console.log(set1.has(1));
// expected output: true

console.log(set1.has(5));
// expected output: true

console.log(set1.has(6));
// expected output: false

질문)라벨 등록 부분에 있어서  Set이라는 자료 구조를 쓰는 이유에 대해서

Q. Set을 활용하여 중복을 제거하기 위해 쓰이는건지?

A: Set 자료구조는 중복을 제거하는데 있어 실무에서 많이 쓰인다.

EX> [{ isVisible: true, labelid: '나이키조던' }, { isVisible: false, label: '나이키조던' }]

⇒ Set을 활용한다면 이러한 형태의 중복을 제거할 수 있다.

Q. Set이 제공하는 has와 Array에서 쓸 수 있는 includes의 성능 차이가 있는지?

• Set이 제공하는 has 메소드 때문인지? has는 includes의 목적자체는 크게 차이가 없어 보였다.