오늘의 Checkpoint
계산기 기능 구현
0 + 0 = 0 형태의 계산기
- script태그로 js 파일 연결
- 버튼 잘 눌렸는지 확인
- console.log() 활용
- 계산 기능 구현
- 첫번째 칸 숫자 : textContent 활용
- 두번째 칸 숫자 : 첫번째 칸에 숫자 입력되어 0이 아닐경우 입력
- 연산기호 : 클래스명 operator 일때 입력
- 연산 Enter버튼 : 1~3번 결과물을 arguments로 받은 함수 작성하여 호출, 마지막칸에 연산결과 입력
- 초기화 AC버튼 : html코드 초기상태로 변경
Bare Minimum Requirements
(소프트웨어가 역할을 해내기 위한) 최소한의 요구사항
Pseudocode 의사코드
코딩 작업 전 사람의 언어로 작성한 논리
-> 문제 해결방법 도출하는 단계(스케치)
계산기 구현 참고
buttons.addEventListener('click', function (event) {
// 버튼을 눌렀을 때 작동하는 함수입니다.
const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클래스 정보를 가져옵니다.
const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
/* ...초략... */
const firstOperend = document.querySelector('.calculator__operend--left');
/* ...중략... */
if (target.matches('button')) {
// 클릭된 HTML 엘리먼트가 button이면
if (action === 'number') {
// 그리고 버튼의 클래스가 number이면 아래 코드가 작동됩니다.
console.log('숫자 ' + buttonContent + ' 버튼');
previousKey = 'number';
}
// ...
}
// ...
}user flow에 따라 기능 구현
0 형태의 계산기
- 첫번째 숫자 : 연산기호 누르기 전까지 입력된 숫자가 이어붙어져있는 상태로 표현
- 연산기호 : 화면상으론 표현되지 않고, 연산기호 저장된 상태 + 첫번째 숫자 저장
- 두번째 숫자 : 화면상의 숫자가 0이 아니거나 연산기호가 저장되어 있을 때, 숫자 화면에 표현
- 연산 Enter버튼 : 저장된 첫번째 숫자와 화면에 노출된 두번째 숫자를 저장된 연산기호를 사용하여 결과 추출 + 화면에 표시 -> 함수 사용
- 초기화 AC버튼 : 화면을 초기화 하고 저장된 변수도 초기화
*User Flow**
사용자가 서비스를 어떻게 이용할지 가정하여 흐름을 파악하는 것
숫자 버튼
ex. 70230*224= ?
- 연속적으로 숫자 입력
- 연산 기호 버튼 누른 후 0이 아닌 숫자를 다시 입력
0인 경우
-> 입력받은 값 화면에 표현
0이 아닌 경우
-> 숫자 이어붙이기
textContent 속성
html element의 텍스트 부분의 값 변경
문자열 타입으로 값 추출
document.querySelector(선택자입력)
html내에서 특정 선택자 요소를 선택하여 추출<div class="calculator__display">0</div>const display = document.querySelector('.calculator__display'); console.log(display.textContent); // '0' console.log(typeof(display.textContent)); // 'string' 문자열타입으로 추출
연산 버튼
이전 입력값 저장
: firstNum 변수 사용
연산자 기호 저장
: operatorForAdvanced 변수 사용
previousKey에 클릭한 버튼의 타입(숫자, 연산기호 등 구분을 위해)저장
/* 힌트 코드 */
// 변수에 연산자 기호가 할당되었거나, 계산기의 화면에 담긴 텍스트가 '0'이라면 아래의 코드를 실행합니다.
if ( operator === 'x' || display.textContent === '0') {
console.log('숫자 ' + buttonContent + ' 버튼');
display.textContent = buttonContent; // 버튼의 텍스트를 화면의 텍스트로 바꿉니다.
}
/* ...생략... */연산 버튼 누른 후, 숫자 입력시
숫자 이어붙이기가 아닌 새로 입력후 이어붙이기
-> 숫자버튼 구현때 작성한 코드 수정
-> 조건 추가 필요
연산 결과 Enter 버튼
이미 만든 calculate 함수 활용
이전 입력 숫자, 연산자와 화면에 표시된 숫자 사용
연산 결과 화면에 표시
초기화 AC 버튼
다음 계산을 위해 초기화 하는 작업
-> 화면 초기화
-> 연산에 사용된 모든 값들 초기화(첫번째 입력값, 연산기호, 두번째 입력값)
if (action === 'clear') {
// 1. 계산기에 입력되었던 첫 번째 값
// 2. 연산자
// 3. 계산기에 입력되었던 두 번째 값
// 4. 화면 -> 0 표기
console.log('초기화 버튼');
previousKey = 'clear';
}Git 사용 주의사항
- 오픈소스는 fork 하여 기존 파일이 수정되는 일이없게 주의!
- 수정한 파일을 Pull requests하여 확인 요청
더하기
자기주도적 학습 가이드
이번 유닛은 과제로 이루어져 있기 때문에, 이해도 자가 점검 리스트가 없습니다. 아래 내용에 따라 진행해 주세요.
- <과제1. 계산기 구현하기>의 Bare Minimum Requirements를 완성하지 못했다면
- <과제1. 계산기 구현하기>의 Bare Minimum Requirements> 완성하기
- 이해되지 않는 개념 아고라스테이츠에 질문하기
- <과제1. 계산기 구현하기>의 Bare Minimum Requirements를 완성했다면
- <과제2. User flow에 따라 기능 구현하기>의 Advanced Challenges 도전하기
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
- 블로그에 정리 및 회고를 마친 후, 계산기의 CSS를 수정하여 더욱 예쁜 계산기를 만들기
- <과제2. User flow에 따라 기능 구현하기>의 Advanced Challenges를 완성했다면
- <과제2. User flow에 따라 기능 구현하기>의 Nightmare에 도전하기
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
- 블로그에 정리 및 회고를 마친 후, 계산기의 CSS를 수정하여 더욱 예쁜 계산기를 만들기
- <과제2. User flow에 따라 기능 구현하기>의 Nightmare를 완성했다면
- 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기
- 계산기를 만든 과정과 경험을 블로그에 정리 및 회고하기
- 블로그에 정리 및 회고를 마친 후, 계산기의 CSS를 수정하여 더욱 예쁜 계산기를 만들기
오늘의 나
느낀점
어린이날 휴무에 또 쉬지 못하고 끝내지 못한 정리나 문제 풀이하다가 또 늦게 잤다. 게다가 계산기 레이아웃이 은근 빨리 끝나지 않아서 자고 일찍 일어나서 하느라 3~4시간 밖에 자지 못했다… 그래서 그런가 오늘 튜토리얼을 이해를 못했다. 읽기는 했는데 머리에 남아있지 않았고, 오류 찾아내는게 계속 일이었다. 막상 실시간 세션에서 설명들으면 어렵지 않은 내용인데, 이걸왜 몇시간동안 둘이서 헤맨건지.. 내일 다시 튜토리얼을 읽어보고 정리해봐야겠다. 잠을 못자서 멍했던건지, 아니면 그저 빨리 해야된다는 압박감 때문인건지.
게다가 기껏 레이아웃 다시(엇그제 복잡하게 뼈대 만들어서 연습겸 다시 제작해봄) 만들었는데, 과제 제출하려니까 자바스크립트 파일이 안먹혔다. onclick 같은 걸로 한번 짜보는게 나을지, 아니면 정리못한 부분 복습하는게 맞는지 모르겠다…자율학습이긴 한데… 이게 설명이 너무 스킵되어있는 것 같다…
개선점 및 리마인드
- 일찍 자고 일찍 일어나서 작업을 해보자
- 내일을 위해 잠 자는 시간은 확보하기
