[코드 스테이츠] 9일차, 첫 미니 프로젝트

  오늘은 처음으로 페어 분과 함께 미니 프로젝트로 계산기를 만들었다. 코드 스테이츠에서 완성된 HTML과 CSS를 제공해주고 JS는 어느 정도의 가이드 라인만 남겨준 상태에서 수강생들이 자신의 페어와 함께 프로젝트를 성공시키는 과제였다. 이 프로젝트에는 세 가지 단계가 있었다. 

 

1. Bare level
2. Advanced level
3. Nightmare level

 

  Bare level은 우리가 지금까지 들은 수업만으로도 충분히 해결할 수 있는 정도의 수준이다. Advanced는 체감상 완전히 노베이스에서 코드 스테이츠 수업을 들은 사람이라면 힘들 것 같지만 그래도 지금까지 들은 수업의 내용들을 응용해낸다면 풀 수 있는 문제였던 것 같다. 대부분의 동기들이 Advanced는 다 해낸 것 같았다. (우리 동기 중에 진짜 코딩 1도 안 본 사람은 거의 없는 것 같다. 1도 안 본 사람 찾는 것보다 능력자들을 찾는 게 더 빠를듯. 심지어는 과제 해낸 걸 보니 이곳에 있으면 안 될 것 같은 사람도 있는 것 같다.)   마지막 Nightmare는 나와 내 페어분에게 진짜 악몽과도 같았다.   이거 푸는데만 거의 4~5시간은 걸린듯 하다. 고작 4~5시간이라고 생각할 수 있지만 0에서부터 만드는 것이 아니라 Advanced level에서 만든 계산기에 세 가지 기능 정도만 추가하면 되는 건데 그정도의 시간이 걸린 것이다. 굉장히 많은 시행착오를 겪었고, 그래도 좀 뿌듯한 건 페어님 덕분에   코드 스테이츠에서 제시하지 않은 다른 오류들을 발견해서 해결하기도 했고, 코드는 좀 더러울지라도 완벽하게 기능을 하는 계산기를 만들었기에 뿌듯했다.   

---

[ 오늘의 TODO ]

1. 코드 스테이츠) 계산기 만들기
   1-1) Advanced
   1-2) Nightmare
2. 패스트 캠퍼스) 인강 3개 이상 듣기 // option
3. 생활) 물 1L 이상 마시기
4. 개선) 페어 프로그래밍 할 때도 혼자 있을 떄처럼 침착하게 오류 대처하기
   // 오늘은 좀 말없이 시간을 가지면서 대처한 것 같다

---

[ 오늘의 오류해결 ]

1. script.js VS scriptSolo.js

  이건 너무 웃픈 이야기다. 계산기를 만들기 위해서 코드 스테이츠가 제공하는 HTML, CSS, JavaScript 이 세 가지만을 수강생들이 활용하면 됐다. 어제 우리는 Bare를 다 마치고 Advanced를 진행하는 도중에 오류점을 발견하고 시간이 돼서 마무리를 지었다. 그리고 나 혼자서 script.js 파일을 복사해 scriptSolo.js 파일을 만들었고 그 파일로 혼자서 오류를 잡기 위해 코딩했다. 다행히 오류를 잡아냈고 오늘 처음 시작할 때 나는 다시 script.js 파일로 돌아가서 페어분과 함께 내가 미리 작성했던 코드를 공유하고 의견을 나눠서 나온 결과물로 새롭게 코드를 작성했다. 그후, 다음 스텝으로 넘어가 코딩을 했는데 페어분은 우리가 원하는 상태로 잘 출력됐지만 내 거는 여전히 제자리그 상태였다. 오타라도 났는지 하나하나 살펴보고, 쓸데 없는 거 작성하지는 않았는지도 살펴봤다. 그런데 여전히 똑같은 상태였다. 한 10분 정도 그렇게 있다가 페어분이 "혹시 scirptSolo.js로 계속 연결된 거 아니에요?"라고 말해줬다. 설마 싶었다. 아니나 다를까 페어분 말대로 여전히 scriptSolo.js와 연결되어 있었다. 10분을 이거 연결 새로 안 해준 것 때문에 날려버렸다. 

 

  ... TODO의 개선 항목에 넣을 정도의 심각함은 아니지만 진짜 그런 멍청한 짓은 다시 하지 말아야겠다. 

 

 

2. For문 사용보다 변수 사용

  전에 내가 코플릿을 풀다가 내가 정답으로 제출한 코드는 난잡하고 코드 스테이츠가 제시하는 코드는 깨끗하고 아름답다고 하기까지 했다. 그 때, 내 것과 코드 스테이츠의 코드를 자세히 분석해본 결과   난잡한 코드와 깨끗한 코드의 큰 차이는 변수 사용에 있었다.   나는 기존의 변수를 사용하면서 시간복잡도가 높아질 정도로 무리하게 for문과 if문을 동시에 여러개 사용한 반면, 코드 스테이츠가 제시하는 코드는 아예 새로운 변수를 하나 선언, 할당해버리고 그걸 가지고 if문이나 for문 하나만을 사용하던가 병렬적으로 나열해서 시간 복잡도가 단순하게 사용했다. 

 

     그 이후로 나는 만약에 내가 코드를 if문과 for문을 복잡하게 엮어서 사용하려고 할 때면 "어떻게 변수를 선언하면 더 간단해질까?"라는 생각을 먼저 하기 시작했다.    그런 생각 덕분에 오늘 굉장히 더러워질 뻔한 코드를 하나 살렸다. 우리가 작성한 코드를 보면 계산기에서 소수점을 사용하고자 할 때 발생할 수 있는 오류는 소수점을 연속으로 눌렀을 때였다. 그 때 우리는

 

[ 지금까지 입력 받아온 것들(전부 String의 형태로 받아왔음)을 for문으로 다 돌려서 만약 " . (소수점)" 이 있다면( if문 ) 소수점을 더 입력받지 않는다 ]

 

  로 수도 코드를 작성했었다. 그런데 좀더 쉬운 방법을 생각해보니 아예 처음 소수점을 입력 받았을 때 [ isDemical = true ] 로 변수를 선언해 Boolean으로 true를 할당해주고 다음에 for문 돌릴 필요 없이

 

[ 만약  isDemical === true 면 소수점을 더 받지 않는다. ]

 

  라는 수도 코드를 작성하고 실제 코딩해서 문제를 해결했다. 수도 코드만 봐도 변수를 선언한 경우가 매우 간단함을 알 수 있다. 

 

 

3. 0.3 + 0.3 = 0.599999996? 

  이건 아직까지도 미스테리로 남아있다. 우리는 분명이 제대로 코딩을 작성했고 코드 스테이츠에서 제시하는 오류 테스트도 통과를 했는데 우리 계산기에는  0.3 + 0.3 = 0.599999996으로 나오는 것이다. 나뿐만 아니라 페어분도 이렇게 나오니까 대체 왜? 왜 이렇게 나오지? 페어분이랑 엄청 고민했는데 아니 갑자기 어느 순간 더하니 0.6이 됐다. 엥? 그런데 나뿐만 아니라 페어분도 0.6으로 나왔다. 이게 도대체 뭐지? 뭐가 문제지? 아무리 문제점을 찾아보려고 해도 문제점을 찾을 수 없었다. 어찌됐든 오류는 해결됐지만 이것은 여전히 풀리지 않는 미스테리다.

 

 

4. classList.add 와 querySelector

  우리가 해야할 작업은 자바 스크립트를 통해 HTML에 있는 한 태그에 직접적으로 class를 부여해줘야 했다. 그래서 나와 내 페어분은 자연스럽게 클래스를 추가할 수 있는 방법을 구글링을 통해 찾아봤고 밑의 링크를 통해서 classList.add로 추가할 수 있음을 알아냈다.(더불어서 classList.remove로 클래스를 지울 수 있다는 것까지 확인했다)

 

https://hianna.tistory.com/469 

[Javascript] class 추가/변경/삭제/읽기 (className, classList)

 

  classList로 사용해도 오류가 나자 좀더 자세한 사용법을 알기 위해 직접 MDN으로 검색했다. 

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Element.classList - Web APIs | MDN

  

  내가 오류가 났던 이유는 classList.add('.className') 이렇게 클래스 이름 앞에 .을 붙였는데 그 .을 빼줘야 했다.

 

  이렇게 다 하고 오류가 안나겠거니 했는데 또 오류가 났다. 우리는 operator라는 클래스를 가진 모든 함수 중에서 사용자에게 입력 받은 operator만 저 클래스 이름을 붙이고 싶었는데 어떤 연산자든 입력받으면 다 +가 있는 태그에만 클래스가 새로 생성되었다. 그 이유를 확인하기 위해 여러 방법을 찾아봤는데 classList.add앞에 붙은 것이 querlySelector( '.operator' ) 라서 잘못된 것이었다. 어제도 querlySelector에 대해서 찾아봤는데 얘는 인자로 받은 클래스 혹은 아이디가 나오는 가장 첫 번째 것만 불러온다. 그러니까 +가 있는 태그가 operator라는 이름이 붙은 클래스 중에서 가장 먼저 오는 것이기 때문에 그것에만 class명이 붙은 것이다. 이것을 해결하기 위해 querlySelectorAll( )을 사용했다. 인자로 받은 클래스 혹은 아이디를 전부 다 배열의 형태로 가져오는 것이다. 

 

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Document.querySelectorAll() - Web APIs | MDN

---

[ 오늘의 교훈 ] 

1. 프로젝트할 때(큰 규모의 코딩을 할 때) 주석을 잘 활용하자 

  이건 오늘 내가 코딩하다가 급하게 느껴서 시행하기 시작했다. 아직은 내가 코드를 보는 눈이 안 생겨서 그런지   내가 작성해놓고도 내가 왜 이 줄을 작성했는지 까먹을 때가 있다.   그걸 느꼈을 때부터 엄청 꼬였다. 에러가 뜨면 코드들을 확인하면서 이게 왜 떴는지를 확인해야 하는데 내가 작성해놓고도 왜 작성했는지 모르겠는 코드, 이게 정확히 어떤 기능을 위해서 썼는지 기억이 안 나는 코드, 이게 어떤 코드랑 연결돼 있는지 파악이 안 되는 코드 등 그런 것들을 보면서 그걸 해석하느라 또 시간을 잡아먹는다.

 

  그래서 앞으로는 코드를 작성할 때 웬만하면 주석을 달아주려고 한다. 변수를 선언했다면 왜 이 변수를 선언했고 이 변수의 역할은 무엇인지. 함수를 만들었다면 이 함수는 무엇을 위한 함수인지(물론, 이름으로 직관적으로도 깨닫게 하는 방법을 더 자주 사용해야할 듯 싶다) 이 조건문과 반복문은 어떤 것과 연결되고, 왜 이것을 사용해야 하는지 등을 간략하게나마 적어놓고자 한다. 언젠가는 주석 양이 작아지기를 바란다.  

 

 

'