자바스크립트 기본 문법 15 - 배열 4 : 배열로 테이블 만드는 실습해보기

배열 관련 내용은 책에도 엘리스에도 없는 내용이라 수업 시간을 통해 개념을 읽히며 문제를 풀어보는 시간이 참 소중했다. 이제 오후 공부를 시작해보려고 한다. 

---

 

 

 

 

 

배열 미션 문제 풀기

 

과목의 개수를 입력하고 과목을 이름을 입력할 입력창이 나온다. 그런 다음 각 과목의 점수를 입력하면 이와 같은 과목별 점수의 총합과 평균이 출력되도록 코드를 작성하는 문제이다.

---

 

 

 

문제 풀어보기

 

1. HTML 문서 기본 형태 만들고 제목 바꾸기

 

이제 여기에 표 형태를 작성해 볼 것이다.

---

 

 

 

2. 표 형태로 코드 작성하기

 

이 코드가 잘 출력이 되는지 확인해보자. 

 

잘 출력이 된다. 오랜만에 HTML/CSS를 하려니 헷갈려서 몇 번이나 틀렸다가 다시 코드를 수정했다. 

---

 

 

3. 변수 선언 및 초기화

script 태그에 다음과 같은 변수를 선언하고 초기화한다.

 

이름과 점수는 배열 형태로 담아준다. 그런 다음 프롬프트 창은 모두 문자열로 리턴되니 과목 수를 입력받을 숫자 형태의 Number로 형 변환한다.

---

 

 

 

4. 과목 수 입력 받기

 

 

숫자형으로 변환하여 subNum이라는 변수에 넣어주었다.

---

 

 

 

5. 과목 수만큼 과목 이름 입력받기

 

val1과 val2가 배열 인덱스로 하나씩 값이 들어가야 한다.

 

 

 

 

지금까지 작성한 코드를 콘솔창으로 출력해 보면 이렇게 과목 개수와 과목명이 찍히고 있다. 이제 과목의 점수를 입력하는 기능을 만들어야 한다. 

---

 

 

 

6. 각 과목의 점수 입력하기

 

 

여기서는 앞의 코드와 인덱스가 0부터 시작해야 한다는데 왜 그런지 잘 모르겠다. 과목과 과목별 점수가 잘 출력되고 있음을 확인했다. 하지만 코드가 좀 복잡하니 둘로 나누어 간단하게 작성해 보겠다.

그리고 총합이라는 변수에 각 과목의 점수를 누적시킬 것이다. 평균을 구할 때는 몫만 가져올 것이므로 정수만 취하는 parseInt로 변환한다.

---

 

 

 

7. 각 과목의 점수를 입력받아 과목의 점수 총합과 평균 구하기

 

이제 이 코드를 한번 실행해 보자.

 

 

 

하지만 평균은 NaN이라고 나오며 잘 출력이 되지 않았다. 출력 결과에 259 NaN이라는 부분이 나타나 있는데, 이는 평균 계산 시 오류가 발생했음을 나타낸다. 

 

분석

1. 총점 계산 (259)

• 배열 [98, 86, 75]에 포함된 값들을 합산하여 총점 259는 올바르게 계산된 것으로 보인다.

2. 평균 계산 (NaN)

• NaN(Not a Number)은 숫자가 아닌 값이 연산에 사용되었거나, 잘못된 계산이 발생했음을 의미한다.

평균 계산 오류의 주요 원인은 다음과 같다:

• 배열 길이(length)가 제대로 활용되지 않았거나,
• 계산 과정에서 숫자가 아닌 데이터가 포함되었을 가능성이 있다.

---

 

 

 

8. 문제 코드 수정해 보기

문제는 평균에서 subNum으로 나누어야 하는데 subName으로 나누었기 때문이었다.

 

subName은 배열이며, 배열의 길이를 가져오지 않고 그대로 나누기를 하면 결과가 NaN이 된다.

 

 

평균값을 수정했음에도 점수와 평균이 출력되지 않아 왜 그런지 이유를 몰랐는데 변수를 수정하면서 바꾸지 않은 코드가 있다는 걸 알게 되었다.

 

 

 

친절하게도 이처럼 코드 오류를 콘솔창에서 알려준다. 다시 한번 수정해야겠다.

---

 

 

9. 코드 다시 한번 수정하기

 

이제 총점과 평균이 잘 출력되었다.

---

 

 

 

 

10. 테이블 태그 작성해 보기

테이블 태그가 있던 원래 코드를 잘라내어 아래쪽에 붙여 넣어주고 한 행마다 테이블을 더해주는 코드를 작성한다.

 

 

이렇게 하면 계속해서 코드를 작성해야 하므로 이를 반복문으로 작성하면 편리하다.

---

 

 

 

11. 반복문으로 작성하기

이전 코드는 주석 처리하고 for 문으로 처리할 수 있는 부분을 추가해 본다.

 

 

그리고 점수와 평균이 적힌 부분은 totalScore와 averageScore로 바꾸어준다.

 

 

 

 

하지만 계속해서 몇 번을 시도해도 빈 화면만 출력되었다. 선생님의 코드와 똑같이 작성했는데도 말이다.

---

 

 

 

12. 코드 다시 수정하기

이 코드는 최종 코드이다.

 

 

선생님 코드보다 훨씬 깔끔하니 정리가 잘 된 것 같다.

---

 

 

 

학습을 마치고

이 한 문제를 푸는데 몇 시간이 걸렸나 모르겠다. 아마 2시간 반 이상 걸린 것 같다. 중간에 너무 힘들어서 그만 포기하고 넘어가고 싶었지만 그래도 끝까지 모든 문제를 다 풀어보았다. 그러면서 배운 것도 있었고 선생님이 너무 어려운 문제를 가져온 건 아닌가 하는 생각이 들었다.

지금도 이해하기 어려운 문제인데 처음 들었을 때는 정말 무슨 말인지 아예 아무것도 알아듣지 못해서 자포자기 상태가 되었다. 

 

이제 함수 단원인데 요즘 공부가 많이 지쳐서 좀 쉬엄쉬엄 할 생각이다. 내가 예상했던 목표를 12월 안에 달성할 수 있을지 미지수이다. 하지만 이런 식으로 무조건 몰아붙이면 난 조만간 몸과 마음이 병들 것 같았다. 이제 좀 쉬면서 해도 난 열정을 놓지 않을 수 있으니 속도를 조절하면서 해볼 것이다.