Javascript - 자바스크립트 작성위치

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

자바스크립트 작성위치

나만의 HTML Snippet 만들기

앞서 작성한 글에서 개발에 유용한 Visual Studio 확장 프로그램을 설치했기 때문에 HTML 코드
작성 시 Snippet이 뜬다.
하지만 각자 선호하는 HTML 코드 구조가 다르기 때문에 나만의 HTML 유저 Snippet을 만드는
방법을 소개하고자 한다.

1. VS code의 상단 메뉴바에서 Code > Preferences > User Snippets를 선택한다.
2. 'Select Snippets File or Create Snippets'라는 검색란이 뜨는데, 해당 검색란에
Html을 검색한 후 선택한다.
3. 선택하면 아래와 같은 코드가 뜬다.
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }
4. 예시코드를 아래와 같이 복사, 붙이기를 한 후에 주석을 해제한다.
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }
   
   
"Print to console": {
	"prefix": "log",
	"body": [
	 "console.log('$1');",
	 "$2"
	],
	 "description": "Log output to console"
	}
5. 그리고 주석이 풀린 예시코드를 다음과 같이 수정한다. (본인이 원하는 HTML 코드 구조를 작성)

<참고>
Print to console : 해당 Snippet의 타이틀을 의미
Prefix : 코드 작성 시 해당 Snippet을 불러올 때의 이름
body : Snippet을 선택한 순간 자동 완성될 코드를 여기에 작성
(단, 새로운 라인이 생기면 에러가 나타나므로 한줄에 코딩 해야함)
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// 	"prefix": "log",
// 	"body": [
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console"
// }

"Generate HTML Basic Structure": {
   "prefix": "html-basic",
   "body": [
   "<!DOCTYPE html>\n<html>\n<head>\n\t<title>Document</title>\n</head>\n<body>\n\t<script></script>\n</body>\n</html>",
	],
   "description": "Generate HTML Basic Structure"
	}
}
6. 나만의 HTML Snippet
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <script></script>
</body>
</html>

Head 태그에 Javascript 코드 작성

Head 태그에 Script 태그를 만들고, 그 안에 Javascript 코드를 작성하면 된다.

<참고>
Head 태그 안에 있기만 하면 된다. (태그 순서 상관 없음)
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script>
        document.write("자바스크립트 head에 위치");
    </script>
</head>
<body>
</body>
</html>

Body 태그에 Javascript 코드 작성

Body 태그에 Script 태그를 만들고, 그 안에 Javascript 코드를 작성하면 된다.

<참고>
Body 태그 안에 있기만 하면 된다. (태그 순서 상관 없음)
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <script>
        document.write("자바스크립트 body에 위치");
    </script>
</body>
</html>

별도의 JS파일에 Javascript 코드를 작성해서 삽입

별도의 JS파일을 만들고 그 안에 Javascript 코드를 작성한 후, Head 태그 혹은 Body 태그에
Script 태그를 만들고 scr 속성을 사용하여 JS파일의 위치를 넣어주면 된다.

<참고>
Head 태그 혹은 Body 태그 안에 있기만 하면 된다. (태그 순서 상관 없음)
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script src="scripts/1-01.자바스크립트작성위치.js"></script>
</head>
<body>
    <script src="scripts/1-01.자바스크립트작성위치.js"></script>
</body>
</html>
<참고 : 별도의 JS파일>
document.write("자바스크립트 js파일에 위치");

추가 설명

참고로 Body태그 안에 Script 태그를 만들어서 Javascript 코드를 작성하는 것이 효율적이다.

브라우저 엔진은 코드를 순서대로 읽기 때문에 만약 Script 태그가 Body태그 보다 위에 작성되어
있다면, 먼저 Script 태그를 해석한 후에 에러가 없으면 Body 태그를 해석하면서 Html 코드를
브라우저 화면에 랜더링하기 때문이다.

만약 Javascript 코드가 상당히 길고 복잡해서 Script 태그를 해석하는데 특정 시간이 소요된다면
브라우저 화면에 Html 코드가 랜더링되는게 느려지고, 그 결과 브라우저 화면이 사용자에게 늦게
열리게 된다.

따라서 Body태그에 Html 코드를 먼저 작성하고 그 이후에 Script 태그를 만들어서 Javascript
코드를 작성하는 것을 추천한다. 물론 Html이 랜더링 되기 전에 반드시 먼저 수행되어야 하는
Javascript코드가 있다면 그런 코드만 Head 태그에 작성하면 된다.

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

Javascript - Number 64비트 부동소수점 (0)	2021.09.17
Javascript - 데이터 타입 (0)	2021.09.16
Javascript - 변수 선언자(var, let, const) (0)	2021.09.16
Javascript - 콘솔(Console), 주석(Comments) 처리 (0)	2021.09.16
Javascript - 개발환경 준비 (0)	2021.09.16