240806

FACTS(사실, 객관) : 내가 한 일

다 완성했다고 생각했는데

리허설? 도중 특정 배우들의 이미지가 없는 것을 보시고 튜터님이 이미지값이 null인 경우 디폴트 이미지를 넣어주는 것이 좋을 것 같다고 말씀해주셨음

내일이 발표날이라 급하게 바로 수정 시작

card.innerHTML = `
    <img src="${"https://image.tmdb.org/t/p/w500" + cast.profile_path}" alt="${
    cast.name
  }">
    <h2>${cast.name}</h2>
    <span>${cast.character}역</span>
  `;

원본 코드

이미지 값이 null인 경우 디폴트 이미지를 넣어야 하니까

if (cast.profile_path === null)

이런 코드가 필요할거 같다고 생각

if (cast.profile_path === null) {
    card.innerHTML = `
    <img src="https://cdn.pixabay.com/photo/2017/02/25/22/04/user-icon-2098873_1280.png" + cast.profile_path}" alt="${cast.name}">
    <h2>${cast.name}</h2>
    <span>${cast.character}역</span>
  `;
    return card;
  } else {
    card.innerHTML = `
    <img src="${"https://image.tmdb.org/t/p/w500" + cast.profile_path}" alt="${cast.name}">
    <h2>${cast.name}</h2>
    <span>${cast.character}역</span>
  `;
    return card;
  }

 

이제 이미지 값이 null인 경우 무료이미지사이트에서 주소를 가져와 디폴트 이미지를 설정해줌

 

근데

innerHTML이 굳이 두번이나 들어가야 할 필요가 있을까

단순히 src만 바꾸면 될거같은데

 

코드를 더 줄일 수 있을 거같아서 튜터님께 질문했는데

if문이랑 삼항연산자 두가지 방법이 있다고 하셨음!! 삼항연산자는 정말 생각도 못했는데 😲

const castImg="";
if(cast.profile_path === null){
castImg="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png";
}else{
castImg=`${"https://image.tmdb.org/t/p/w500" + cast.profile_path}`;
}
card.innerHTML = `
    <img src="${castImg}" alt="${cast.name}">
    <h2>${cast.name}</h2>
    <span>${cast.character}역</span>
  `;

if문을 쓰면 

장점: 가독성이 좋아짐

단점: 메모리를 삼항연산자에 비해선 많이씀

 

const castImg="";
cast.profile_path === null ? castImg=`https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png` : castImg=`${"https://image.tmdb.org/t/p/w500" + cast.profile_path}`
card.innerHTML = `
    <img src="${castImg}" alt="${cast.name}">
    <h2>${cast.name}</h2>
    <span>${cast.character}역</span>
  `;

 

장점: 한줄로 뚝딱

단점: if문에 비해 가독성이 안좋음

 

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

5시에 피드백을 받아서 저녁시간(6시)전까지 최대한 빨리 하고 안되는 부분 질문드릴 생각으로 급하게 했는데 생각보다 짧은시간 내에 해내서 당황스럽기도 하고 뿌듯하기도 했다.(코드가 길던 어쨌던)

시간이 촉박해 일단 의도대로 움직이기는 하니까 제출하고, 질문을 하고 나와서는 이미 해결한 문제인데도 질문하러 가길 정말 잘했다는 생각이 들었다. 앞으로도 이런 질문을 많이 해야겠다고 다짐..

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

 

코드를 리팩토링 하는 방법 등

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지