S1 Unit 7. 간단한 웹앱 만들기

💡 이번에 배운 내용

• Section1.
  웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.
• Unit7. 간단한 웹 앱 만들기: 이제까지 배운 내용을 바탕으로 웹 계산기를 만들어본다.

느낀점

이번 유닛은 개념 위주의 학습이 아니라 난이도에 따라 나눠진 과제를 차례로 완수하는 실습이었다. 계산기의 기본 기능을 만든 사람에 한해서 더 높은 난이도의 계산기 기능을 도전과제로 만들어 보는 시간이었다.

• 페어 프로그래밍을 하며 느낀 점: 나보다 더 소극적인 페어를 만나면 어떻게 해야할까? 스몰토크를 더 해야할까 아니면 그냥 해야할 일만 하는게 좋을까? 의사소통에서 적극성이란 참 어려운 주제다!
• 의사코드의 중요성:
  중간에 높은 난이도의 계산기를 만들면서 의사코드를 잘 쓰는 것이 참 중요하다고 느꼈다.
  • 기능이 복잡해질수록 길어질수록 간단한 것부터 잘 적어야 한다. (아직은 계속 의사코드를 작성해야하는 단계!)
  • 경우의 수, 조건을 생각할 때 하나하나 빠진 것은 없는지 잘 챙겨야 한다.
  • 모든 경우의 교집합부터, 가장 복잡한 조건부터 먼저 거른다.
  • 각 경우의 결과를 적고, 결과가 같은 경우끼리 잘 묶는다.

키워드

Bare Minimum Requirements, textContent

학습내용

git을 통해 모두 똑같은 계산기의 프로젝트(HTML, CSS, JS, 테스트 관련 파일)를 제공받았다. 그 프로젝트를 바탕으로 메인 Javascript파일의 코드를 수정하여 각 난이도에 맞는 계산기를 만들고 테스트하여 하나씩 통과하는 방식으로 진행되었다.
(저작권의 이유로 코드는 공개할 수 없음!)

Ch1. 계산기 Bare Minimun Requirements 해결하기

a Bare Minimun은 '최소한의 것, 가장 기본적인 것'이라는 뜻으로 Bare Minimun Requirements은 최소한의 기본적인 요구사항을 의미한다.
실제 업무에서 소프트웨어의 이 BMR을 정해두고 협업하면 좀 더 효율적이고 유저 친화적인 소프트웨어를 만드는 데 도움이 된다. 개발자는 특히 이 BMR부터 만드는 과정에서
소프트웨어의 프로토타입을 만들 수 있으며
부족한 점, 개선점을 보다 쉽고 빠르게 찾아서 해결할 수 있게 된다.

이 단계는 위 개념을 적용하여 계산기의 BMR을 해결하는 과제로
가장 낮은 난이도로 구성되어 있다. 이번 유닛에서는 최소한 여기까지는 만들어서 제출해야 했다.

1) 계산기의 기본 구성

• 화면(총 4칸): 첫번째 숫자, 연산자, 두번째 숫자, 결과
  ex) 0 + 0 = 0
• 버튼: 숫자 버튼, 연산자 버튼(+, -, *, /), 초기화 버튼, 계산 버튼
  요구사항은 아래와 같다.

2) 요구사항

• 버튼이 잘 눌리는지 확인(console.log()로 확인)
• 첫번째 칸에 첫번째 숫자 입력하기
• 두번째 칸에 두번째 숫자 입력하기
• 연산자 출력하기
• 첫번째 숫자, 두번째 숫자, 연산자로 계산 기능 만들기
• 계산 결과 출력하기
• 초기화 버튼을 눌렀을 때 계산 초기화하기(0,+)
• 주의사항) 숫자는 0과 0이 아닌 숫자 두 가지뿐이다.

3) 기존 계산기 코드 분석하기

• 필요한 요소(노드)는 querySelector를 이용해 변수에 할당 되어있다.
• 버튼 클릭 이벤트가 선언되어 있다.
• 버튼 클릭 이벤트에 이벤트 대상, 버튼의 종류(숫자, 연산자, 초기화, 계산 등등), 버튼의 내용이 변수에 할당 되어있다.
• 계산 함수가 선언되어 있다.(계산 기능은 여기에 구현)

Ch2. 계산기 Advanced

요구사항이 첫번째 과제에 비해 좀 더 복잡하고 까다로워졌다.

1) 변경된 계산기 구조

기존의 칸으로 구현된 화면에서 일반 계산기와 같은 화면으로 바뀌었다.

2) 요구사항

• 첫 번째 숫자 입력: 한 화면에 연달아서 입력되어야 한다.
• 연산자 입력: 화면에 보이는 숫자를 따로 저장
• 두 번째 숫자 입력: 연산자가 입력된 상태에서 빈 화면에 연달아 입력
• 계산 버튼 기능: 연산된 결과가 빈 화면에 출력되어야 한다.
• 초기화 버튼: 모든 변수 초기화

Ch3. 계산기 Nightmare

이름에서 알 수 있듯이 가장 난이도가 높은 계산기 과제다.

1) 요구사항

• 계산기 모양, 버튼의 배열 등을 수정하고 버튼 효과를 준다.
• 소수점 버튼
  • '.'버튼을 통해 소수점 계산이 가능하도록 한다.
  • '.'버튼을 여러 번 눌려도 한 번만 입력되어야 한다.
  • '.'을 누르고 숫자를 누르면 자동으로 소수점이 입력된다. (ex) .3은 0.3
• 계산 버튼
  • 한 번 계산 후, 계산 버튼을 계속 누르면 이전의 숫자와 연산자가 재계산 된다.
    ex) 2+2를 입력하고 계산 후, 계산 버튼을 누를 때마다 결과에 +2가 된다.
  • 연산자 버튼을 누르기 전에 계속 계산 버튼을 누르면 계산에 영향이 없어야 한다.
• 연산자 버튼
  • 연산자를 연달아 눌러도 가장 나중에 누른 연산자를 제외하고 나머지는 계산에 영향이 없어야 한다.
  • 계산 결과를 누르지 않고 계속 계산하며 연산자를 누르면, 계산이 누적되어야 한다.

질문해보기

1. textContent VS innerText

• textContent
  Node.textContent는 Node와 그 자손 요소의 텍스트 콘텐츠를 표현한다.
  태그를 제외한 모든 텍스트를 가져온다.
  값은 문자열 또는 null로
  Node가 document 또는 DOCTYPE인 경우 null을 반환한다.
• innerText
  Node와 그 자손 요소의 텍스트 콘텐츠를 표현하되,
  실제 렌더링되는 값을 가져온다.
  ex) <br>태그로 줄바꿈 된 결과를 표시하고, display:none;으로 숨겨진 요소는 가져오지 않는다.

참고 및 출처:
Javascript MDN - Node.textContent
Javascript MDN - innerText

2. innerHTML
Element.innerHTML은 Element가 포함한 HTML이나 XML을 가져오거나 재설정할 수 있다.

참고 및 출처: Javascript MDN - innerHTML