Sprint
- 핵심이 되는 기능을 최우선으로 구현하고, 잘 동작하는지 확인해야 합니다.
- 프로토타입(Prototype) : 사용자에게 검증받기 위해 UI/UX를 어느정도 고려한 소프트웨어
- 스프린트(Sprint : 단거리 달리기) : 프로토타입을 계속해서 만들고, 잘 동작하는 지 검증하는 과정. 실리콘밸리의 성공하는 스타트업에서 적용하는 에자일 개발 방법론의 핵심 키워드.
Bare Minimum Requirements
- Bare Minimum Requirements : 소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항.
- 소프트웨어의 프로토타입을 빠르게 만들기 > 프로토타입을 두고 기획자, 디자이너와 함께 회의 > 유져 경험을 개선.
- 개발자 : 프로토타입을 생성, 공유, 테스트 과정에서 이 소프트웨어에서 생길 수 있는 오류를 좀 더 빠르게 예측 가능.
Step 1 - CSS 마음껏 수정하여 예쁜 계산기 만들기
calculate.html 파일은 그대로 두고, yourStyle.css 파일을 수정합니다.
자신이 원하는 디자인으로 계산기를 꾸며보세요.
Step 2 - 버튼이 잘 동작하는지 확인하기
버튼을 클릭했을 때, 각 버튼이 잘 동작하는지 개발자 도구의 콘솔 탭에서 확인하세요.
Step 3 - 기본적인 계산 기능 구현하기
연산 시 script.js의 calculate 함수를 활용할 수 있도록 함수 calculate를 작성합니다.
처음 숫자 버튼을 클릭했을 때, 첫 번째 화면에 누른 숫자가 나타나야 합니다.
숫자 버튼과 연산자 버튼을 순서대로 클릭했을 때,
첫 번째 화면는 숫자,
두 번째 화면에는 연산자
가 나타나야 합니다.
숫자 버튼, 연산자 버튼, 숫자 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 순자가 순서대로 나타나야 합니다.
숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과가 순서대로 나타나야 합니다.
AC 버튼을 클릭했을 때, 화면에 0, +, 0, =, 0 이 순서대로 나타나야 합니다.
Step 4 - SpecRunner.html의 모든 테스트를 통과한 후 Github 홈페이지에 파일을 업로드 하여 과제 제출하기
미리 작성된 SpecRunner.html 파일을 열고, Requirements을 전부 구현했는지 확인 합니다.
무작정 따라하고 과제 제출하기 영상을 참고해서 코드스테이츠 레포지토리로 과제를 제출합니다.
Advanced Challenges
Advanced Challenges는 여러분이 필수적으로 해야 하는 과제는 아닙니다. 앞서 Bare Minimum Requirements를 달성하고, 시간이 남거나 더 깊은 공부가 필요할 때 도전할 수 있는 과제입니다.
이번 Advanced Challenges는 실제 계산기처럼 display(화면)가 있고, 버튼을 클릭할 때마다 화면의 숫자가 변경되면서 동작합니다. 시중에 판매중인 계산기와 비슷하게 동작하도록 만듭니다.
Step 1 - Advanced Challenges 테스트 활성화 시키기
spec/script.test.js, script.js, yourStyle.css 파일의 주석을 제거하고, Advanced Challenges 테스트가 잘 작동하는지 SpecRunner.html 파일을 열고 확인합니다.
아래와 같이 0 하나만 보이는, 이전과 다른 계산기 모습이 보여야 합니다!
image
[그림] 계산기의 display에 0이 나타납니다.
Step 2 - 숫자 버튼을 누르고 화면에 숫자를 입력하기
숫자 버튼을 눌렀을 때, 계산기의 화면에 숫자가 보여야 합니다.
숫자 버튼을 여러 번 눌렀을 때, 계산기 화면에 숫자가 이어붙여져야(concatenation) 합니다.
Step 3 - Enter 버튼을 눌러 계산하고, AC 버튼으로 초기화 시키기
연산자 버튼을 눌렀을 때, 계산기 화면에 보이는 숫자를 따로 저장하고 계산할 준비해야 합니다.
Enter 버튼을 눌렀을 때, 이전에 저장한 숫자와 계산기 화면에 보이는 숫자를 계산한 결과를 화면에 보여줘야 합니다.
두 정수의 사칙연산을 수행하는 calculate 함수를 작성합니다.
AC 버튼을 누르면 초기 상태로 돌아갈 수 있어야 합니다.
미리 작성된 SpecRunner.html 파일을 열고, Requirements을 전부 구현했는지 테스트를 돌려서 확인 합니다.
Step 4 - Github 홈페이지에 파일을 업로드 하여 과제 제출하기
Advanced Challenges가 완료 되었다면, 이전 챕터와 같은 방식으로 제출해주세요.
Nightmare
아래 과제는 필수가 아닙니다. 현재 배운 내용으로는 쉽게 구현할 수 없는 추가 과제입니다. 지금 구현하기는 너무 복잡한 알고리즘이거나, 아직 배우지 않은 내용들로 구성되어 있습니다. Advanced Challenges까지 모두 구현하셨다면, 아래 과제 중 일부를 골라서 진행해주세요. 다 구현 하셨더라도, 배웠던 개념과 현재 스프린트가 잘 이해가 되지 않는 부분이 있다면 Nightmare 를 도전하지 마세요. 기초를 복습하는 일이 훨씬 도움이 됩니다. 멀리 바라보고 준비해주세요. 😉
Nightmare 는 별도의 강의 자료가 없습니다. 그러나 작성하신 코드가 잘 작동하는지 확인해볼 수 있습니다. 준비된 테스트를 통해 잘 작성했는 지 확인하세요.
calculate 함수 개선
parseInt와 parseFloat의 차이에 대해서 찾아보고, 실수 계산도 할 수 있도록 calculate 함수를 수정하세요.
Edge Case 대비 기능 개선
macOS, 아이폰의 계산기와 유사하게 작동할 수 있도록 만드세요. 맥북이나 아이폰을 소지하고 있다면, 계산기를 실행해 테스트해보세요. 큰 도움이 됩니다. 혹시 다른 OS를 사용하고 있다면 react-calculator에서 경험해보세요.
. 버튼을 활용하여, 소수를 입력받으세요.
. 버튼을 연속적으로 눌러도 .은 처음 단 한 번만 입력되어야 합니다.
정수부분없이 . 버튼과 숫자를 눌러서 작동시키는 경우 소수가 나타나야 합니다. (.5 === 0.5 )
Enter 버튼을 여러 번 클릭했을 때, 변수 previousNum 를 활용하여 이전 숫자를 계속 더할 수 있어야 합니다.
연산자 버튼을 누르기 전 숫자 버튼을 누른 후에, 실수로 Enter를 여러 번 눌러도 정상 작동해야 합니다.
연산자 버튼을 연속적으로 눌러도 계산 값에 영향이 없어야 합니다.
숫자, 연산자, Enter의 순서로 눌렀을 때에도 작동해야 합니다.
CSS
CSS flexbox를 활용하여, 버튼의 불완전한 정렬을 바르게 고치세요.
자바스크립트를 활용하여, HTML Element에 class를 추가하는 법을 학습합니다.
연산자 버튼을 눌렀을 때, script.js의 내용을 수정하여 isPressed 클레스를 추가하여 연산자 버튼의 색을 변경합니다.
CSS pseudo-class를 활용하여, interactive한 버튼을 만들 수 있습니다.
이 링크를 참고하여 숫자 버튼에 마우스가 올라갔을 때(:hover, :focus), 버튼이 눌렸을 때(:active)에 모든 숫자 버튼이 작동하도록 style.css 파일을 수정하세요. Advanced Challange를 하고 있다면, 한 번 도전해보세요! :)
Mark as Completed
