● 2월 23일 [간단한 웹앱 만들기]

● 2월 23일 [간단한 웹앱 만들기]

 

 

 

아래는 내가 오늘 만들기전에 생각했던 회로를 한글로 적었다.

ㅎ.. 내생각엔 다시 풀어야될 것 같다.

변수 : 첫번째숫자(firstNum), 연산자(operatorForAdvanced), 이전에누른기능(previousKey), 첫번째숫자랑계산할값(previousNum)

1) 수입력버튼

• 처음 값이 '0'이면 / 이전에 누른 값이 연산자면 / 이전에 누른 값이 계산버튼이면
  • 방금 누른 버튼의 수 보여줘
• 아니면 기존 수에 계속 더한 문자열 수 보여줘 ( 1 --> 12)
• 마지막에 이전에 누른 기능 수입력버튼으로 남겨줘

 

2) 연산자버튼

• 이전에 누른 값이 수입력버튼이었니?
  • 그럼 첫번째숫자 true니? false니?
    • 이전 값에 그럼 지금 보여지는 거 첫번째숫자랑계산할값으로 넣어줘.
    • 그다음에 첫번째숫자랑, 첫번째숫자랑계산할값 계산하고 띄워줘
    • 그담에 첫번째 숫자는 방금 계산한 값으로 저장해줘
  • 첫번째 숫자 false면 보여지는 값 첫번째 숫자로 넣어
• 연산자에 지금 누른 연산자 버튼 넣어놔 (* / + / /+ -)
• 마지막에 이전에 누른 기능 연산자버튼으로 남겨줘

 

3) 소수점버튼

• 이전에 누른 값이 연산자 버튼이었니?
  • 그러면 보여지는 값 "0."으로 설정해 (소수점)
  • 마지막에 이전에 누른 기능 수입력버튼으로 남겨줘
• 그게 아니라면 지금 입력된 수에 소수점 있는지 확인해 없어?
  • 없으면 소수점 넣어

 

4) 지우기버튼

• 모든 값 맨처음에 있던 것 처럼 초기화해 기본 디폴트값들로 돌려놔.

 

5) 계산버튼

• 이전에 누른 값이 연산자버튼이니?
  • 그럼 보여지는 거 첫번째숫자랑계산할값으로 설정해
  • 그리고 보여지는거 첫번째숫자랑 첫번째숫자랑계산할들 계산해서 보여줘
  • 마지막에 이전에 누른 기능 계산버튼으로 남겨줘
• 이전에 누른 값이 계산버튼이니?
  • 첫번 째 값을 보여지는 값으로 설정해
  • 지금 보여지는 값 첫번째값이랑 이전에 있는 값이랑 계산해서 보여줘
  • 마지막에 이전에 누른 기능 계산버튼으로 남겨줘
• 이전에 누른 값이 수입력버튼이니?
  
  • 첫번째값 undefined가 아니니?
    • 그러면 보여지는 값 첫번째숫자랑계산할값으로 으로 설정해
    • 보여지는 값 계산해서 보여줘
    • 마지막에 이전에 누른 기능 계산버튼으로 남겨줘
  • undefined면 아무것도 하지마

---

● 내가 궁금했던 점

• innerHTML, textContext, innerText의 차이는 무엇인가?
  • JavaScript에서 textContent, innerHTML, 그리고 innerText는 모두 DOM 요소의 텍스트 내용에 접근하는 속성이지만, 각각 약간 다른 방식으로 작동한다.
  • textContent: 요소의 모든 자식 노드의 텍스트 내용을 가져옵니다. 즉, HTML 태그를 포함한 모든 텍스트를 가져옵니다. 이 속성은 텍스트만 필요한 경우 사용하기 적합하다.
  • innerHTML: 요소의 내부 HTML을 가져옵니다. 즉, HTML 태그와 해당 태그의 내용을 모두 가져옵니다. 이 속성은 HTML을 수정하거나 요소 내의 다른 요소를 추가하거나 제거하는 경우에 사용하기 적합하다.
  • innerText: 요소의 자식 노드 중에서 텍스트만 가져옵니다. 즉, HTML 태그를 제외한 모든 텍스트를 가져옵니다. 이 속성은 textContent와 유사하지만, 렌더링되지 않은 텍스트를 반환한다.

<div id="example">
  <p>Hello <strong>world</strong>!</p>
</div>

const exampleDiv = document.querySelector('#example');

console.log(exampleDiv.textContent); // "Hello world!"
console.log(exampleDiv.innerHTML); // "<p>Hello <strong>world</strong>!</p>"
console.log(exampleDiv.innerText); // "Hello world!"

위의 코드에서 textContent는 요소의 모든 자식 노드의 텍스트를 가져오므로 "Hello "와 "world"를 연결한 "Hello world!"를 반환한다. innerHTML은 요소의 내부 HTML을 가져오므로 "<p>Hello <strong>world</strong>!</p>"를 반환합니다. innerText는 요소의 자식 노드 중에서 텍스트만 가져오므로 "Hello world!"를 반환한다.

---

● 끝맺음

• 📍 수업이외 학습
  • CS지식 2개 포스팅
  • redux 5분 공부함^^
  • 프로그래머스 4페이지 진입!!
  • 계산기 나이트메어 단계 성공•••ㅠ