키모스토리

자바스크립트 들어가기 본문

Web Devlopment/JavaScript

자바스크립트 들어가기

키모형 2022. 12. 29. 11:45
반응형

1. Hello World! 출력

우선 Node.js 사이트에 들어가 NodeJS를 다운 받는다.
Node.js 사이트 주소: https://nodejs.org/ko/

나는 왼쪽 14.17.3 버전으로 다운 받았다.

이제 Visual Stdio Code에서 다음 코드를 작성해보자.

console.log('Hello World!');

그리고 터미널에서 node main.js 라고 명령어를 실행시키면 Hello World! 가 출력되는 것을 볼 수 있다.

 

2. Preperation. 준비하기

html, css와 javascript를 연결하는 방법을 알아볼 것이다.

우선 html 파일의 head 노드 안에 title 아래부분에 script를 넣는다.

<script src="main.js"></script>

이렇게 하면 아까 생성한 main.js 파일과 html 파일이 연결된다.

Live Server을 이용해 브라우저를 열고 ctrl + Shift + i (Mac의 경우 Cmd + Option + i)를 눌러 Developer 툴을 연다. Console 창에 Hello World가 출력되는 것을 알수 있다.

 

3. Dev Tools. 개발자 툴

1. Console 창

간단한 javascript 명령어를 실행시킬 수 있다.

2. Sources 창

코드를 볼 수 있으며 Add breakpoint 기능을 이용해 디버깅에서 유용하게 사용이 가능하다.

3. 그 외

Network 창: 얼마나 많은 정보가 오고가는지
그리고 Performance, Memory 등등.

+) 참고

자바스크립트의 공식사이트는 MDN (developer.mozilla.arg)
공부할 때는 이 사이트를 참고하도록 하자.

 

4. async VS defer

htmld에서 javascript를 포함할 때 어떻게 하는 것이 가장 효율적일까?

1. head에 적기

다음과 같이 코드를 작성한 경우를 생각해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body></body>
</html>

이렇게 작성된 코드를 실행시키면 javascirpt가 먼저 실행되고 그 이후 html의 body 부분 코드가 실행되는데 이때 js 파일의 용량이 크다면 웹사이트가 보여지는데까지 많은 시간이 소요된다.

2. body 마지막에 적기

javascirpt를 body의 가장 마지막 부분에 실행시키는 방법.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <div></div>
   <script src="main.js"></script>
</body>
</html>

이렇게 하게 되면 js를 받기 전에 페이지가 모두 준비되어 사용자가 컨텐츠를 볼 수가 있다. 다만 단점은 사용자가 의미있는 컨텐츠(페이지를 예쁘게 꾸며주는 등)를 보기 위해서는 시간이 걸린다는 것.

3. head + async

async라는 속성값을 사용하는 방법. (async는 Boolean 타입의 속성값으로, 선언하는 것만으로 true를 의미한다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script asyn src="main.js"></script>
</head>
<body></body>
</html>

async를 사용하면 html을 읽어가다가 asyn이 나온 순간부터 동시에 js파일을 다운받는다. 그 후 js의 실행이 끝나면 나머지 html 파일을 실행시킨다.

  • 장점: 동시에 다운 받기 때문에 다운 시간이 단축된다.
  • 단점: js가 먼저 실행되기 때문에 html에서 등장하는 요소가 아직 정의되어 있지 않을 수 있다. js를 실행시킬 때 html 실행은 중단되므로 여기서 시간이 소요된다.

4. head + defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body></body>
</html>

html은 계속 실행하면서 defer이 나온 순간부터 js 파일을 동시에 다운받는다. 그리고 html 다운이 끝까지 완료되면 js를 실행한다. 사용자에게 페이지를 보여주고 나서 바로 js가 실행되기 때문에 가장 좋은 방법.

5. 'use strict'

자바스크립트 가장 윗 부분에 'use strict'; 를 정리해주는 것이 좋다.

'use strict';
console.log('Hello World!');

특히 순수 바닐라 자바스크립트를 이용할 땐 꼭 써주는게 좋음.
-> 이유: 자바스크립트는 유연하지만 위험한 언어. 'use strict'를 선언함으로써 오류를 잡을 수 있다.

반응형
저작자표시

'Web Devlopment > JavaScript' 카테고리의 다른 글

#5 숫자, 수학 method  (0) 2025.03.13
#4 Symbol - property key  (0) 2025.03.13
#3 객체 메소드, 계산된 프로퍼티  (0) 2025.03.13
#2 생성자 함수  (0) 2025.03.13
#1 변수, 호이스팅, TDZ(Temporal Dead Zone)  (0) 2025.03.13
'Web Devlopment/JavaScript' Related Articles more