자바스크립트 참조 에러 Uncaught ReferenceError: Cannot access before initialization at

에러 해결 내용은 간단히 쓰겠다 실시간으로 써야해서

javascript 함수로 버튼 이벤트와 로그인 구현 등을 하던 중에 에러가 발생했다
원래는 잘 동작하다가 전통 함수로 선언해 줬던 함수를 간단한 화살표 함수에 익숙해 지고 싶어서 전부 바꿔봤더니..
이 에러가 나온 것이다!

해결 법은 간단했다 코드를 보겠다

      <script>
        const listGr = document.querySelector('.list-group');
        const navBtn = document.querySelector('.nav-btn');
        const modalBg = document.querySelector('.black-bg');
        const modalOpen = document.querySelector('.login-open');
        const modalClose = document.querySelector('.login-close');
        const loginSubmitBtn = document.querySelector('.login-btn');
        const idInput = document.querySelector('.id-input');
        const pwInput = document.querySelector('.pw-input');

        modalOpen.addEventListener('click',function(){show(modalBg)});
        modalClose.addEventListener('click',close);
        navBtn.addEventListener('click',function(){show(listGr)});
        loginSubmitBtn.addEventListener('click', function(){inputCheck(idInput, pwInput)});

        const show = (box) => { box.classList.toggle('show'); 
            box.classList.toggle('login-ani');}
        const close = () => { modalBg.classList.remove('show'); 
            modalBg.classList.remove('login-ani');}
        const inputCheck = (checkBox, checkBox2) => {
            if(checkBox.value == ""||checkBox2.value == ""){
                event.preventDefault();
                alert('다시');
            }else if(checkBox2.value.length < 8){
                event.preventDefault();
                alert('비밀번호를 8자리 이상 입력하시오');
            }else{
                alert('good');
            }
        }
      </script>

무언가 이상하지 않은가?
바로 봤다면 당신은 이런 에러를 낼 만한 사람이 아닌 듯 하다
기존에 함수 실행을 위에 두고 함수 선언을 아래에 해뒀는데
const로 화살표 함수 선언을 하는 방식으로 바꾸었더니 바로 에러가 떴다
const, let 으로 변수를 선언 할 경우 호이스팅이 되지 않는다
그래서 기존에 밑에 선언해 뒀던 함수를 위로 가져오니 해결이 됐다

      <script>
        const listGr = document.querySelector('.list-group');
        const navBtn = document.querySelector('.nav-btn');
        const modalBg = document.querySelector('.black-bg');
        const modalOpen = document.querySelector('.login-open');
        const modalClose = document.querySelector('.login-close');
        const loginSubmitBtn = document.querySelector('.login-btn');
        const idInput = document.querySelector('.id-input');
        const pwInput = document.querySelector('.pw-input');

        const show = (box) => { box.classList.toggle('show'); 
            box.classList.toggle('login-ani');}
        const close = () => { modalBg.classList.remove('show'); 
            modalBg.classList.remove('login-ani');}
        const inputCheck = (checkBox, checkBox2) => {
            if(checkBox.value == ""||checkBox2.value == ""){
                event.preventDefault();
                alert('다시');
            }else if(checkBox2.value.length < 8){
                event.preventDefault();
                alert('비밀번호를 8자리 이상 입력하시오');
            }else{
                alert('good');
            }
        }

        modalOpen.addEventListener('click',function(){show(modalBg)});
        modalClose.addEventListener('click',close);
        navBtn.addEventListener('click',function(){show(listGr)});
        loginSubmitBtn.addEventListener('click', function(){inputCheck(idInput, pwInput)});

      </script>

이르케 !
변수로 배웠던 참조 위치의 중요성이 const로 함수를 실행할 경우 마찬가지로 적용 된다는 것을 배웠다
https://codingbeautydev.com/blog/javascript-cannot-access-before-initialization/
참고 한 링크 남기고 나는 간다 뿅