지속가능한 코드 작성

버그를 정의할 때 3가지가 필요: 재현과정, 정확한 기대동작 (왜 에러가 발생했나)을 정의하고 그것에 어떻게 어긋났는지를 제대로 리포팅했는가, 브라우저 콘솔에 나타나는 에러메시지

정적분석: 실행하지 않고 (타입스크립트가 정적분석을 제공함) 오류를 찾아냄.

에러메시지가 어떤 의미를 내포하고 있는가. 를 알아내기

에러메시지가 없는 버그는?? 일일이 알아서 점검하기 (버튼 눌러서 팝업 띄워지기 까지 ...)
일일이 알아서 점검하려면 어려우니까 테스트를 미리미리 제대로 하자.

엣지케이스를 방지하기 위해: 일부러 테스트가 실패할 법한 값을 넣어서 테스트해보기 ...

코드커버리지... 100%는 불가능함. 70%도 우수.. e2e테스트?

TDD ... 테스트주도 개발방법론 ...켄트백이 만든거 ... 테스트를 먼저 작성하기 때문에 테스트 커버리지 비율이 높아짐.
BDD ... 행동주도 개발방법론 ...

테스트가 없는 리펙터링은 끔찍하다...

리펙터링

함수 추출하기

...

중간변수 도입하기

//bad
const user = getUser()
if(user.authKey) {
...
}

//good
const user = getUser()
const isLoggedIn = Boolean(user.authKey)
if(isLoggedIn) {
...
}

중간변수 도입할 때 중간함수(?)를 써먹어도된다

//bad
const user = getUser()
const purchases = getPurchaseHistory(user)

if(user.authKey && user.locale === 'kr' && purchase.length === 0) {
 showEventBanner(); 
}

//good
function isEligibleForEventBanner(){
	const user = getUser()
	const purchases = getPurchaseHistory(user)
    
    const isLoggedIn = Boolean(user.authKey)
    const isKorean = user.locale === 'kr'
    const hasPurchaseHistory = purchase.length > 0
    
    return ( isLoggedIn && isKorean && hasPurchaseHistory )
}

if ( isEligibleForEventBanner() ) {
	showEventBanner()
}

최대한 순수함수로 작성하라는데 순수함수가 정확히 뭐지?...

리팩터링 책에서 나온 조건식 통합... 보다는 함수로 나눠서 하는걸 추천.

switch문 대신에 object literal 사용하기

//bad
function PrintJob(job){
	switch(job) {
      case 'engineer':
        console.log('엔지니어')
      	break;
      case 'developer':
        console.log('개발자')
      	break;
      case 'designer':
        console.log('디자이너')
      	break;
    }
}  
  
//good
function PrintJob(job){
	const translated = {
		engineer: '엔지니어',
      	developer: '개발자',
      	designer: '디자이너'
	}
    console.log(translated[job])
}