[실습] 간단한 웹앱 만들기

📝 [Section1_Unit6] 간단한 웹앱 만들기

이번 unit은 하루종일 페어와 함께 계산기 만들기 과제를 했다. 생각보다 너무... 어려웠다...
그래도 로직은 바로 생각이 나는데 js에 익숙치않은 탓인지 생각한대로 한번에 작동하지 않았다.
제일 고전했던 nightmare 마지막 항목에 대한 코드를 복기해봐야겠다.

---

📎 Enter 버튼을 클릭했을 때 작동하는 코드

if (action === 'calculate') {
      if (firstNum) { // 🍊
        if (previousKey === 'calculate') {
          display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum);
        } else {
          previousNum = display.textContent;
          display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
        }
      }
      previousKey = 'calculate';
    }

❓ if문 조건 괄호 안에 변수가 들어있을 때

🍊를 보면 조건문 괄호 안에 냅다 변수가 들어있다. 이 코드는 Truthy 속성을 이용한 것이다.

JavaScript에서, 참 같은 값(Truthy)인 값이란 불리언을 기대하는 문맥에서 true로 평가되는 값입니다. 따로 거짓 같은 값으로 정의된 값이 아니면 모두 참 같은 값으로 평가됩니다.

거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 불리언 문맥에서 false로 평가되는 값입니다. (예: false, 0, -0, 0n, "", null, undefined와 NaN 등)

따라서 🍊의 조건은 " firstNum이 Falsy 로 분류되는 0, undefined 등이 되지 않는 다면~ " 이라고 해석할 수 있다.

📌 html 텍스트 가져오기

<div id='my_div'>
  그냥 텍스트 입니다 #     # 사이에 공백이 있어요
  <span style='display:none'>숨겨진 텍스트예요</span>
</div>

✔️ innerHTML

innerHTML의 속성은 element이다. 해당 element내에 포함 된 HTML 또는 XML 마크업, 태그를 content로 가져올 수 있다. 따라서 html,css 코드를 javascript에서 마음대로 수정할 수 있다.

element.innerHTML = "innerHTML"; // innerHTML 출력

// style이 수정된 content 출력
element.documentElement.innerHTML = "<span style='color:pink'>innerHTML</span>"

✔️ innerText

innerText의 속성 역시 element이고, 해당 element의 text만을 다룬다. 따라서 따로 html코드를 작성하더라도 적용되지 않는다.

element.innerText = "innerText"; // innerText 출력

// style 수정되지 않고 출력
// 스타일 적용되지 않은 기본 폰트로 <span style='color:pink'>innerText</span> 출력
element.documentElement.innerHTML = "<span style='color:pink'>innerText</span>"

✔️ textContent

textContent의 속성은 node이다. 따라서 <script>나 <sytle>와 관계없이 해당 node가 가지고 있는 텍스트 값을 그대로 읽어준다.

element.textContent = 'content';