계산기 프로젝트: 더 쉬웠지만 장애물이 가득한 이유

안녕하세요 블레이즈입니다.

계산기 프로젝트 작업은 꽤 재미있었고, 색다른 경험이었습니다. 더 어려워 보였던 Etch-a-Sketch와는 다릅니다. 그렇다면 어떻게 가능합니까?

그 대답은 운동의 난이도가 아니라 다른 것에 있는 것 같아요. 처음부터 시작해보자.

계산기 프로젝트 시작하기

저는 2024년 5월 2일에 계산기 작업을 시작했습니다. 첫 번째 세션에는 3시간이 걸렸고, 그 동안 계산기를 설정하고 실행하는 데 성공했습니다. 정오쯤이었기 때문에 최종 커밋을 하고 저녁을 먹고 운동을 하기로 했습니다.

나는 그 친구가 다음 날 방문하여 3박을 묵을 것이라는 것을 알았기 때문에 그날 오후에 좀 더 코딩을 하고 싶었습니다.

다른 헌신적인 Odinists와 마찬가지로 저는 코딩, 특히 Foundations에서 가장 중요한 프로젝트라고 생각하는 계산기에서 휴식을 취하고 싶지 않았습니다.

예상치 못한 영감

ForrestKnight의 YouTube 동영상이 팝업되었을 때 컴퓨터를 끄려고 했습니다. 나는 그가 코딩을 즐긴다는 이야기를 하고 나서 잠시 지켜보다가 잠시 멈췄다.

곰곰히 생각해 본 결과, 이제 막 코딩을 마친 초심자로서 아직도 이 질문을 자주 스스로에게 묻는 제 관점은 이렇습니다.

어린 시절부터 컴퓨터를 사용했고, 많은 게임을 플레이했으며, 사물이 어떻게 작동하는지 기본적으로 이해하고 있는 나 같은 사람에게는 대답이 간단하지 않습니다.

그러나 나는 이전에 코딩을 해본 적이 없습니다!

초기 코딩 경험

그러나 코딩을 많이 하고 그것이 작동하는 것을 볼수록 그 과정이 더 즐겁다는 것을 깨달았습니다. 전반적으로 원활하게 작동하는 계산기의 경우 특히 그렇습니다. 대부분 심각한 문제를 피할 수 있었습니다. 이에 대해서는 나중에 다루겠습니다.

이 프로젝트는 이틀 동안 그래디언트 색상 변경 로직을 구현하는 데 어려움을 겪었던 Etch-a-Sketch 프로젝트보다 훨씬 쉽게 느껴졌습니다. 코딩은 분명 쉽지 않습니다. 하지만 이 프로젝트에서는 4일에 걸쳐 매일 1.5~2시간씩 투자했는데 관리하기 쉽고 보람찬 경험이었습니다.

VSCode를 열 때마다 생산성이 매우 높아져 작업을 빠르게 해결하는 데 도움이 되었습니다. 작업하는 동안 가장 흥미로운 점은 이 문제를 해결할 수 있는 다른 옵션을 상상할 수 있다는 것입니다.

마치 미친 레고 테크닉 자동차를 만들고 어떤 기능을 다시 추가할지 상상하는 어린아이가 된 기분이었습니다. 재미있는 느낌.

그 과정을 즐기세요

그게 정확히 무슨 뜻인가요? 나는 9개의 개별 버튼을 만드는 대신 모든 숫자 버튼에 대한 이벤트가 포함된 하나의 기능을 만들 수 있다는 것을 알았습니다.

그러나 나는 그것을 적절하게 만드는 방법을 잊어버렸고 9개의 다른 것들로 계속 진행하기로 결정했지만 돌아가서 이 문제를 해결하는 방법에 대한 몇 가지 교훈을 제공하는 문서를 읽으겠다고 스스로 약속했습니다. 내가 생각했던대로.

나는 앞으로 5시간 정도 어떤 일에 꼼짝 못하게 될 것으로 예상했지만 실제로는 그런 일이 일어나지 않았습니다. 244줄의 코드로 작업했습니다.

CSS의 과제

이제 CSS를 사용하여 이 프로젝트의 스타일을 약간 조정할 차례입니다. 글쎄, 그때 내가 막혔어요. 자바스크립트를 만드는 것보다 더 어려운 것 같았습니다.

나는 그것을 믿을 수 없었다! 이 프로젝트에 Flexbox를 사용해야 한다는 것을 알고 있었지만 버튼이 이전에 만든 Etch-a-Sketch와 약간 다르게 보였습니다. Etch-a-Sketch에서는 루프를 사용하여 그리드를 만들라는 지시를 받았습니다.

Flexbox에 문제가 생길 때마다 저는 항상 Josh의 블로그 게시물을 참고합니다. IMHO의 작동 방식에 대한 더 나은 설명은 없습니다.

그러나 모든 버튼이 동일한 것은 아니기 때문에 계산기에서도 작동할지는 확신할 수 없었습니다. 예를 들어 나는 0이 더 커지기를 원했습니다.

거기에 CSS Grid가 언급된 것이 생각나서 기사를 아래로 스크롤했습니다. 실제로 여기서 사용해야 한다는 사실이 밝혀졌습니다.

또한, Odin에서 예시로 보여준 계산기도 CSS Grid를 사용하여 디자인되었습니다.

CSS 그리드 발견

이 시점에서 저는 약간 길을 잃었습니다. 제 기억으로는 우리가 그리드를 전혀 건드리지 않았기 때문입니다.

나는 그것을 구글링하기 시작했다. 내가 무엇을 찾았나요? 사용 방법에 대한 고급 설명이 포함된 대규모 기사입니다. 아직은 그럴 때가 아니라고 생각하고 나중에 그리드에 대해 소개하게 될 거라 생각했습니다.

게다가 연습문제에서는 Flexbox만 언급됐네요 ㅋㅋㅋ 네, 그리드도 배워보면 좋겠습니다. 그렇지 않다면 언젠가는 혼자서 다시 돌아올 것입니다.

약간의 업데이트 - 다음 날 Odin Discord에서 다음 게시물을 보았습니다.

최종 조정 및 UI 디자인

나는 두 개의 div를 사용하여 HTML로 버튼을 다시 그룹화하기로 결정했습니다.

또 다른 학습 세션을 마친 후 계산기는 일반 장치와 어느 정도 친숙해 보였습니다.

키보드 지원 추가

저의 마지막 단계는 키보드 지원을 만드는 것이었습니다.

이런 젠장! 그것은 쉬운 일이 아니었고 키보드 키가 어떻게 작동하는지 이해하기 위해 이벤트 강의로 돌아가 문서를 여러 번 읽어야 했습니다.

이벤트 버블링이 나를 혼란스럽게 했기 때문에 꽤 힘들었습니다. 버튼을 클릭하는 함수 1개와 이를 호출하는 2개의 함수를 만드는 것이 적절한 순간이었습니다. 하나는 마우스 '클릭'에 대한 것이고, 두 번째는 키보드 '키다운'에 대한 것입니다.

나는 모든 숫자와 같음 버튼을 정렬할 수 있었지만 연산자 개체로 논리를 변경해야 하므로 연산자를 사용하지 않기로 결정했습니다.

이 설정은 나중에 검토해야 할 경우 이해하기 더 쉬울 것 같습니다.

하지만 제가 틀렸을 수도 있으니 당연하게 여기지 마세요.

완성된 프로젝트는 여기에서 볼 수 있습니다:

계산자

성찰과 교훈

여기서의 교훈은 무엇이었나요? 앱을 만들고 디자인하는 과정이 즐거웠고 이벤트에 대해 많은 것을 배웠습니다. 이 과정을 통해 추가 학점 과정을 진행하는 것이 좋습니다!

이 이야기가 마음에 들었고 팁이 도움이 됐다면 Twitter 에서 저를 팔로우하여 더 많은 업데이트와 코딩 팁을 받아보세요. 아래 댓글을 통해 여러분의 코딩 과제와 성공 사례를 듣고 싶습니다!