[2023.02.23]-웹에서 작동하는 계산기 기능 일부 구현하기

구현을 위한 계산기 양식

지난번에 HTML과 CSS를 활용해 계산기의 겉모습을 만들어 봤었는데, 오늘은 형태를 갖춘 계산기가 웹에서 작동할 수 있게 구현해보는 것이 과제로 나왔다. 물론 실제 계산기의 기능을 모두 구현하는 것은 아니었지만 간단한 기능을 구현해보는 것도 결코 쉽지 않았다.

계산기 기능 구현을 위한 자바스크립트 파일 코드

기초적인 자바스크립트 문법과 표현식 등을 막 배운 상태인 나는 위 코드의 첫 부분부터 이해가 잘 가지 않았다. 물론 코드 옆에 주석으로 설명이 되어 있고 코드스테이츠 강의 페이지 내에도 간단한 설명과 힌트 등이 쓰여있었지만, querySelector를 아직 배운 적이 없고 HTML과 자바스크립트를 연결하는 방법 및 원리 등도 당연히 전혀 모르는 상태이기 때문에 문제를 이해하는 것 부터 상당한 노력이 필요했다.

textContent가 이번 과제를 해결하는 과정 중 핵심이 되는 코드였지만 처음에는 이것을 활용해야 한다는 사실조차 알지 못 했다.

페어 분이 textContent나 innerText 같은 것을 사용해야 한다고 직접적으로 언질을 주시기 전까지는 발만 동동 구르고 있었다.

그 때까지는 머릿속에서 정리해 본 의사코드를 떠올리며 구글에 열심히 검색을 해 여러 가지 속성이나 태그들을 찾을 수 있었지만, 그 중 어떤 것을 어떻게 써야 할지 도저히 갈피가 잡히지 않았다.

감사하게도 페어 분의 도움을 받아 계산기의 첫 번째 칸에 숫자를 출력할 수 있었고, 이어지는 사칙연산 버튼의 출력 및 두 번째 칸의 숫자 출력, 함수 호출은 열심히 고민하며 자력으로 코드를 써내려 갈 수 있었다. 그렇게 어떻게든 과제의 최소 요구사항은 만족시킬 수 있었다. 

그렇지만 최소 요구사항은 당연히 '학습내용을 충분히 활용한 수준'은 아니다. Bare minimum requirements 다음에는 조금 더 심화된 내용인 Advanced 난이도에 해당하는 과제들이 있었고, 복잡한 수준의 기능까지 구현해야 하는 Nightmare 난이도의 과제도 있었다.

개인적인 욕심으로는 Advanced 과제의 일부분만이라도 해결하고 싶었지만, 현재 나의 코드를 활용하는 능력이나 구현해야 할 기능에 필요한 코드 알고리즘 작성 능력으로는 주어진 시간 안에 돌파구를 찾기 어려웠고 오늘도 역시 겨우겨우 코스를 따라가고 있다.

 

단 하루만에도 새롭게 배우는 내용이나 익혀야 할 스킬들이 쏟아진다. 마치 촘촘하지 않은 그물로 쏟아지는 물고기를 잡는 것마냥 줄줄 새는 것들을 주워담기 급급한 모양새다. 하지만 반대로 생각해보면 그만큼 성장할 수 있는 기회로 꽉 찬 하루를 치열하게 보내고 있다는 뜻이다.

당장 내 주변에만 해도 너무나 따라잡기 힘들 것 같은 실력의 소유자들이 많지만, 토끼를 좆는 거북이의 마음가짐으로 하루하루 작지만 확실하게 엉금엉금 발을 내딛어야 한다.