자바스크립트 문제 해결 방법

에러의 종류

일반적으로 코드가 잘못되어 발생하는 에러는 두가지 종류가 있다.

1. Syntax Errors : 문법 에러
   괄호를 빠뜨리거나 변수명 오타가 있는 등 프로그램이 중지되어 출력된 에러 메세지를 확인할 수 있다. 처음 여러분이 문법에 익숙하지 않을 때 자주 겪게 되는 에러이며 보통 철자가 잘못되거나 실수로 인해 발생한다. VSCode와 같은 편집기 툴을 사용하고 에러 메세지를 해석하면 충분히 고칠 수 있는 에러다.

2. Logic Errors
   문법상 문제가 없어 프로그램은 실행되지만 원하는대로 프로그램이 동작하지 않는 경우이다. Replit을 풀 때 테스트 케이스를 모두 통과하지 못한 경우가 logic error라고 할 수 있다. 정상적으로 실행은 되기에 에러 메세지가 표시되지 않기 때문에 syntax error 보다 해결하기 어렵다.
   

Syntax Erros의 경우 에러 메세지 해석만으로 내가 어떤 실수를 했는지 힌트를 얻을 수 있다. 에러 메세지를 보고도 모르겠다면 에러 메세지를 그대로 검색해서 무슨 에러인지 확인할 수 있다.

Syntax Errors 해결 팁

Syntax Errors는 에러 메세지를 보고 에러의 원인을 파악할 수 있고 보통 코드의 몇번째 줄에 에러가 있는지도 에러가 알려준다. 그래서 천천히 코드를 뜯어보면 실수를 캐치할 수 있다.

그렇다고 하더라도 어디서 에러가 발생했는지 알기 어려울 수 있다. 그 때, 에러가 발생할 것이라고 예상되는 코드 일부를 주석 처리하는 방법이 있다. 주석 처리했을 때 syntax error가 없어지거나 에러 메세지가 변한다면 주석 처리한 부분에 syntax errors가 있다고 유추할 수 있다. 그럼 그 부분의 코드만 다시 살펴보면 된다.

[과제 1] 논리 오류

const meetAt = (year, month, date) => {
  if(!month === undefined){
    return `${year}년/${month}/${date}`
  } else if(!date === undefined){
    return `${year}년 ${month}월`
  } else {
    return `${year}년`
  }
}

meetAt(2022) // 원하는 결과는 "2020년" 입니다.
meetAt(2022, 3) // 원하는 결과는 "2020년 3월" 입니다.
meetAt(2022, 6, 22) // 원하는 결과는 "2020/6/22" 입니다.

[Solution]

1. 인자를 세 개다 넣어줌으로서 세개의 인자 모두 검열을 거치는 로직

const meetAt = (year, month, date) => {
	if (year && month && date) {
    return `${year}/${month}/${date}`
	} else if (year && month && !date) {
		return `${year}년 ${month}월`
	} else if (!year) {
    return `${year}년`
	}
};

2. 우선 연산자를 줌으로서 세번째 파라미터 date가 있는지만 확인 + month가 있는지만 확인하여 없다면 year만 나오는 로직

const meetAt = (year, month, date) => {
  if(!(date === undefined)){
    return `${year}/${month}/${date}`
  } else if(month !== undefined){
    return `${year}년 ${month}월`
  } else {
    return `${year}년`
  }
}

[과제 2] 문제 요건 파악 오류

function getSum(arr){
  let sum =0;

  for(let i=0; i<arr.length; i++){
    sum += arr[i][1];
  }

  return sum;
}

function getData(salesArr,reviewArr,likeArr){
	return [getSum(salesArr), getSum(reviewArr), getSum(likeArr)]
}

getData([["20190401", 34], ["20190402", 23], ["20190403", 29]],
       [["20190328", 3], ["20190401", 0], ["20190403", 1]],
       [["20190328", 98], ["20190401", 102], ["20190403", 125]])

[Solution] 리턴 값 자체를 객체의 키와 키의 값 형태인 프로퍼티를 넣어줌으로서 객체를 반환해준다.

function getSum(arr){
  let sum =0;
  for(let i=0; i<arr.length; i++){
    sum += arr[i][1];
  }
  return sum;
}
function getData(salesArr,reviewArr,likeArr){
  return {
		sumAmount: getSum(salesArr),
		sumReview: getSum(reviewArr),
		sumLike: getSum(likeArr)
	};
}

Logical Error 줄이기

해결해야할 문제가 복잡해질수록 처음부터 잘 작동하는 코드를 작성하는 것은 불가능에 가깝다. 이를 해결하기 위한 방법으로 두 가지가 있다.

1. 큰 문제를 여러 작은 문제로 쪼개기(어려운 문제를 쉬운 여러 문제로 나누기)
2. 각각의 작은 문제를 해결할 때 console.log를 매우 많이 찍어보기

[과제 3] 큰 문제를 작은 문제로 쪼개기

우리에게 주어진 배열 데이터이다. 당근마켓에서 자신의 화면에 뜨는 물품의 카테고리에 대한 데이터이다.

• 디지털/가전
• 가구/인테리어
• 도서/티켓/음반

이 세가지 카테고리만 true로 되어있는 것을 확인하라.

const CATEGORIES = [
  { id: 1, title: "디지털/가전", checked: true },
  { id: 2, title: "가구/인테리어", checked: true },
  { id: 3, title: "유아동/유아도서", checked: false },
  { id: 4, title: "생활/가공식품", checked: false },
  { id: 5, title: "스포츠/레저", checked: false },
  { id: 6, title: "여성잡화", checked: false },
  { id: 7, title: "여성의류", checked: false },
  { id: 8, title: "남성패션/잡화", checked: false },
  { id: 9, title: "게임/취미", checked: false },
  { id: 10, title: "뷰티/미용", checked: false },
  { id: 11, title: "반려동물용품", checked: false },
  { id: 12, title: "도서/티켓/음반", checked: true },
  { id: 13, title: "식물", checked: false },
  { id: 14, title: "기타 중고물품", checked: false },
  { id: 15, title: "삽니다", checked: false },
];

확인한 후 이 배열로부터 아래와 같은 string을 만들어라.

"&filterOption=디지털/가전&filterOption=가구/인테리어&filterOption=도서/티켓/음반"

[ Solution ]

• Step 1. 아래와 같이 true 인 요소만 남은 배열로 필터링합니다.

const selectedCategories = [
  { id: 1, title: "디지털/가전", checked: true },
  { id: 2, title: "가구/인테리어", checked: true },
  { id: 12, title: "도서/티켓/음반", checked: true },
]

• Step 2. Step 1에서 만든 배열로부터 아래와 같이 제목만 남은 배열을 만듭니다.

const selectedCategoriesTitle = ["디지털/가전", "가구/인테리어", "도서/티켓/음반"];

• Step 3. Step 2에서 만든 배열로부터 최종 결과물 string을 만들어 냅니다.

const query = "&filterOption=디지털/가전&filterOption=가구/인테리어&filterOption=도서/티켓/음반"

[ 최종 코드 ]

const arr = CATEGORIES.filter(ele => ele.checked).map(ele => ele.title);
`&filterOption=${arr[0]}&filterOption=${arr[1]}&filterOption=${arr[2]}`