2022년 11월 04일

📚 오늘 도전하고, 배운 것

• 토이 프로젝트 작업
• 코딩 테스트 문제 풀기 (4문제)
• JavaScript querySelector 사용하기
• CSS focus 요소 다루기

🤔 학습하면서 궁금하거나 어려웠던 점

정확하게 기억은 안나지만 체크박스가 모두 체크되었는지 유효성체크를 하는 코드를 작성하고 있었다.
필수로 체크해야하는 항목이 모두 체크가되었는지 확인하기 위해 대충 다음과 같이 코드를 짰다.

const required = document.querySelectorAll('[required]')
const checked = document.querySelectorAll('[required]:checked')

// 둘 비교하기
if (required.length === checked.length) {
  // 유효함!
}

다른 로직이 섞여서 이 코드보다 더 악취가 났기에 어떻게 고칠 수 없을까 고민을 했다. 다른 사람들의 코드를 많이 찾아봤다.
every 메서드를 사용하는 방법이 있었다! 분명 배웠는데 많이 써본 적이 없어 전혀 떠오르지 않았다.. 메서드를 사용하니, 쓸데 없이 두 번 요소들을 불러올 필요가 없고 이해하기에도 훨씬 간단했다.

const required = [...document.querySelectorAll('[required]')]

const valid = required.every((check) => check.checked)

🌅 내일은 무엇을?

• 토이 프로젝트 작업
• 코딩 테스트 문제 풀기 (4문제)

✒️ log

• 실수로 또 과식을 해버렸다.. 어쩜 좋을까 아프고 나서야 후회된다. 다시 다짐했다.. 이번엔 지키겠다.
• 다른 사람 코드를 구경하는데 상당히 재밌었다. 진즉에 할걸 그랬다.