자바스크립트 파일을 적용하기 위해선,
보통 html파일에 'script' 태그 안에 적용시키고자 하는 js 파일명을 넣어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Camping Owners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
<script src="../SideMenu.js"></script>
<script src="../Login.js"></script>
<script src="../Routing.js"></script>
<script src="../page.js"></script>
</head>
<body>
...
</body>
...이런 형식으로 말이다.
그런데 이렇게 head 내부에 js파일을 넣어주는 경우,
페이지가 로드되기 전에 js파일을 실행하게 되므로,
alert()같은 함수가 js파일 내부에 선언되어 있을 경우에는 페이지가 로드되기 전에 경고창이 뜨게 된다.
만약 브라우저가 스크립트를 실행하기 전에 모든 html코드를 랜더링
하고 싶다면,
js파일이 선언된 script태그를 body의 끝부분에 선언하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Camping Owners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
</head>
<body>
...
<script src="../SideMenu.js"></script>
<script src="../Login.js"></script>
<script src="../Routing.js"></script>
<script src="../page.js"></script>
</body>
...이렇게 말이다.
그리고 자바스크립트는 순서가 중요한 언어이기 때문에,
어떤 하나의 js파일이 다른 js파일에 의존하는(그 파일에서 사용하는 값을 쓴다던지)
경우에는, 사용하기 전에 선언해줘야 한다.
위 코드 같은 경우에는,
SideMenu.js는 다른 js파일에 의존하지 않는 경우겠다.
page.js는 이전에 선언된 3개의 js파일에 의존할 수 있다.
만약에 SideMenu.js가 page.js에 의존적이라면,
의도한대로 랜더링이 안될 수도 있다.
끄적끄적....