Written by Nostrss
on February 19, 2022

[JS #8] 계산기 코딩이 가르침을 주는구나..

계산기 프로그램 구현

제로베이스 수업 중 간단한 계산기를 구현하는 과제를 하게 되었다. 처음에는 가볍게 천천히 하면 만들 수 있을 줄 알았는데, 생각보다 어려운 과제였다. 그리고 코딩보다도 그 과정에서 배운 내용들이 있어서 정리를 해봤다.

1. 개발 전에 알고리즘 정리, 설계를 먼저 하자.

이번 과제를 하면서 가장 뼈저리게 느끼게 된 경험 중 하나였다. 기능을 파악 하지 않고 눈에 보이는 것부터 하나씩 그냥 만들기 시작했다.

기능과 문제를 너무 쉽게만 생각하고 접근 한게 문제였는데, 점점 코드가 길어지면서 바로 코드에서 문제점이 들어나기 시작했다.

특히, 과제 전에 계산기 구현에 스택(stack)이라는 자료구조와 이를 활용한 구현 알고리즘을 미리 작성했다면

훨씬 코드를 이쁘게

빠른 시간에

구현하지 않았을까 생각된다. 다음부터는 꼭 기능을 미리 제대로 파악하고 알고리즘이나 설계를 어느정도 한 뒤에 코딩을 시작해야 겠다.

2. 잘 만든 함수 하나가 코드 100줄을 줄인다.

위에서 언급한 스택(stack)을 또 언급할 수 밖에 없는데.

스택의 기능을 함수로 구현해 놓고 보니 이 기능이 계산기 전체 코드에서 여기저기에서 쉽게 사용할 수 있음을 알았다.

함수로 기능을 만들기 전까지는 진행 속도가 더뎠는데, 스택을 함수로 만들고 나니 갑자기 계산기 구현이 수월해 지기 시작했다.

스택 푸시(Push) 함수

function pushStack(stackName, pushItem) {
  stackName.stackArr.push(pushItem);
  stackName.stackPtr++;
}

스택 팝(Pop) 함수

function popStack(popStackName) {
  const popItem = popStackName.stackArr[popStackName.stackPtr];
  popStackName.stackArr.pop();
  popStackName.stackPtr--;
  return popItem;
}

이쁘지는 않지만 위와 같이 함수를 만들어 놓고 나니, 계산기가 갑자기 만들어지기 시작했다.

동일한 기능을 그냥 함수로 불러서 1줄로 쓰기만 하면 되니 너무나 편했다.

내가 만든 함수를 호출해서 재사용 할 떄마다 그 쾌감은 말로 할 수 없었다.

3. Console.log(), 크롬 Breakpoints를 활용하자.

코딩하면서 결과값이 예상과 다른 경우가 자주 있었다. 그때마다 코드만 보면서

어디가 잘못된걸까?

고민을 하면서 시간을 허비 했다. 하지만 코드 중간 중간에

console.log('스택에 정보가 있습니다');
console.log('후위 수식 완료');

이런 식으로 코드를 넣어서 내가 생각한대로 코드가 돌아가는지 확인하기 시작했다.

if분기를 제대로 타고 있는 건가?

for문이 내가 생각한 횟수 만큼 반복 하고 있는 건가?

그러다가 크롬 개발자도구에서 breakpoint를 찍어서 진행 상황을 보는 방법도 알게 되었다.

크롬 개발자도구 > Source > Breakpoints 메뉴

내가 작성한 소스코드에서 제대로 실행이 되고 있는지 궁금한 부분에 부분에 마킹을 해두고, 계산기를 실행해보면 된다.

그러다 마킹한 소스가 실행되는 순간에 실행이 멈추고, 추가로 마킹을 하면서 단계별로 내가 생각한대로 흘러가는지 눈으로 볼 수 있다.

이번 계산기 과제를 하면서 위의 3가지를 가장 많이 배운것 같다.

배열과 메소드, DOM에 접근 하는 방법을 배우는 것도 좋지만 이런 소프트웨어 개발 방법론(?)을 체험해보는 것도 그에 못지 않게 중요한 것 같다.

한번에 오류 없이 코딩 하는 것은 불가능하다.

그러니 사전 설계로 오류를 줄이고 오류의 원인을 빨리 찾아 고치는 능력을 키워야 할 것 같다.

← → Top