221215 - Node Express - defer와 DOMContentLoaded

 

 

최초에 '127.0.0.1:3000/'로 진입한다. 화면에 회원가입 버튼을 누르면 버튼의 클릭이벤트로 인해 join페이지로 넘어간다.

 

join페이지에 진입하면서 form-input 태그를 이용한 폼이 나온다. 값을 입력하고 전송 버튼을 누르면 Request message를 POST로 요청하고 서버에서는 리다이렉트로 welcome 페이지를 보이게 한다. 리다이렉트를 하면 response message head영역에 location 속성으로 확인이 가능하다.

마지막 welcome 페이지에서 확인 버튼을 누르면 post를 이용하여 최초의 index 화면으로 넘어간다.
express를 연습, 통신방식을 확인하기 위해 요청, 응답 메시지를 이용한 구현을 했다.

 

이벤트 리스너를 이용한 버튼 이벤트랑 server.js에서 render을 이용하여 파일을 보내주는 것의 차이와 뭐가 더 좋은가?

처음에 둘의 방식이 다른 줄 알았다. 화면이 바뀌고 url이 바뀌는 부분은 무조건 서버 측에 요청과 응답을 받는 것이기 때문에
express의 render 이용해서 파일을 연결하는 과정과 버튼 클릭이벤트를 이용하여 location 변경하는 과정은 서로 똑같은 과정이라고 할 수 있다. 

 

실행을 하면서 생긴 오류

서버에 들어가서 확인을 하는데, 버튼을 눌러도 버튼 이벤트가 실행되지 않았다. (자바스크립트 연결 안 됨)
처음엔 검사 창으로 들어가서 Network탭에 들어가서 확인을 했다. 오타로 인해서 연결이 안 된 줄 알았는데.. 문제가 없었다... 오히려 차라리 오타이길 바랬는데... 다음으로 console로 들어가서 확인했다. 다행(?)히 오류정보가 보였다.

'Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')'

 

'Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')'

 이 오류는 'HTML가 다 로드되기 전에 JavaScript 파일이 HTML을 참조'하는 상황에서 선택했던 엘리먼트를 '참조할 수 없었기 때문에 나타나는 현상'이었다.

 

해결할 수 있는 방법 중 핵심은 HTML이 다 로드가 되면 된다. 그래서 총 3가지 방법(방법은 더 있다..)으로 처리할 수 있었다.

 

해결 방법

 

1. Head부분에 적었던 Script 태그를 Body 태그 안에 최하단에 넣는다.

 

 위에서부터 읽어 내려오기 때문에 HTML요소들을 다 읽은 후에 실행되기 때문에 해결할 수 있다.

 

단순히 script 를 바디 최하단에 기입하는 것만으로도 해결 할 수 있다!

 

2.  javascript의 이벤트 중에 'DOMContentLoaded'를 이용한다.

자바스크립트에서 Document에 이벤트를 추가하여 HTML요소를 다 로드한 후에 실행되도록 한다.

이벤트를 이용한 방법

 

function init(){
    //javascript 내용
}
document.addEventListener("DOMContentLoaded", init)

 

3. defer 속성을 이용한다.

Head 부분에 script 태그가 있을 때 속성 defer을 이용한다.

defer

• defer 속성이 있는 스크립트를 '백그라운드’에서 다운로드한다. 그래서 이 스크립트를 다운로드하는 도중에도 HTML 파싱이 멈추지 않는다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연된다.
• defer가 있는 스크립트는 페이지 생성을 막지 않고, 2번에 쓰였던 'DOMContentLoaded'보다 앞에 실행이 된다.
• defer가 있는 여러 개의 스크립트는 병렬적으로 다운로드를 하지만 코드가 작성된 순서대로 실행된다. 그렇기 때문에 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용합니다
• 외부 스크립트에서만 사용이 가능하다.

 

 

사실 이 부분은

처음 Javascript 배울 때 , 언급했고 그 부분에 대해 블로그도 써서 외우곤 있었지만..

자연스럽게 위에 넣고 아무 생각 없이 했던 것 같다.. 그래서 이 이유 때문에 오류가 발생한 것을 확인하고 어이없었지만.. 제대로 인식 못하고 작성한 내 잘못이지...ㅜ 다음번엔 까먹지 말고 주의해서 작성하도록 하자...

 

https://baekspace.tistory.com/55

221109 JavaScript - form을 이용한 이벤트활용

 

---