TIL Day-5

코드스테이츠 5일차

오늘로 코드스테이츠 1주차가 끝났다.
주말동안 못풀은 코딩 문제, 계산기 만들기 심화과정등을 해결해봐야겠다.

계산기 만들기의 CSS는 어렵지 않았지만
역시 자바스크립트를 통해 작동시키는 부분은 조금 어려웠다.

같이 만들던 페어분은 이번 코드스테이츠를 통해 처음 코딩을 하셨던 분이라
많이 어려워하셔서 이것저것 알려드리며 진행했다.

솔직하게 말하면 페어분이 코딩을 처음 배우시는 분이라
내가 잘 알려줄 수 있을까 많이 걱정스럽게 진행했는데
다행히 내 수준이 계산기의 기본 기능을 만들거나
CSS등을 알려줄수 있는 수준이었다는 점을 확인할 수 있었던
좋은 기회가 되었었다.

페어 프로그래밍이 끝나고 페어 리뷰를 받았을때
문제 이해도가 높고 많이 알려주셔서 감사하다는 글을 봤을땐
뿌듯함을 느끼기도 했다.

새로 배운 것들

• querySelector

자바스크립트에서 HTML에 접근할 때 사용하는 방법이다.
이를 이용해 HTML의 엘레멘츠를 변경할 수 있다.

독학할때에도 사용했었던 적이 있었지만
그때당시 사용할 때에는 태그의 속성값을 변경할 때 주로 사용했다면
이번엔 컨텐츠를 변경할 때 주로 사용했다.

<button class="number">7</button>

이런 HTML 태그가 있다면

const firstOperend = document.querySelector('.number').textContent = 8

이런식으로 firstOperend 라는 변수를 선언해
document.querySelector('.number') 값 중에서도
.textContent를 이용해 HTML태그의 클래스인 number 를 선택해
이 엘레멘츠의 텍스트 컨텐츠인 7을 8로 변경하는 것이다.

이걸 이용해 계산기에 현재 입력된 값을
계산기에 넣은 숫자 버튼(1, 2, 3, ... , 9)을 클릭했을때
클릭한 숫자로 변경할때 주로 사용했다.

그럼 변경된 입력값에 다른 숫자를 이어 붙이게 만들려면
어떻게 해야될까...?

계산기 만들기 심화과정의 첫번째 문제였다.

단순히 입력된 값만 변경할 경우 한자릿 수만 계속 변경된다.
내가 해결한 방법은 아래와 같다.

if(현재 입력된 값 === '0') {
	현재 입력된 값 = 클릭된 숫자 버튼
} else {
  현재 입력된 값 += 클릭된 숫자 버튼
}

코드로 풀어 쓰기엔 이해가 잘 안될것 같아 한글로 작성했다.

한줄씩 풀어서 설명하자면
현재 입력된 값 === '0' 이부분은 계산기의 입력 값이
존재하는지 여부를 확인하는 것이다 만약 0이라면
아무것도 입력이 안된 상태라고 가정될 수 있을 것이다.

현재 입력된 값 = 클릭된 숫자 버튼
이때 0이 아닌 다른 숫자를 클릭하면 그 값이
현재 입력된 값에 할당 되는것이다.

현재 입력된 값이 0이 아니라면
현재 입력된 값 += 클릭된 숫자 버튼
현재 입력된 값에 클릭된 숫자 버튼의 값을 더해준다.
이렇게 하면 입력된 값 옆에 클릭된 숫자가 입력된다.

더해준다고해서 숫자끼리 더해지는것이 아니다.
왜그런지 잘 모르겠다면 위로 올라가 우리가 어떤 값을 바꾸고 있는것인지
다시 한번 생각해 보자 그래도 모르겠다면 문자열에 대해 다시 공부하자