이번에는 배열과 반복문을 통해 JS 내에서 리스트 아이템을 출력하는 미션을 받았다.
menu에 대한 배열(객체) 데이터는 존재했기에 복사하고 그대로 붙여 넣었다.
script 내에서 menuItem을 선언하고 menuList라는 변수를 선언해 html 문서 안에 있는 리스트에 대한 태그의 id를 연결시킨다.
연결시킨 뒤 menuItems에 대한 아이템들마다 내부 코드를 사용하도록 반복문(forEach)을 실행한다.
li 태그를 만들고 그 태그에 대한 변수 연결 시킨 뒤 그 안에 menuItems의 아이템들을 순서대로 넣은 뒤에 ul 태그 안에 li 태그를 집어 넣는다.
중요- 스크립트를 어디에 선언하느냐
Script를 이렇게 짜고 나서 생각하게 된 점은 HTML 문서 내에서 script를 어디서 선언하느냐에 따라 다르다는 점이다.
나는 원래 script를 짠다면 보통 head 태그 내에 작성을 해 왔기 때문에 이 부분에 대해 딱히 큰 생각을 해 온 적이 없었다.
하지만 이번 미션이 스크립트 선언에 대한 나의 생각을 바꾸게 된 계기가 되었다. 코드는 완벽하게 한 것 같은데 왜 출력이 안되는 거지 하면서 해결책을 계속 찾아봤다.
그 결과가 script를 head 태그가 아닌 body 태그에 했어야 한다는 것이다.
HTML 문서 내에서 script를 어디에서 선언하느냐에 따라 다른 것 같다.
JavaScript 코드를 HTML 문서의<head>태그와<body>태그에 넣는 것 간에는 몇 가지 중요한 차이점이 있습니다:
1. 로딩 순서와 타이밍:
<head>태그 안에 JavaScript를 넣으면, HTML 문서가 파싱되는 동안에 스크립트가 실행됩니다. 이는 HTML 요소들이 모두 로드되기 전에 스크립트가 실행될 수 있음을 의미합니다. 때문에, JavaScript 코드가 DOM 요소들에 접근하려고 할 때, DOM 요소들이 아직 생성되지 않아 오류가 발생할 가능성이 있습니다.<body>태그 안에 JavaScript를 넣으면, HTML 문서가 파싱되고<body>요소들이 로드된 후에 스크립트가 실행됩니다. 따라서, DOM 요소들에 접근하는 코드는 일반적으로 정상적으로 작동합니다.
- 사용자 경험 (User Experience):
- 페이지의 초기 로딩 속도에 영향을 미칩니다.
<head>태그에 스크립트를 넣으면 스크립트가 모두 로드될 때까지 사용자는 화면에 아무 것도 표시되지 않을 수 있습니다. 반면<body>태그에 스크립트를 넣으면, 사용자는 페이지의 일부 내용을 볼 수 있으며, 스크립트가 로드되는 동안에도 페이지의 나머지 부분을 볼 수 있습니다.- 스크립트 종속성 관리:
- 페이지에서 사용하는 외부 라이브러리나 자체 개발한 JavaScript 파일들의 종속성을 관리할 때 중요한 요소가 됩니다. 일반적으로 외부 라이브러리는
<head>에, 페이지 동작에 필요한 자체 JavaScript는<body>에 위치시키는 것이 좋습니다. 이는 초기 페이지 로딩 시에 필요한 리소스를 효과적으로 관리할 수 있게 도와줍니다.
따라서, 일반적으로는 페이지의 초기 로딩 속도를 향상시키기 위해 자주 사용하는 스크립트나 라이브러리를<head>에 넣고, 페이지 렌더링에 직접적으로 필요한 스크립트는<body>에 넣는 것이 좋은 관례입니다.
