Vanilla JavaScript 코드에서 유효성 검사와 구조 분해 할당 문법이 옳게 사용되었는지에 대해

Question

프론트엔드를 1.5개월 간 공부한 주니어 개발자 지망생입니다.개인 포트폴리오 웹사이트를 만들었는데,특정 JavaScript 문법에 대한 피드백을 받고 싶어 질문드립니다.제가 만든 내비게이션 메뉴의 동적인 기능을 담당하는 script.js 파일에서특히 두 가지 부분에 대해 조언을 구하고 싶은데그 내용은 다음과 같습니다.1. 요소 유효성 검사 (validateElement 함수)DOM 요소가 존재하고 문서 본문에 포함되어 있는지 확인하는 validateElement 함수를 선언하였습니다.const validateElement = (element) => { if (!element) return false; if (!document.body.contains(element)) return false; return true;};-- 이 유효성 검사 패턴은 Vanilla Javascript 에서 일반적으로 권장되는 방식인가요? --2. 구조 분해 할당 (bindMenuEvents 함수 인자)함수 호출 시 인자 목록이 길어지는 것을 피하고 가독성을 높이기 위한 목적으로 사용하였습니다.const bindMenuEvents = ({ mainMenuItem, mainMenuLink, subMenuList, clearSubMenuCloseTimer, closeSubmenuWithDelay, isPointerInsideState,}) => { mainMenuItem.addEventListener("mouseenter", () => { clearSubMenuCloseTimer(); // ... }); // ... (다른 이벤트 리스너 목록 생략) ...};const initMenuItem = (mainMenuItem) => { // bindMenuEvents로 전달되는 변수 const mainMenuLink = mainMenuItem.querySelector("[data-main-link]"); const subMenuList = mainMenuItem.querySelector("[data-sub-list]"); const clearSubMenuCloseTimer = () => {}; / ... / const closeSubmenuWithDelay = () => {}; / ... / const isPointerInsideState = { value: false }; // bindMenuEvents 호출 bindMenuEvents({ mainMenuItem, mainMenuLink, subMenuList, clearSubMenuCloseTimer, closeSubmenuWithDelay, isPointerInsideState, });};-- 구조 분해 할당 방식을 올바르게 사용한 게 맞을까요? --Github URL: https://github.com/KyusunPark/my-portfolio

킁킁탐정 · Answer

특정 언어에 국한되지 않고 validate로 시작하는 이름 규칙 자체가 유효성을 검사하는 경우 거의 항상 사용됩니다.validateElement는 너무 광범위하고 추상적인 이름이기 때문에 validateElementExistence나 validateElementPresence등 좀 구체적으로 이름을 짓는게 좋아 보입니다. 하지만 코드 내용만으로 보면 isElementInBody 같은 이름이 더 괜찮아 보입니다.이벤트를 함수로 빼는건 좋지만 뭉텅이 코드를 모두 하나의 함수에서 처리하는것도 좋지 않습니다. 가능하면 class나 module를 사용해서 const가 아닌 일반 함수로 정의하고 각각의 이벤트에 해당하는 함수를 만드는게 더 좋아보입니다.대략적으로 예를 들면 다음과 같습니다.참고로 작성했기 때문에 오류가 있을 수 있습니다.아래 코드가 정답은 아닙니다. 여러 관례일수도 작성분이 만든 코드일수도 남이 만든 코드일수도 있습니다.class Something { mainMenuItem = null; mainMenuLink = null; subMenuList = null; timeoutId = null; constructor() { this.mainMenuItem = document.querySelector('...') this.mainMenuLink = this.mainMenuItem.querySelector("[data-main-link]"); this.mainMenuLink.addEventListener("click", this.handleMainMenuLinkClick) this.subMenuList = this.mainMenuItem.querySelector("[data-sub-list]"); this.subMenuLink.addEventListener("mouseleave", this.handleSubMenuLinkMouseLeave) } handleMainMenuLinkClick = () => { console.log('mainMenuLink clicked!') } handleSubMenuLinkMouseLeave = () => { this.closeSubMenuAfterSecond() } closeSubMenuAfterSecond = () => { clearTimeout(this.timeoutId) this.timeoutId = setTimeout(this.closeSubMenu, 1000) } closeSubMenu = () => { this.subMenuLink.style.display = 'none' } }

고수가될거야 · Answer

선택자로 조회한 값이 존재하지 않으면 null이 반환되는데 왜 body에서 한번 더 찾는지 이해가 안되네요. 일반적인 패턴은 아닙니다RORO 원칙을 잘 지켰습니다. 좋은 패턴입니다깃허브 링크 들어가보니 영어로 주석이 작성되어있던데 본인이 코딩한 것이 맞나요?

Vanilla JavaScript 코드에서 유효성 검사와 구조 분해 할당 문법이 옳게 사용되었는지에 대해

2개의 답변

Q&A 목록