팀프로젝트

새로 추가/시도 한것

파비콘 만들고 적용하기

• 파비콘이란?
  웹페이지의 tab 영역에 표시되는 작은 아이콘을 의미함

• 먼저 icon 파일을 준비해야하는데 파일 확장자가 ico 여야함을 의미함. 그림판이나 포토샵에서 바로 ico 확장자를 생성할 수 없으므로 먼저 png 파일을 준비, 이후에 해당 파일을 아래 링크에서 ico 파일로 변환하도록 하자.
  https://convertico.com/

• 아이콘이 준비되면 파비콘을 적용하는 것은 간단하다.

    <link rel="shortcut icon" href="파비콘 파일 경로" />

html문서의 head 에 다음과 같이 넣어주면 된다.

표시되지 않는 img 대체용 fallback img 사용하기

• fallback img란?
  모종의 이유로 화면에 표시해야할 이미지를 표시할 수 없을때 원래 이미지가 표시되어야할 공간에 대신 자리를 차지하는 이미지를 말함. default 이미지라고 생각해도 무방하다.

• 사용법
  해당 img 태그에 onerror속성을 추가해주면 된다. html코드 상에 img가 존재하는 경우라면 그냥 입력하면 되고, JS등으로 생성하는 경우라면 아래와 같은 코드로 해당 속성을 추가할 수 있다.

  profile.setAttribute("onerror", "this.onerror=null; this.src='../assets/img/noImg.jpg'");

• 추가로 새로 알게 된 것인데, setAttribute는 연속해서 사용해도 무방하다. img파일 생성후 첫 setAttribute로 src를 설정하고, 그 바로 다음 줄에서 다시 setAttribute로 onerror속성을 설정해 줘도 아무 문제 없이 두가지 모두 적용된다.

• 이 방법이 적용된 모습은 다음과 같다.
  
  데이터베이스에서 프로필 사진을 받아오지 못한 두 배우는 프로필 사진 대신 fallback img가 출력되는 모습이다.

Trial & Error

외부 api에서 제공하는 사진 크기가 원하는 크기가 아니다!

• 외부 api에서 가로 100px/200px/300px/original 등 '미리 정해둔' 사이즈의 사진만 제공하는데, 필요한것은 가로 170px 정도의 사진인 문제가 발생.

• 그나마 목표와 비슷한 200px 사이즈로 다운받은뒤 그에 맞춰서 화면 레이아웃을 조절함.

• 가설) 그냥 original 사이즈로 다운 받은뒤 사진의 크기는 CSS로 조절하면 되지 않나??

.movie_detail__cast img {
  border-radius: 10px;
  width: 170px;
}

이렇게 해주니 원하는 사이즈의 사진을 활용할 수 있게 되었다.

• 한가지 우려는 다운로드 받는 사진의 수가 많아지기 시작하면 원본 사이즈의 사진 수십~수백장을 다운받는 것이 되는 만큼 사이트 전체적인 속도가 느려지지 않을까 하는것.
  => 무조건 원본 사이즈를 다운 받는 것이 아니라 필요한 사이즈보다 한단계 큰 사이즈를 선택하면 어느정도 완화할 수 있을것. => 코드에 반영.

여러곳에서 공유하는 함수의 return값을 상황에 따라 다르게 할 수 있을까?

• 4가지의 각기 다른 기능에서 반복해서 사용되는 함수를 하나의 함수로 합치는 리팩토링을 수행중 발생한 문제.

• 4가지중 3가지 기능에서는 의도대로 작동하나 한가지 경우에 코드가 정상 작동 하지 않는다. 원인은 그 함수로부터 받아야하는 return값이 달라야 했던 것.

  구체적으로, 4가지 기능중 3가지에서는 api에서 받아온 결과에 대해서 data.results로 리턴 받아야 했지만 한가지 경우에 대해서는 data로 리턴을 받아야 하는 상황.

• 해당 문제를 해결하기 위해 if 문을 도입.

async function getMovieFromTmdb(obj) {
  if (obj.type === "details") {
    const url = tmdbURL(obj);
    try {
      const response = await fetch(url, tmdbOptions);
      const data = await response.json();
      return data;  // 이부분을 다르게 하기위한 코드
    } catch (err) {
      console.error(err);
    }
  } else {
    const url = tmdbURL(obj);
    try {
      const response = await fetch(url, tmdbOptions);
      const data = await response.json();
      return data.result;  // 이부분을 다르게 하기위한 코드
    } catch (err) {
      console.error(err);
    }
  }
}

if 문으로 특정 상황에 대해서 다른 return값을 가지도록 설정.
의도대로 동작한다.

• 그런데 이보다 압도적이게 좋은 방법이 있다

async function getMovieFromTmdb(obj) {
  try {
    const response = await fetch(url, tmdbOptions);
    const data = await response.json();

    return data?.results === undefined ? data : data.results; //여기가 중요
  } catch (err) {
    console.error(err);
  }
}

바로 이렇게 삼항연산자를 사용 하는 것.

이번에 처음 보는 문법이 등장했다.
undefined ? data : data.results 이부분은 undefined라면 data를 return 하고 아니라면 data.results를 return 하라는 코드인건 명확해 보인다.

근데 data?.results는 무슨 소리지?
==> data에 results 프로퍼티가 존재하는지 여부를 따지는 코드이다. 만약에 없다면 없는 것을 지정한 셈이기 때문에 그 경우엔 undefined가 된다. 그래서 undefined에다가 동등 연산자를 건 것. 반드시 눈에 익혀 두어야할 문법이다.

---

[follow up 10/28]
28일자 TIL 끝부분에 보충 설명을 적어두었다.
https://velog.io/@laejunkim/231028

---

personal remark

팀 프로젝트중 다른 팀원들의 도움을 많이 받았다.
당장 위에 적은 코드도 나는 if문을 이용한 해결법밖에 떠올리지 못했는데 다른 팀원이 삼항 연산자를 활용해서 코드를 단축하는 방법을 알려준 것이다. 혼자 하는 작업이었다면 절대 떠올릴수 없는 방법이었을텐데 이렇게 도움을 받아서 더 좋은 코드를 쓸 수 있게 되는것이 정말 신기하고 즐겁게 느껴진다.

그리고 이렇게 도움을 준 고마운 팀원처럼 나도 언젠간 꼭 다른 팀원들에게 똑같이 도움을 줄수 있는 사람이 되고 싶다.