Code Review 회고(1~7)

😸 코드 리뷰 오답노트?(1~7)

뭔가 코드리뷰를 정리해야 겠다는 생각을 하지 못해서 한번에 몰아서 하는 감이 있습니다.
이젠 과제가 발생할 때 마다 주요 코드리뷰 받은 것을 진행하려 합니다. :)
저의 코드를 리뷰해주신 멘토님, 동료들 감사합니다. !!!

😽 EOF

파일의 끝을 알려주는 것으로 파일이 겹치는 것을 방지해주는 역할을 합니다.
그래서 모든 파일에 꼭 써주는 것이 좋습니다.

😽 .gitignore

Git이 무시해야 하는 파일/폴더를 임의로 지정해 놓는 곳입니다.
저 같은 경우는 이런 규칙들을 생각하지 못하고 그냥 사용하였습니다. 그래서 문제가 발생했던 것 같습니다.

'/': 디렉토리 설정할때 사용하지만 주로 맨 뒤에 사용해서 대부분의 디렉토리를 참조하는 것이 좋은 것 같습니다.

'*': slash 제외 모든 항목
'?': slash 제외 모든 문자

😽 재할당

이 부분도 더 생각을 했었어야 했는데 뭔가 그냥 해도 괜찮겠지라는 안일한 생각에 같은 주소로 할당을 해줘 위험성을 만들었습니다.

...와 같은 사용해서 deepcopy로 사용해야 합니다. 추가로 Vue의 data에서 function을 사용하는 이유가 다음과 같습니다.

😽 Error 개별 체크

type, structure... 등 체크를 할때 여러개를 한꺼번에 써 에러 트래킹을 할때 확실하게 찾지 못한다는 다음과 같은 Comment를 받게 되었습니다.

Error을 개별 체크하여 추후에 에러 트래킹할때 개별로 에러메세지를 받아야 빠르게 확인가능하기 때문입니다.

정말 맞는 말 같습니다. new Error로 Msg를 뽑아내는 데 여러 부분을 같이 작성하면 트래킹이 정말 힘들 것 같습니다.

😽 UI 상태 변경 함수(범위 설정)

Util로 빼는 함수는 해당 파일에서 UI의 상태 변경을 하지 않는 순수함수
위주로 빼야 되며 해당 UI범위(component)에서만 제작 가능한 (state, setState 관리 부분)은 해당 component에서 작성되어야 합니다.

😽 조건에 들어있는 값 변수로 명시해서 파악하기 쉽게 하기

코드의 양을 줄이기 위해 조건문에 그냥 값을 넣어서 작성하였습니다.
코드리뷰를 받고 다시보니 확실하게 이해를 할 수 없었습니다.
좀 더 변수를 사용해서 이해가 쉽게 만들어야 겠습니다.!!!

😽 파일/폴더/함수 명 통일 및 구체적

새로운 파일/폴더/함수 명을 만들 때 주위의 이름들을 파악하지 않고 그냥 만드는 것을 알게 되었습니다.
그래서 이젠 공통된 이름이 있는지 파악을 한 후에 제작을 해야 겠습니다.
(+ Commit 하는 부분을 잘 나눠야 겠습니다.)

😽 함수 당 역할 1~2개 + 재할당

함수하나에 역할이 많은듯 싶은데요. 어쩔수 없이 하나의 액션에서 여러가지 확인해보니 좀더 읽기 쉽게 작성해주시는게 중요해 보입니다.
다음과 같은 Comment를 받게 되었습니다.

이것도 위의 내용 같이 생각을 많이 하고 코드를 작성해야겠습니다.

😽 공통된 변수 => constant/ & 공통된 순수 함수 => utils/

이것 또한 마찬가지 refactoring 할때 많이 필요한 것 같습니다.

😽 if 여러개 => switch 문 사용

if문이 여러개 겹쳐있는 경우 switch문을 사용하는 것이 훨씬 잘보인 다는 것을 알게되었습니다.

if (!fetchedMovieInfo.newMovieInfo.title) router.push('/');
else {
  if (
    fetchedMovieInfo.newMovieList.Search === undefined &&
    fetchedMovieInfo.newMovieInfo.page === 1
  )
    router.push('/movieNotFound');
  else router.push(`${fetchedMovieInfo.newMovieInfo.title}`);
  commit('updateMovieList', fetchedMovieInfo.newMovieList.Search);
}

const isHome = !fetchedMovieInfo.newMovieInfo.title;
const isNotFound =
  fetchedMovieInfo.newMovieList.Search === undefined &&
  fetchedMovieInfo.newMovieInfo.page === 1;

switch (true) {
  case isHome:
    router.push('/');
    break;
  case isNotFound:
    router.push('/movieNotFound');
    commit('updateMovieList');
    break;
  default:
    router.push(`${fetchedMovieInfo.newMovieInfo.title}`);
    commit('updateMovieList', fetchedMovieInfo.newMovieList.Search);
}

😽 CSS Descendant combinator

CSS selectors 자료

다음과같은 셀렉터는 Descendant combinator라고 하는데요.
앞의 셀렉터가 부모, 그 다음에 작성되는 셀렉터는 자손이 됩니다.

ul을 한번만 사용하시면, .post-page하위의 ul에 모두 적용이 될것입니다.

.post-page ul {
  margin-left: 16px;
}
.post-page ul ul {
  margin-left: 16px;
}
.post-page ul ul ul {
  margin-left: 16px;
}

.post-page ul {
  margin-left: 16px;
}