오늘은 어제에 이어서 페어와 함께 그동안 배운 HTML, CSS, JS 지식을 이용하여 계산기를 만드는 과제를 했다. 어제 기본 계산기는 구현하였고 오늘은 테스트 케이스 중 통과되지 않는 케이스들을 해결할 방법을 찾았다.
간단한 테스트 케이스들은 괜찮았지만 연산을 반복하거나 연산기호를 연달아 넣은 경우 예기치 못한 에러가 계속 발생했다. 머릿속으로 로직을 따라가다가 꼬여서 빈 종이에 그려보기도 했지만 경우의 수가 늘어날 수록 정리가 되지 않아 힘들었다. 페어분께서 해결 방향을 빠르게 생각해내 주셔서 그래도 오래 헤매지는 않았다. 혼자서 코드를 보는 것보다 둘이서 코드를 보니 오류나 개선사항을 빠르게 캐치할 수 있었다.
계산기 로직을 다 구현한 다음에는 페어분께서 과제에서 요구한 기능 외에 기능(연산 히스토리가 화면에 표시되게 하는 기능)을 구현하려 했는데 계속 Mocha 테스트에서 문제가 생겼다.
Uncaught TypeError: Cannot read property 'prepend' of null
Mocha 테스트가 돌아가는 HTML과 계산기 HTML이 달라 에러가 계속 발생하는 걸 script문제인줄 알고 한참 고민했다. prepend할 요소를 찾지 못해 발생하는 오류니 HTML을 먼저 확인했어야 했는데. 오류 메시지를 꼼꼼히 읽었다면 좀 더 빨리 해결할 수 있었을 것 같다.
과제를 제출하고도 시간이 남아서 페어분 블로그도 보고 자극도 받았다. 나도 열심히 블로깅하고 github 잔디도 푸릇하게 심어야지! 알고리즘 문제를 매일 푸신다는데 정말... 존경. 매일 꾸준히 하는 것이 정말 생각보다 어렵다. 그래서 꾸준히만 해도 상위 10%라는 얘기가 나오나 보다. 페어분께서 디스코드 스터디룸에 초대해 주셔서 나도 매일 -까지는 어렵더라도 꾸준히- 알고리즘 문제를 풀어보려고 한다.
Today I Learned
<script>를 <body> 마지막에 적어야 하는 이유
- 브라우저는 HTML을 위에서부터 아래로 차례로 한줄씩 읽어들이고 실행하는데,
<script>태그를 만나면 해당 script를 그 자리에서 로드하고 실행시킨다. 따라서 script가 로드되는 동안<script>태그 이후의 HTML 내용이 로드되지 않기 때문에 화면에 표시되지 않는다. HTML 문서를 먼저 다 화면에 표시해준 뒤 script를 실행하는 것이 UX측면에서도 좋고 오류 발생도 막을 수 있다. 만약 script 안에서 DOM을 조작하는 경우 아직 로드되지 않은 DOM을 조작하려고 하면 오류가 발생하기 때문이다.
순수함수
-
함수형 프로그래밍에서 중요하게 다뤄지는 개념으로 부수효과 (함수로 들어온 인자의 상태를 직접 변경하는 것) 없이 동일 인자가 주어졌을 때 항상 같은 값을 반환하는 함수를 말한다.
-
function calculate(n1, operator, n2) { n1 = parseFloat(n1); n2 = parseFloat(n2); }```
textContent vs. innerText vs. innerHTML
<!-- index.html -->
<div id="selected-element">
<h2>This is a title</h2>
<br/>
<p>Hello World!</p>
Welcome,
Stranger!
</div>// script.js
const selectedElement = document.querySelector('#selected-element');
// 1. textContent ----------
console.log(selectedElement.textContent);
/*
This is a title
Hello World!
Welcome,
Stranger!
*/
// 2. innerText ----------
console.log(selectedElement.innerText);
/*
This is a title
Hello World!
Welcome, Stranger!
*/
// 3. innerHTML ----------
console.log(selectedElement.innerHTML);
/*
<h2>This is a title</h2>
<br>
<p>Hello World!</p>
Welcome,
Stranger!
*/textContent: 해당 요소 안에서 탭이나 줄바꿈 등 모든 공백을 포함한 텍스트를 리턴. 숨겨진 텍스트도 출력.innerText: 해당 요소 안에서 사용자에게 보여지는 텍스트 값을 리턴. 따라서display: none으로 숨겨진 텍스트는 출력하지 않음.innerHTML: 해당 요소의 HTML을 그대로 리턴.
