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

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

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

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

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

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

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

정보처리기사 취득 후기~와... 아직까지 유망 자격증이야? 왜? (tistory.com)

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

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

는 것이다.

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

html & css & js(Java Script)의 관계 (tistory.com)

해결방안은 간단하다.

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

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

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

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

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

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

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

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

2. load 이벤트 사용: 페이지의 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드된 후에 load 이벤트가 발생합니다.

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

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

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

1. DOMContentLoaded 이벤트:

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

2. load 이벤트:

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

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

이다.

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

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

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

엄밀히 따지면, 프로그래밍 언어가 아닌, 도구임이 맞는데,,,

속까말 왠만한 개발자보다...

아니다.

전문가는 전문가로서 존중 해 주자.

어떤 ai을 쓰느냐에 따라 대답의 '질'이 달라지니, 말이다.

코파일럿은 코를 파나... 쌉소리만 하고,

제미나이는 숨김없이 제대로 된 대답을 한다.

이번에는 '나거한'에 대해 물어볼까?

뇌는 어떻게 자존감을 설계하는가~결국 원인은 생존을 위한 항상성 때문이라고 하는데... (xehostel.blogspot.com)

전체적으로 이 나라는 코드를 다시 짤 필요가 있다.

제대로 로드 되는 것이 하나도 없다.