Javascript 팀과제 피드백 - 정영훈 튜터

팀과제 하시느라 고생많으셨습니다.

git commit convention, README, issue-template 만들어서 잘 활용해 주셨습니다! .prettierrc(코드포멧), .vscode(vscode설정) 파일들도 공유해서 동일한 작업환경에서 작업하신다면 팀원들끼리 더 편하게 같은 설정을 공유해서 코드 작성하실 수 있습니다.

아래는 피드백입니다.

1. 파일 분리

영화에 관련된 함수들은 movie 폴더 안에 다른 toggler 같은 파일은 ui 폴더 등으로 정리하면 유지보수에 도움이 됩니다.

/js
  /movie
    /fetch-movies-db.js
    /기타 영화에 관련된 모듈 
  /ui
    /simple-togger.js 
    /기타 ui에 관련된 모듈

2. 함수사용

https://github.com/donkim1212/nbc_ch2_tmdb/blob/2b2b188dadabe1e2abd2eb1215c3691ccb628bd9/js/movie-info-loader.js#L39-L42 초기에 클래스 부여해주는 로직을 함수를 사용해서 코드를 관리해주는것이 코드관리에 유용합니다. appendChild부분도 적절한 함수를 만들어서 관리해주세요.

search-filter.js 에서도 elemet생성, class 삽입, text 삽입, appendChild 등을 나눠서 관리하면 더 깔끔하게 코드 작성 가능합니다.

예)

const  addInfoClass = () => {
  $infoContainer.classList.add('info-container');
  $infoLeft.classList.add('info-left');
  $infoRight.classList.add('info-right');
  $infoRightDivTop.classList.add('info-rt')
// 나머지 코드
}

3. 점표기법 사용

https://github.com/donkim1212/nbc_ch2_tmdb/blob/2b2b188dadabe1e2abd2eb1215c3691ccb628bd9/js/movie-info-loader.js#L75 자바스크립트에서 객체 속성에 접근하기 위해선 점 표기법과 괄호 표기법이 있습니다. 변수명을 객체속성에 접근하기위해 사용하지 않는 이상 일반적으로 점 표기법이 가독성이 좋아서 선호됩니다. 점 표기법으로 수정하면 코드가독성이 조금 더 향상됩니다. 75번 라인에서는 템플릿 리터럴(``) 까지사용하면 코드 더 깔끔하게 작성가능합니다.

예)

$posterImg.setAttribute('src', "https://image.tmdb.org/t/p/w342" + detail.poster_path);

4. 함수 설명 포멧 통일

https://github.com/donkim1212/nbc_ch2_tmdb/blob/2b2b188dadabe1e2abd2eb1215c3691ccb628bd9/js/card.js#L7-L15 JSDoc 형식으로 함수에 설명을 잘 붙여 주셨습니다. review.js, serach-filter.js 등 몇 개 다른 모듈에서는 함수 설명이 없는데 팀 전체가 함수 설명 포맷을 통이 해서 작성해서 일관성 있게 프로젝트를 완료해 주시면 좋을 거 같습니다.

5. 모듈 의존성 분리 질문

Q. CSS 클래스는 assembler 모듈에서 인자로 받아 넘겨주는 식으로 작성해야 하는지? A. 모듈에서 인자로 받아서 작성을 하면 모듈간의 결합도를 낮추고 CSS클래스 관리를 중앙화하여 관리하기때문에 유지 보수에 도움이 됩니다. 따라서 이 방식을 권장드립니다.

Q. 인자로 받은 함수를 사용하는 모듈의 함수 구현에 문제는 없는지? A. 이 부분은 코드를 바탕으로 구체적인 검토가 필요합니다. 에러처리가 적절하게 되어있다면 괜찮습니다.

6. 함수명 수정

https://github.com/donkim1212/nbc_ch2_tmdb/blob/2b2b188dadabe1e2abd2eb1215c3691ccb628bd9/js/review.js#L96 자바 스크립트에서 함수명은 일반적으로 카멜케이스를 사용합니다. 함수이름을 카멜케이스로 변경해주세요.

예)

const saveReivew = async function (obj_Data) {

7. localStorage 리뷰 key값 변경

https://github.com/donkim1212/nbc_ch2_tmdb/blob/2b2b188dadabe1e2abd2eb1215c3691ccb628bd9/js/review.js#L99 지금 처럼 randmon값을 활용해서 각각의 영화마다 리뷰를 작성하여도 괜찮지만 randmon함수는 완벽한 랜덤이 아니기 때문에 key값이 겹칠 가능성도 있습니다. 현재 영화데이터 내부에 유일한 값인 movieId값이 있으니 이를 활용하여 localStorage에 리뷰 데이터를 저장하는 방법이 더 권장됩니다.

예)

    obj_Data.key = await movie.movieId;

donkim1212 / nbc_ch2_tmdb