02.14 TIL 리눅스 명령어와 계산기 만들기

오늘 목표는 Section1 내용들 중 내가 잘 모르는 내용들을 흝어보는 것이었습니다.

리눅스 부분이랑 개념은 이해하지만 사용하는데에는 아직 익숙치 않았던

DOM 을 조작하는 메서드들에 익숙해져봐야겠다는 것이 목표

😎 리눅스.. 어케하는건데

CLI 환경에서는 마우스 대신 키보드로 모든 작업을 해결합니다.
그렇기 때문에 마우스로 해결해오던 작업을 키보드로 할 줄 알아야해요
익숙해진 명령어는 괜찮은데 역시.. 잘 모르겠네요

---

😎 CLI 환경의 기본적인 명령어들

pwd (print working directory)	현재위치를 확인 할 수 있는 명령어입니다. 현재 위치가 헷갈릴 때 사용하면 좋겠네용
mkdir (make directories)	폴더를 생성하는 명령어입니다. mkdir은 생성할 폴더의 이름을 함께 입력해야해요 mkdir umjunsick << 이런식으로요!
ls (list)	ls는 특정 폴더에 포함된 파일, 하위 폴더의 리스트를 출력합니다. 옵션으로 l, a , la, al 등을 뒤에 더 넣어줄 수 있습니다 ls -l , ls -a , ls -al 과 같은 형식으로 사용합니다. 대쉬 뒤에 오는 옵션의 순서는 기능에 영향을 미치지 않아요! a는 All을 뜻하며 숨겨진 파일,폴더를 포함해 모든 항목을 출력해줍니다. l은 폴더나 파일의 포맷을 전부 표현하는 옵션입니다
nautilus	노틸러스..? 엄... 롤챔피언이 생각나네요 이 명령어는 우분투에서 현재 위치를 GUI로 실행하는 명령어입니다.
cd	폴더에 진입하는 명령어입니다. 제가 가장 먼저.. 그리고 가장 많이 사용하는 명령어 중 하나네요 cd 뒤에 이동할 폴더의 이름을 넣어주면 그 폴더로 이동합니다. 이 cd는 편리한 옵션들이 여럿 있는데 cd .. 을 하면 이전 경로로 뒤로가기 됩니다. cd / 을 하면 루트 디렉토리로 cd ~을 하면 홈 디렉토리로  이동해요!
cat	파일의 내용을 터미널에 출력해주는 명령어입니다. 당연히 어떤 파일의 내용을 읽을지에 대한 부분을 넣어줘야겠죠?
rm	rm 명령어는 폴더나 파일을 삭제할 때 사용합니다. 물론 어떤 폴더나 파일을 삭제할지에 대한 내용을 넣어줘야하겠네요 rm 삭제할파일 이름
touch	0바이트의 파일을 생성하는 명령어입니다. mkdir로 폴더를 만든다면 이 명령어는 파일을 생성하는 명령어에요
mv	폴더나 파일의 이름을 변경하거나 위치를 옮길 때 사용합니다. mv 명령어 뒤에는 순서대로 "폴더 파일의 이름" "도착 폴더의 이름"을 넣어줍니다. mv bye.txt bye/ 이런식으로요! 이름을 변경하고 싶다면 mv bye.txt hello.txt 이런식으로 작성하면 되네요

사실 백번 보는거보다 그냥 실제로 CLI를 써보면서 익숙해지는게 더 좋은 것 같아요
하지만 이런 기능이 있는걸 알고 해보는 것과 모르고 해보는 건 완전히 다르니까

---

😎 계산기를 만들어보자

코드스테이츠에 풀린 강의들을 보니 과제로 계산기를 만드는 것이 있었습니다.
투두리스트처럼 아주 기본적인 과제인 듯 했는데 문득 생각난 것
정작 난 공부하면서 계산기를 한번도 만들어 본적이 없다는 것이다.!

딥다이브를 열심히 읽으면서 이론적으로는 꽤 익숙해졌다고 생각했지만
DOM을 다루는 것은 아직 미숙해서 구현에 힘이 들고 있던 터라
지금 나에게 좋은 과제라는 생각이 들어서 구현을 시작해봤다.

역시.. 머리로는 어떻게 할지 대충 그려지는데 바로바로 코드가 나오진 않았다.
구글링도 해보고 챗지피티한테도 물어보면서 구조를 떠올려봤다.

---

😎 우선 해야할 게 뭘까?

일단 숫자를 입력 받는 것부터 시작을 해봐야겠다
그런데 0부터 9까지의 숫자들에 하나하나 쿼리셀렉터를 할당해주고
이벤트리스너를 붙여주는 건 너무 비효율적일 것 같았다.

const one = document.querySelector("#one")
const two = document.querySelector("#two")
const three = document.querySelector("#three")
const four = document.querySelector("#four")
const five = document.querySelector("#five")​

 

난 이런 힘든 짓을 하고싶지 않다는 것이다.

내가 원하는 것은 같은 클래스명을 공유하는 요소들 중 이벤트가 발생한 요소에만
이벤트 핸들링을 하는 것이다.

그렇다면 어떻게 해야할까?

querySelectorAll은 꽤 좋은 대안 같았다. 하지만 querySelectorAll은
조건에 해당하는 모든 클래스를 node list 형태로 넘겨준다. 

const numlist = document.querySelectorAll(".num");​

numlist.addeventlistener()

즉 이렇게 바로 이벤트리스너를 사용해줄 수는 없다.
저 코드에서 numlist는 객체다.

---

😎querySelectorAll이 반환하는 NodeList

console.log()메서드를 이용해 querySelectorAll이 반환한 .num에 대한 결과는 다음과 같다.

해당하는 모든 요소들이 인덱스를 키값으로 하는 객체형태로 담겨있는 모습이다.
유사배열 객체이기 때문에 순회가 가능하고 그에 따라 forEach()문을 사용하는 것 또한 가능하다.
그렇다면 forEach()를 통해 순회하면서 event가 발생한 노드만 가져와서 이벤트리스닝을 하면어떨까?

---

😎 BINGO

const numlist = document.querySelectorAll(".num");

console.log(numlist);

numlist.forEach((num) => {
    num.addEventListener("click", onClick);
});

function onClick(event) {
    console.log(event);
    const num = event.target.value;
    alert(num);
}

numlist를 forEach를 통해 순회해주면서 각 요소마다 이벤트리스너를 실행시켜줬다.
성능적으로 생각하면 .num을 클래스로 가지는 노드가 많아질수록 성능이 안좋아지겠지만
고작해야 열개의 버튼을 사용하는 것이니 일일히 순회해줘도 무방할 듯 하다.

만약 이 코드를 처음 발상대로 하나하나 쿼리셀렉터를 통해 할당해줬다면
선언문과 이벤트리스너만으로 20줄을 사용해야할것이다.

---

😎근데 이벤트 버블링하면 되잖아요

좀 더 생각 해보니까 위의 forEach를 쓰는 방법도 좀 아닌 것 같다.
모든 자식 요소를 아울러 가지고 있는 하나의 요소가 있으면 상관없지 않나?

이벤트는 아래에서 위로 위에서 아래로 전파되며 그것을 이벤트 버블링,캡처링이라고 한다.
이 이벤트 버블링 현상을 이용하면 어떨까?

        <div class="calculator">
            <button class="num" value="8">8</button>
            <button class="num" value="9">9</button>
            <button class="num" value="4">4</button>
            <button class="num" value="5">5</button>
            <button class="num" value="6">6</button>
            <button class="num" value="1">1</button>
            <button class="num" value="2">2</button>
            <button class="num" value="3">3</button>
            <button class="num" value="0">0</button>
        </div>

우선 HTML 코드의 구성은 다음과 같다. calculator 안에 숫자버튼들이 있는 상황이다.

const cal = document.querySelector(".calculator");
cal.addEventListener("click", onClick);

function onClick(event) {
    console.log(event);
    const num = event.target.value;
    alert(num);
}

이렇게 caculator를 선택하고 cal에 이벤트리스너를 붙여주니

대체로 제대로 동작하지만

버튼이 아닌 다른 영역을 클릭하면 event.target.value가 undefined인 케이스가 생긴다.

버튼사이의 공백을 아예 없게 만들어서 해결할 수도 있겠지만

event.target.value가 undefined인 경우를 체크해 그 경우 early return을 해주는 것도 좋을 것 같다.

---

😎이제 큰 틀을 짜봐야겠지?

이벤트 버블링을 통해서 어떻게 value를 받아올지에 대한 문제는 해결되었다.
이제 계산기를 만들기 위한 핵심적인 로직을 생각해보고
그걸 구현만 하면 될 것 같은데...?

계산기의 핵심적인 기능을 구현하기 위해 어떤 과정이 필요할까?

1. 두자릿수,세자릿수 버튼을 다 구현하는건 비효율적이다. 숫자는 연산자를 만나기전까지 이어져야한다.
2. +,-,/,* 과 같은 연산자를 기준으로 숫자를 잘라줘야 한다.
2. =을 만나면 연산의 결과를 반환해야한다.
4. 잘못 작성했을 때를 대비한 backspace 기능이 필요하다.
5. 연산을 초기화해줄 All Clear 버튼도 있으면 편할것이다.
6. 소수점 계산을 위한 .버튼도 구현하면 좋을 것이다.

물론 실제 계산기는 더 많은 기능을 담고 있지만
간단한 사칙연산과 소수점계산만 지원하는 계산기를 작성해보면 될 것 같다.

eval() 함수를 이용해 계산기를 작성하면 아주 쉽게 작성이 가능하지만.
eval()은 사용하지 않고 작성하는 편이 좋을 것 같다.

프로그래머스 문제 중에 계산기 로직과 비슷한 문제가 있었는데
예전의 나를 참고해서 짜면 될 것 같다.

---

😎근데 하다보니까

그냥 이벤트에 관한 속성들을 더 깊이 알아보고 싶어졌고
이벤트를 어떻게 처리할지에 대해 더 공부했습니다.

https://xionwcfm.tistory.com/175

DOM을 다루는 실전적인 방법

자세한 자료는 아래를 참고해주세요

제게는 아주 유용했던 내용들로 구성되어있습니다.

---

😎HTML 목업 짜보기

기본으로 제공되는 계산기는 한자릿수 계산만 되는 계산기인걸 보고
여러자릿수를 계산할 수 있는 계산기를 만들어보고 싶단 생각이 들었습니다.

일단 HTML 부터 짜야할텐데 전 이렇게 구성해봤습니다.

아무런 CSS도 씌우지 않은 상태

못생기긴했지만 얼추 그럴듯해보이긴 합니다.

근데 뭔가 부족한것같더라니 AC버튼과 지우기 버튼이 없네요

올클리어 버튼과 지우기를 만들어줬습니다.

        <div class="calculator">
            <form action="" method="post" name="cal">
                <input type="text" name="result" placeholder="0" readonly />
                <div class="row">
                    <button class="clear">AC</button>
                    <button class="back">←</button>
                </div>
                <div class="row">
                    <button class="num">7</button>
                    <button class="num">8</button>
                    <button class="num">9</button>
                    <button class="operator">+</button>
                </div>
                <div class="row">
                    <button class="num">4</button>
                    <button class="num">5</button>
                    <button class="num">6</button>
                    <button class="operator">-</button>
                </div>
                <div class="row">
                    <button class="num">1</button>
                    <button class="num">2</button>
                    <button class="num">3</button>
                    <button class="operator">*</button>
                </div>
                <div class="row">
                    <button class="num">0</button>
                    <button class="comma">.</button>
                    <button type="submit" class="equal">=</button>
                    <button class="operator">/</button>
                </div>
            </form>
        </div>

코드는 다음과 같아요

버튼의 클래스는 크게 num , operator, equal, back, clear로 구성해줬습니다.

이제 자바스크립트 영역만 작성해주면 되겠네요!

---

근데 챌린지는 해야하니까 자바스크립트 파트에 대한 포스팅은

내일 분량으로 이어가겠습니다.