코드를 집어 넣었는데, 작동을 안 할 때(페이지 로드 후 코드실행)

C언어와 같이 절차형 코드는 차피 쓱 써 내려가야지만,

자바와 같이 모듈화 된 코드는 작성 해 놨다가,

필요 할 때 마다 다시 가져오면 된다.

HTML에는 자바스크립트라는 프로그래밍이 쓰인다.

젠체하는 녀석들은 HTML이 무슨 프로그래밍이냐 하겠지만,

정보처리기사 1급인 나는 굳이 구분 할 필요가 있는가 싶다.

HTML에서 특히 발생하는 문제가,

이 모듈화 된 코드를 집어 넣는 과정에서 순서가 맞지 않아 코드가 작동이 되지 않는다.

는 것이다.

이는 페이지가 한번 로드 되어, 화면을 보여주는 정적인 특성이 강한 HTML의 특성탓이라.

해결방안은 간단하다.

기능 역할을 하는 자바스크립을 다 위로 올리는 것!

그럼 페이지 로드와 상관 없이 동적인 코드를 구현 가능하다.

근디, 코드가 작동 할지도 안 할지도 모르겠고,

'골격'과 '기능'을 한 곳에 배치하고 싶어요. 라는 사람들이 있다.

아무래도 그래야 유지관리 측면에서도 편하고, 지우거나 잠시 기능을 멈출 때 편함에 그 원인이 있음이라.

그럼 다음 2가지 방안이 더 있다.

DOMContentLoaded 이벤트 사용: HTML 문서의 모든 요소가 로드되고 해석되면 DOMContentLoaded 이벤트가 발생합니다. 이 이벤트가 발생하면 JavaScript 코드를 실행할 수 있습니다.

javascript
document.addEventListener('DOMContentLoaded', function() {
    // 이 곳에 실행할 코드를 넣습니다.
});

javascript
window.addEventListener('load', function() {
    // 이 곳에 실행할 코드를 넣습니다.
});

이벤트 리스너를 추가한 후에는 해당 이벤트가 발생하면 실행할 코드를 넣으면 됩니다. 일반적으로는 첫 번째 방법인 DOMContentLoaded 이벤트를 사용하여 페이지가 로드된 후에 JavaScript 코드를 실행합니다.

두 코드의 장단점과 차이점은,

1. DOMContentLoaded 이벤트:

발생 시점: HTML 문서의 모든 요소가 로드되고 해석된 후에 발생합니다. 이는 외부 리소스(이미지, 스타일시트 등)가 로드되기 전에 발생합니다.
장점:
- DOM 구조가 준비된 후에 실행되므로, DOM 요소에 대한 조작 및 이벤트 처리 등을 시작할 수 있습니다.
- 외부 리소스가 로드되기 전에 실행되기 때문에 페이지 로드 속도가 빠릅니다.
단점:
- 이미지, 스타일시트, 스크립트 등의 외부 리소스가 아직 로드되지 않았으므로, 페이지가 완전히 로드되기 전에 실행됩니다.
- 페이지의 모든 리소스가 로드되지 않았기 때문에, 외부 리소스에 의존하는 작업을 할 때 이벤트 리스너 내에서 추가적인 로직이 필요할 수 있습니다.

2. load 이벤트:

발생 시점: 페이지의 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드된 후에 발생합니다.
장점:
- 페이지의 모든 리소스가 로드된 후에 실행되기 때문에, 외부 리소스에 의존하는 작업을 진행할 때 유용합니다.
- 페이지의 모든 요소가 로드된 후에 실행되기 때문에, 완전히 로드된 페이지의 상태에서 작업을 할 수 있습니다.
단점:
- 모든 리소스가 로드되기까지 시간이 걸리므로, DOMContentLoaded 이벤트보다 늦게 실행됩니다.
- 모든 리소스가 로드된 후에야 실행되기 때문에, 페이지의 로드가 더 오래 걸릴 수 있습니다.

따라서, 페이지의 로드 상태에 따라 실행 시점을 선택하고, 실행해야 할 작업에 맞게 이벤트를 선택하는 것이 중요합니다.

이다.

요즘 개발자들이 똥줄이 탄다.

chatGPT라는 프로그래밍 언어를 배웠다고 하니까,

그게 무슨, 프로그래밍 언어냐고 한다.