2020. 6. 7. 21:57ㆍJavascript/문법
Hello world를 출력해보자!
이번 포스팅은 두 가지를 목적으로 한다.
-
Console을 이용하여 "Hello world" 문장을 출력해보자.
-
Html에 자바스크립트를 내, 외부적으로 적용해보자
-
내부 스크립트, 외부 스크립트 각각의 특징을 알아보자.
먼저, 콘솔을 이용하여 "Hello world" 문장을 출력해보자.
아무런 에디터를 이용해서 밑의 코드를 입력하도록하자. 나는 Repl.it 라는 사이트를 이용하여 코드를 작성했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Hello world 출력하기!</h1>
<script>
console.log("Hello World!");
</script>
</body>
</html>
작성했으면 저장 후 html파일을 열어서 개발자도구(크롬 기준, F12)를 눌러 콘솔 창을 확인해보자.
그러면 "Hello World!"라는 문자열이 콘솔창에 뜬 것을 확인할 수 있을 것이다.
이것으로 첫 번째 목적을 달성했다. 코드를 다시 한 번 봐보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Hello world 출력하기!</h1>
<script>
console.log("Hello World!");
</script>
</body>
</html>
위의 코드를 보면 <script>라는 html태그를 볼 수 가 있다. 스크립트란 무엇일까? 이전 포스팅 글(자바스크립트란?)에서 스크립트는 자바스크립트로 만든 프로그램이라고 얘기한 적이 있다. 따라서 우리는 <script>태그에서 자바스크립트 코드를 입력할 수 있다. 자바스크립트 코드를 불러오는 방식은 내부에서 불러오는 방식과 외부에서 불러오는 방식이 있다. 위 코드는 내부에서 불러오는 방식을 이용한 것이다.
그렇다면, 어떤 경우에 내부에서 불러오는 방식을 이용하는 걸까? 예상이 가겠지만 정답은 코드가 짧고 간결할 때이다. 만약, 자바스크립트 코드가 1000줄일 때, 내부에서 불러오는 방식을 이용한다면 코드도 매우 길어질 뿐더러 가독성도 엄청나게 떨어질 것이다. 또한, 웹 페이지를 방문할 때 마다 1000줄 이상의 코드를 불러와야하기 때문에 비효율적이다.
이런 단점을 극복하기 위해 우리는 외부에서 불러오는 방식을 이용하면 된다. 외부에서 불러오는 방식은 어렵지 않다.
먼저, index.js라는 파일을 만든다.
index.js 파일 안에 밑의 코드를 입력 한다.
console.log("Hello World!");
마지막으로, <script> 태그 내용을 다음과 같이 수정해주자.
<script src="index.js"></script>
그리고 다시 html 파일을 열면, 내부적으로 스크립트를 적용했을 때와 같은 결과를 얻을 수 있을 것이다.
이 방식이 외부적으로 스크립트를 적용하는 방식이다. 스크립트 태그안에 있는 속성 src에 경로가 입력된 것을 볼 수 있는데, 위 예제와 같은 경로를 절대경로라고 한다. 경로입력방식에는 절대경로와 상대경로가 있다. 상대 경로는 우리가 알고 있는 url같은 것이다.
밑의 스크립트 태그는 제이쿼리라는 프레임워크를 쓰기 위해 적용하는 태그인데, 상대경로를 썼다.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
다시 외부적으로 스크립트를 적용하는 방식으로 돌아오자. 그렇다면 언제 이 방식을 쓰는 것이 좋을까? 당연히 코드가 매우 복잡하고 많을 때이다. 왜냐하면 스크립트를 별도 파일에 작성할 경우, 브라우저가 캐시에 저장하기 때문에 성능 상의 이점이 있기 때문이다.
여기서 캐시란 html, css, js와 같은 정적파일을 저장하는 메모리를 말한다. 그렇다면 왜 캐시가 성능상의 이점을 제공해 줄까?
예를 들어, 여러 개의 웹 페이지가 똑같은 js파일을 외부적으로 적용한다고 생각해보자. 만약 캐시가 없다면, 각각의 페이지가 index라는 스크립트 파일을 일일히 다운받아야 한다. 10 개의 웹 페이지의 경우 다운로드가 10번 발생한다.
하지만, 캐시가 있을 경우, 웹 페이지를 열면 브라우저는 캐시를 확인해서 index.js라는 파일을 찾는다. 그리고 파일을 따로 다운로드 하지 않고 캐시로부터 파일을 가져와서 사용한다. 따라서 스크립트 파일을 한 번만 다운로드하면 되기 때문에 트래픽이 절약되고 속도가 빨라진다. 일단 이렇게만 알아두자. 캐시에 대해서는 나중에 따로 포스팅을 하도록 하겠다.
웹 개발 분야는 정말 공부할 양이 엄청나게 많다는 것을 다시 한 번 느낀다. 공부했던 것을 다시 차근차근히 복습해보니, 이전에 코드를 입력했을 때 왜 오류가 떴는지 조금은 알 것 같다.
참고 자료
2. rinae's devlog - [번역] 슈퍼마켓에서 우유를 사면서 웹 캐싱(web catching)을 알아봅시다.
'Javascript > 문법' 카테고리의 다른 글
| [JS] 비동기 처리의 시작 콜백, 그리고 콜백 지옥 (0) | 2021.04.11 |
|---|---|
| [JS] 자료의 형 변환 (0) | 2020.06.13 |
| [JS] 자바스크립트의 자료형 (0) | 2020.06.10 |
| [JS] 변수와 상수 (0) | 2020.06.08 |
| 자바스크립트란? (0) | 2020.06.03 |