드림코딩 : 미니 쇼핑몰 게임 만들기 - 5.코드 리뷰 & 주의할 점

Variable (변수선언)

한 줄에 한 개씩 한다

(예시)

const ... ;

const ... ;

const ... ;

 

변수에 함수 할당하는 등 다양한 표현 가능하다

=중간에 함수 넣으면 가독성이 떨어진다

=한 줄에 하나씩 변수 선언한다

 

 

 

String template (글자열 템플릿)

` ` 와 ${ } 를 활용한다 (2문장 처럼)

 

 

Array (배열)

1. 불필요한 배열은 만들지 말자 (2문장처럼 - Array.from()배열은 삭제한다)

 

 

2. 배열을 생성하면서 바로 데이터 할당하는 경우 (사진1처럼 - API 사용해서 데이터 작성 보다는)

함수안에서 배열을 만들면서, 아이템 생성한다 (사진2처럼)

 

 

3. 배열을 만든 다음에 인덱스로 접근하기 보다는 (사진1처럼)

배열 안에 아이템들을 넣는다 (사진2처럼)

const로 선언한다(push, pop등 API 사용가능 but 다른 배열은 할당 불가), let 보단 const 사용하는 것이 좋다 (사진2처럼)

 

 

Class

 

 

Early exit (해당 안 하면 빨리 리턴하기)

괄호와 들여쓰기가 많아서 가독성이 떨어진다, 콜백 지옥이 떠오른다 (사진1처럼)

해당하지 않으면 멈추고, 조건이 해당할때만 실행하도록 작성

filter보다는 forEach를 쓴다 (회전하면서 확인하는 것이므로) (사진2처럼)

한 단계더 단순하게

if문에서 둘다 같지 않다면 리턴하고 그렇지 않을 경우만 아래식 처리한다 (사진3처럼)

가독성 좋은 코드 = 한 눈에 봤을 때 따라하기 쉽고, 읽기 쉬운 코드

 

 

 

Consistency (일관성)

코드 스타일, 한 프로젝트 안에서는 일관성 있게 유지하자

getElementById("t_icon") 대신 querySelector("#tIcon") 사용한다

변수 이름 스타일도 일관성 있게 하자

t_icon 대신 tIcon 사용한다

 

 

Event delegation (이벤트 위임)

각 버튼에 이벤트 리스너 등록, 중복되는 부분은 classify 함수 이용해서 인자 전달

이벤트 위임하면 더 좋았을 것이다 (사진1)  -- 몬솔?

이벤트 위임하면 더 좋았을 것이다 (사진2) --몬솔?

이벤트 위임을 했지만 window에 했다. 너무 방대하게 위임함

특정한 영역의 container에 이벤트 위임 등록하는 것이 중요

 

 

Switch

코드를 더 간소하고 단순하게 만들 수 없는지 생각해보자 (사진1)

과연 스위치가 필요할까?

param이 p 이거나 s 이거나 t 일 때, 밑의 코드를 실행한다 (break 나오기 전까지)

필터는 주어진 type을 param과 비교해서 동일한지 아닌지 확인한다 (사진2)

 

param이 blue이거나 pink 이거나 yellow일 때, 밑의 코드를 실행한다 (break 나오기 전까지)

필터는 주어진 color을 param과 비교해서 동일한지 아닌지 확인한다 (사진2)

 

default는 다른 개발자가 모르는 case를 추가했을 때 발생한다= 절대 오면 안 되는 경우

보통 에러를 던진다 (사진2)

 

 

 

Function naming (함수 이름)

함수이름 = 계약, 문서화 : 어떤 기능하는지 알려준다, 개발자들 사이에서 계약 명시

함수는 1가지 기능만 수행하도록 만든다

 

showAllList 오해를 불러일으킬 수 있다, 함수 이름대로 기능을 수행하는지 확인하자

대신 addLogoEventListener로 바꾼다 (사진1)

 

 

Function param (함수 인자)

함수에서 필요한 것들만 인자로 범위를 최소화해서 받아온다

e (event) 대신 type을 받아온다

 

 

HTML vs JavaScript

HTML은 웹사이트의 골격과 구조를 담당한다, 단순히 UI적 요소만 남겨 둔다.

HTML에서는 JavaScript에 어떤 파일이 있는지 모르도록 작성하는 것이 좋다.

onclick 같은 비즈니스 로직은 JavaScript에서 처리하는 것이 더 좋다

JavaScript에서도 동적으로 해야하는 것들만 작성한다. 

※ React에서는 이와는 조금 다른 방식으로 한다