201212_TIL

🍎 오늘 한 일

---

✔️ 계산기 완성하기 (~Nightmare1)
키보드로 입력받는 기능을 추가해서 계산기를 완성했다!! 마우스로 클릭했을 때와 마찬가지로 addEventListener를 이용했는데, 마우스는 click 이벤트를 이용했지만 이번에는 키보드 입력을 받고 싶어서 keydown 이라는 event를 사용했다. 코드가 점점 길어지고 복잡해지니까 뭐가 뭔지 나중에 까먹을 수도 있을 것 같아서 추가한 기능에 대한 설명도 내일 정리해두려고 한다 🙉 공학용 계산기 만들기는 HTML 파일부터 뜯어 고쳐야 할 것 같아서 일단 지금까지 한 것 복습이랑 정리부터 끝내고 시간이 남는다면 도전해봐야겠다..!

✔️ Flex, classList 개념 정리
CSS에서 레이아웃을 구성할 때 유용하게 사용하는 Flex와, Javascript에서 특정 클래스를 추가 혹은 삭제하고 싶을 때 사용하는 classList 개념에 대해 좀 더 검색해보며 공부하고 정리했다. Flex는 계산기에서 수직, 수평 중앙정렬을 할 때 사용했고, classList는버튼을 마우스로 클릭했을 때 버튼의 텍스트 색상이 바뀌고, 다시 마우스를 떼면 색상이 원래대로 돌아오도록 하는 데 사용했다. (마우스로 클릭했을 땐 isPressed라는 클래스를 추가, 마우스를 때면 isPressed 클래스를 제거하는 식으로 구현 // isPressed클래스는 텍스트 색상이 바뀌도록 CSS 스타일을 적용해둠)

✔️ 실용주의 프로그래머 ~1-2장 읽기
행동에 책임지기, 실수하거나 잘못된 판단을 내렸다면 정직하게 인정하고 다른 방안을 제시하려고 노력하기, 부탁하는 것을 어려워하지 말고 도움이 필요하다는 사실 인정하기, '깨진 유리창 이론'처럼 오류를 발견하면 놔두지 말고 발견하자마자 바로 고치자!

See the Pen Calculator by kIMJUHYE (@JOOOOOHYE) on CodePen.

 

🍎 더 공부할 것

---

✔️ javascript에서 변수, 배열 비교하는 방법 더 찾아보기
키보드 입력을 받을 때 받은 입력값(keyContent)이 +,-,*,/ 중 하나면 opeator로 인식하고 해당 코드를 실행시켜주는 조건문을 사용했는데, if(keyContent==='+' || keyContent==='-' || keyContent==='*' || keyContent==='/') 이런식으로 조건을 작성하는 것 보다는 operatorList = ['+','-','*','/'] 라는 배열을 선언하고, keyContent값이 여기에 포함되는지 여부로 조건을 작성하는 것이 더 보기에도 좋고 효율적(?)일 것 같았다. 그러다보니 변수와 배열을 비교하는 방법에 대해 궁금해졌다.

✔️코드 개선하기
일년 뒤에 다시봐도  알아 볼 수 있도록 좀 더 간결하고 명확하게 코드를 정리해야겠다!

 

 

✏️ 눈 뜨자마자 맥북 수리하러 갔다가(결국 오늘 못고침) 본가도 다녀오고 여기저기 이동했더니 하루의 반이 가버린 날이었다 😵