올림픽 메달 트레커 만들기!

오늘은 하루만에 Olympic-Medal-Traker를 만들어보았다.

 

완성본이다.

 

 

 

시연 영상이다.

 

 

 

 

 

이 작업물은 처음부터 끝까지 내가 스스로 만들어보았다. 중간에 막히는 부분이나 오류부분만 검색해서 해결하였다.

과제를 하면서 알게된 부분을 이 블로그에 담아보겠다!

 

 

 

 

 

 

이것은 내 코드의 일부분이다. 여기서는 논리 or 연산자(||)를 사용해보았다. 

  if (existingCountry) {
      existingCountry.gold = gold || existingCountry.gold;
      existingCountry.silver = silver || existingCountry.silver;
      existingCountry.bronze = bronze || existingCountry.bronze;

      setMedalList([...medalList]);

      resetForm();
    } else {
      alert("업데이트할 국가를 찾을 수 없습니다!");
      return null;
    }
  };

 

 

 

여기서 코드 한줄을 가지고 논리 or 연산자(||)대해 알아보겠다.

 

existingCountry.gold = gold || existingCountry.gold;

 

• 이 줄은 gold 변수의 값이 "truthy"(참으로 평가되는 값, 즉 null, undefined, 0, false, NaN, ''가 아닌 모든 값)인 경우, 그 값을 existingCountry.gold에 할당한다.
• 만약 gold가 "falsy"(거짓으로 평가되는 값)라면, 기존의 existingCountry.gold 값을 유지한다.
• 이는 gold 값이 제공되었을 때만 업데이트하고, 그렇지 않으면 기존 값을 유지하는 효과가 있다.

 

 

 

 

다른 예시를 들어보겠다.

 

 existingUser.name = newData.name || existingUser.name;

 

 

 

 

• 만약 newData.name이 존재하면(즉, 빈 문자열이 아니고 undefined나 null이 아니면) 그 값을 existingUser.name에 할당한다.
• 그렇지 않으면 기존의 existingUser.name 값을 유지한다.
• 예를 들어, newData.name이 "John"이라면, existingUser.name은 "John"이 된다.
• 만약 newData.name이 undefined라면, 기존의 existingUser.name 값이 유지된다.

 

 

 

이렇게 과제를 하면서 논리연산자에 대해 더 깊게 알 수 있었다! 이 논리 or 연산자는 업데이트할 상황이 생기면 많이 사용할 것 같아서 기억해두는 것이 좋을 것 같다!