210122_TIL

김재헌·2021년 1월 22일

코딩 공부를 하다 보니 일 년에 한 권도 읽지도 않던 책을 샀다. 맨날 앉아서 프로그래밍 언어를 읽고 있으니 사람이 쓰는 글자가 그리웠나 보다. '오리진: 지구는 어떻게 우리를 만들었는가'라는 책을 샀는데 유발 하라리의 '사피엔스'와 어깨를 나란히 하면서 재러드 다이아몬드의 '총, 균, 쇠'와 비슷한 맥락이라고 한다. 나중에 다 읽는다면 후기도 한 번 남겨보겠다.

JavaScript Caculator

기본적인 HTML과 CSS는 짜여 있고 JS만 적용해 웹 계산기를 만들어보는 스프린트를 진행했다. 여태까지 배웠던 문법을 활용해 계산기가 어떻게 돌아가는지 함수를 활용해 적용하는 것이다. 일단 정말 기초적인 계산기를 만드는 과정도 하나의 '프로젝트'라고 한다. 그래서 개발자가 '프로젝트'를 진행할 때 갖춰야 할 소양을 배웠다. 가장 중요한 것은 내가 개발하고자 하는 소프트웨어가 갖추고 있어야 할 '최소한의 요구사항'이다. 이 '최소한의 요구사항'을 생각하고 프로토타입을 만들어야 개발자도 사용자도 쉽게 제품을 이해할 수 있고 그러므로 개선하기 쉬우며 오류를 예측할 수 있게 된다. 정규 내용엔 없었지만, 개발을 하면서 '사용자가 이런 기능은 사용 할 수 있어야 하겠지.', '이렇게 만들면 불편하겠다.', '이 기술은 없어서는 안 되겠네.'등 사용자에 대한 편의성을 계속 고민해야 한다고 생각한다. 이러한 고민이 없다면 절대 좋은 소프트웨어가 나올 수 없으며 더 발전하는 개발자가 될 수 없다.

JavaScript

**JS는 저번 시간에 배우길 상호작용을 담당한다고 배웠다. 그래서 JavaScript Caculator를 진행하면서 내가 쓴 함수를 HTML에 어떻게 적용시킬 것인지 공부하게 되었다.

if (target.matches('button')){}
// 만약(누른 엘리멘트가 버튼이야?.그게 일치하면('HTML엘리먼트'))이면 작동
// if문의 중괄호 내에는 언제 작동해? 버튼 누르면~

document.querySelector('.sum').textContents
//HTML에서 class=sum으로 특정된 엘리먼트의 textContents(내용)을 가져온다.
_*브라우저에서 가져오는 내용은 기본적으로 전부 '문자열'이다_

buttons.function('click', function(event))
//계산기의 모든 버튼을 가져온 변수.(클릭하면, 함수가 작동)

아직 숙지하지 못한 반복문의 break와 continue 문법을 페어에게 간략하게 배웠다.

break: 반복문을 특정 조건에 끝낸다.
continue: i = 1, 2, 3, 4, 5일때 만약 2를 제외하고 반복문을 돌리고 싶을 때 사용한다.

CSS

Clip-path:circle, polygon··· -> 다양한 모양 가능 *Clip path maker 사이트 참조
border-radius: ?px -> 박스를 둥글게 만들 수 있다
cursor: pointer -> 버튼위에 커서를 올리면 pointer로 변경
overflow: hidden -> 내용이 넘치면 안보이게 할 수 있다 *어디에 쓰이나 궁금했는데 계산기에 쓰였다
boxshadow -> 박스 그림자 추가
class: hover -> 커서가 올라가면 색이 바뀐다(hover: 공중에 맴돌다) *가상 클래스로써 따로 분류하여 정리하는 편이 좋다.
class: active -> 누르면 색이 바뀐다
display: flex -> flex를 활용하면 좋다는대 CSS를 이리저리 만져봐도 아직 어떻게 쓰는지 잘 모르겠다. 다음주에 배운다고하니 알게되면 내용을 추가하겠다.**

Github 헬프데스크로 코드를 개선해나간 과정

(@pinroad님 정말 감사드립니다)

계산기를 만들면서 처음에 가장 오래 막힌 부분이

이렇게 처음에 버튼 6을 누르면 두번째 숫자까지 같이 6으로 바뀌는 부분이었다.

내가 생각한 코드 진행방식은 이랬다.

계산기에 숫자가 눌리면 첫번째 박스로 textContent가 입력된다.
첫번째 박스가 0이 아니고 연산자 기호가 눌리면
계산기에 숫자를 누르면 두번째 박스로 textContent가 입력된다.

그래서 작성한 코드가

 const target = event.target; 
  const action = target.classList[0]; 
  const buttonContent = target.textContent;  

 if (action === 'number') {

      firstOperend.textContent = buttonContent;
      
      if (firstOperend.textContent !== "0" && operator.textContent === buttonContent){
        secondOperend.textContent = buttonContent;
      }

이러한 코드였다.
이 코드에서 내가 잘못한 부분은 'button'을 눌렀을 때 action을 통해 class가 구분되어지고 있는 점을 놓친 것 이다.

그래서 고친 코드가

if (firstOperend.textContent === '0'){
        firstOperend.textContent = buttonContent;
      }
      
if (firstOperend.textContent !== '0'){
        secondOperend.textContent = buttonContent;
      }

이렇게 작성하였다. 그랬더니 앞서 말한 것 처럼 첫번째 박스와 두번째 박스에 숫자가 같이 입력되었다. JS는 코드를 위에서부터 차례대로 해석을 진행하기 때문에 if문을 따로쓰게되면 독립적인 if문으로 판단하여 해석이 진행된다. 이 코드에서 내가 잘못한 부분은 컴퓨터를 똑똑한놈이라고 생각한 것이다.

 if (action === 'number') {
      if (firstOperend.textContent === '0'){
        firstOperend.textContent = buttonContent;
        console.log(firstOperend.textContent);
        console.log(secondOperend.textContent);
      }  
      
      if (firstOperend.textContent !== '0'){
        secondOperend.textContent = buttonContent;
      }
        console.log(firstOperend.textContent);
        console.log(secondOperend.textContent);