레벨1 - 영화 리뷰 피드백

 

1. 복잡한 조건문은 변수로 분리

  src="${
     posterPath !== "null"
      ? `https://image.tmdb.org/t/p/original/${posterPath}`
      : `${AddSkeleton}`
    }"

 

해당 코드는 템플릿 안의 src 조건문이다. 포스터의 경로가 null이면 스켈레톤을, 아니면 해당 포스터를 보여준다. src 안에 조건문이 있어 가독성이 좋지 않다. 코드 밖에서 posterPath에 대한 조건문을 변수로 만들고, 그 변수를 템플릿 안으로 가져오자.

 

2. 라이프사이클 메서드 활용

라이프사이클 메서드를 적극 활용하자. 생성자의 역할이 너무 크다. connectedCallback은 컴포넌트의 초기화 작업이나 DOM 조작 등을 수행하기에 적합한 라이프사이클 콜백이다. 이를 이용해 보자.

 

3. 기존 엘리먼트 속성 사용 지양

 

const type = this.getAttribute("type");

 

해당 코드에서는 기존 엘리먼트 속성인 type을 사용하고 있다. 기존 네이티브 엘리먼트에 정의된 속성들은 지양하는 것이 혼동되지 않고 좋다.

 

4. prettier-ignore

 prettier width에 걸려서 정렬이 된다면 해당 라인만 prettier-ignore를 사용하면 된다.

 

5. fetch API 기본값

fetch API는 default가 GET이라 생략해도 괜찮다.

 

6. 불필요한 select 지양

 

const movieList = <MovieList>$("movie-list");
if (!movies) return;
   
//아래와 같이 수정
if (!movies) return;
const movieList = <MovieList>$("movie-list");

 

조건문을 위로 올리면 불필요하게 select를 하지 않아도 된다. 즉, 영화가 없으면 아예 select도 하지 않는다.

 

7. 에러 핸들링

에러는 크게 나누자면, 클라이언트에서 발생하는 에러와 서버에서 발생하는 에러가 있다. 클라이언트는 네트워크 에러로 생각하면 좋다. 브라우저나 프레임워크, 혹은 네트워크 레벨에서 발생하는 에러가 있다. 서버는 DB 관련, 데이터 타입 관련, 네트워크 레벨의 에러 등이 있다. 

 

8. parse 불가능한 문자열

JSON.parse 시 parse 불가능한 문자열이라면 에러가 발생한다. 따라서 try catch문을 사용해 parse가 불가능한 문자열일 경우 error로 잡아낼 수 있도록 하자.