Sprint 이란??
개발자로써 새로운 소프트웨어를 제작하는 경우, 그 소프트웨어가 꼭 가져야만 하는 필수적인 기능이 있다. 핵심이 되는 기능은 우선적으로 구현하고 되는지 먼저 확인하는 것이 합당하다. 기술 구현의 타당성은 물론이고 UI/UX와 고객 경험적인 측면도 미리 검증하기 위해 이렇게 먼저 어느정도 작동이 되게 만든 소프트웨어를 프로토타입(prototype)이라고 하고, 이 프로토타입을 계속 만들고 검증하는 과정을 단거리 달리기에 비유하여 스프린트(Sprint)라고 부른다. 최근 성공하는 실리콘벨리 스타트업에서 적용되는 애자일 개발 방법론의 핵심이다.
부트 캠프에서 진행했던, Sprint들을 다시 풀어보며, 이전에는 다 완성하지 못했던 부분과 아예 손대지도 못했던 Advanced Requirements까지 진행해보고자 한다.
Calculator Sprint 소개
Bare Minimum Requirements
Bare Minimum Requirements는 소프트웨어가 그 역할을 하기에 필요한 최소한의 요구사항을 의미합니다. 빠르게 만들어 놓고 한 번 확인함으로써, 기획자와 디자이너가 보다 쉽게 제품을 이해하고 유져 경험을 개선할 수 있으며, 개발자 또한 이 소프트웨어에서 생길 수 있는 오류를 좀 더 쉽게 예측할 수 있습니다. 앞으로 스프린트 과제 제출 시 이 Bare Minimum Requirements까지 잘 되었는지 확인하고 제출해주시면 과제 제출이 완료됩니다.
- 기본적인 계산 기능 구현하기
- 연산 시 script.js의 calculate 함수를 활용할 수 있게 함수 calculate를 작성합니다.
- 처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다.
- 숫자 버튼과 연산자 버튼을 연달아 눌렀을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 보여야 합니다.
- 숫자 버튼, 연산자 버튼, 숫자 버튼을 눌렀을 때, 화면에 숫자, 연산자, 순자의 순서로 보여야 합니다.
- 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 눌렀을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과의 순서로 보여야 합니다.
- clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다.
Bare Minimum 완성 코드
- Sprint 진행시 어려웠던 점
- 소수점 처리가 상당히 까다로웠다.
=> 소수점 같은 경우, 숫자 한 번에 단 하나의 소수점만이 존재할 수 있기 때문에, 이 부분을 어떻게 처리해주는데 애를 먹었다. 신기한 점은 소수점이 여러개가 찍히더라도, 계산을 담당하는 함수가 정답을 도출한다. 물론, 오답이지만... 일단, 계산을 담당하는 함수로 보내기 전에, 찍힌 숫자들은 모두 String이므로, for문을 돌려서 "."이 2개 이상이면, 결과값에 "error"를 띄우는 방식으로 진행해볼까 했다. 물론, 이 방법도 성공했지만, JS method를 사용해보고 싶은 마음에 다른 접근 방식을 사용했다.
if (action === 'calculate') { //
// 여것 작동시, calculate 함수를 발동시킨다.
let searchWord = '.';
let firstTime = firstValue.indexOf(searchWord);
let secondTime = firstValue.indexOf(searchWord, firstTime + 1 );
let firstTime_2 = secondValue.indexOf(searchWord);
let secondTime_2 = secondValue.indexOf(searchWord, firstTime_2 + 1 );
if( secondTime === -1 && secondTime_2 === -1 ) {
console.log('계산 버튼');
let result = calculate(firstValue, op, secondValue);
console.log( "결과값은 ", result );
calculatedResult.textContent = result;
} else{
// 소수점이 2번 이상 들어가면, 에러가 뜨게끔 조치했다.
calculatedResult.textContent = "error";
alert("Please insert a proper number!");
}위와 같이 indexOf()를 사용해서, 맨 처음 '.'을 찾은 순간부터 바로 다음 '.'을 찾기 시작한 다음에, '.'이 나온다면, 해당 인덱스 넘버를 return한다. 만약 -1이 나오면, 소수점이 하나만 존재하거나, 애초에 존재하지 않은 것이기 때문에, 계산을 위한 두 숫자들 모두 -1이 나온다면, 계산을 담당하는 함수로 넣어주고, 그렇지 않으면, 함수로 보내지 않고, "error"가 뜨게끔 만들었다.
Intermediate Requirements
- Step 1 - 숫자 버튼을 누르고 화면에 숫자를 입력하기
- 숫자 버튼을 눌렀을 때, 계산기 화면에 숫자가 보여야 합니다.
- 숫자 버튼을 여러 번 눌렀을 때, 계산기 화면에 숫자가 이어붙여져야(concatenation) 합니다.
- Step 2 - Enter 버튼을 눌러 계산하고, AC 버튼으로 초기화 시키기
- 연산자 버튼을 눌렀을 때, 계산기 화면에 보이는 숫자를 따로 저장하고 계산할 준비해야 합니다.
- Enter 버튼을 눌렀을 때, 계산기 화면에 보이는 숫자와 따로 저장된 숫자를 함께 조합하여 계산한 결과를 화면에 보여줘야 합니다.
- 두 정수의 사칙연산을 수행하는 calculate 함수를 작성합니다.
- AC 버튼을 누르면 초기 상태로 돌아갈 수 있어야 합니다.
=> Intermediate는 Bare Min과 다르게 계산기 출력화면이 하나로 되있다. 그러나, 여전히 두개의 숫자로만 계산이 이뤄진다는 점에서는 같다.
Intermediate 완성 코드
=> Bare Min에서 핵심적인 것들을 다 구성해놨기 때문에, 쿼리셀렉터로 짚어와야 되는 태그값 이외에 큰 변화는 없었다.
=> 다만, 버튼에 hover 효과를 더해준 것과 잘못된 숫자를 타입하고 계산을 시도할 시에 "제대로된 숫자를 넣어주세요" 라는 팻말을 넣어줬다. 또한, red는 경고나 뭔가 잘못된 느낌을 주기 때문에, 에러 메세지 표기 시에는 글자 색을 red로 바꿔줬다.
Sprint를 끝내고 나서...
부트캠프에서 처음 만들었던 코드는 굉장히 엉성하고, 소수점 처리도 전혀 못해줬는데, 이제는 스스로의 힘으로 모든 걸 끝낼 수 있어서 기뻤다.
시간이 더 허락한다면, 다음 번에는 공학 계산기처럼 그래프 기능도 넣고, 여러개의 숫자가 되게끔 업그레이드 해봐야겠다.
