2주차 과제에 이미 아래 내용이 변수로 선언되어 있었다.
- 계산기 사칙연산 기능 구현
function calculate(n1, operator, n2) {
let result = 0;
// TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
// ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
return String(result);
}
[내 코드]
function calculate(n1, operator, n2) {
let result = 0;
if(operator === '+'){
result = Number(n1) + Number(n2)
}else if(operator === '-'){
result = Number(n1) - Number(n2)
}else if(operator === '*'){
result = Number(n1) * Number(n2)
}else if(operator === '/'){
result = Number(n1) / Number(n2)
}
return String(result);
}[계산기 액션]
buttons.addEventListener('click', function (event) {
const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
if (target.matches('button')) {
if (action === 'number') {
if (firstOperend.textContent === "0") { //firstOperend가 0이면
firstOperend.textContent = buttonContent;
} else if(firstOperend.textContent !== '0'){
secondOperend.textContent = buttonContent;
}
console.log('숫자 ' + buttonContent + ' 버튼');
}
if (action === 'operator') {
operator.textContent = buttonContent;
console.log('연산자 ' + buttonContent + ' 버튼');
}
if (action === 'decimal') {
console.log('소수점 버튼');
}
if (action === 'clear') {
firstOperend.textContent = 0;
secondOperend.textContent = 0;
operator.textContent = '+';
calculatedResult.textContent = 0;
console.log('초기화 버튼');
}
if (action === 'calculate') {
calculatedResult.textContent = calculate(firstOperend.textContent,operator.textContent,secondOperend.textContent);
console.log('계산 버튼');
// enter에 결과가 출력되야 하니까 계산버튼에 calculate 함수를 호출해준다
}
}
});
- textcontent
이번 과제를 진행하면서 textcontent의 대해 찾아보았다.
textContent: 텍스트를 추가할 수 있는 프로퍼티
사용방법: 엘리먼트.text.Content = '내용'
일반적으로 텍스트 엘리먼트에 추가하는 경우 "innerText'가 가장 많이 쓰인다고 한다
공통점
1. 텍스트노드를 추가
2. 해당 엘리먼트의 텍스트 값을 반환한다.
차이점
1. textContent가 브라우저 호환성도 더 높고 가볍다고 알려져있다.
2. 값으로 가져올 때 다수의 스페이스가 존재하는 경우 하나로 가져오느냐 모두 가져오느냐의 차이가 있다
innerText: 불필요한 공백을 제거하고 텍스트로 반환
textContent는 모든 텍스트를 가져온다.
n1, operator, n2 함수를 잘못 지정했던 건지 라이브 서버에서 출력조차 되지 않길래 한참 헤매다가
개발자 콘솔로 확인 시에는 정상적으로 호출이 되는 것을 알 수 있었다.
로직을 살펴보니 함수는 있으나 어디선가 호출을 하지 않았다는 것을 알게 되었고 과제 튜토리얼에서 언급했듯
마지막에 값이 출력되어야 한다는 것을 이해하여 계산 액션에 함수를 호출하여 정상적으로 출력될 수 있게 했다!
비록 과제를 하기 전 페어에게 짐이 되고 싶지 않아 2, 3시간 일찍 일어나 미리 먼저 이전 기수분들의 로직을 미리 보고 코드를 해석하고 이해하느라 조금 애먹었지만 아직까지도 내 로직을 누구에게 설명할 수 없어 마음이 좋지는 못하다.
언제쯤 늘 수 있을까?
급하지 않게 천천히 노력해야지 비교하지 말자!
