[JS] 자바스크립트란?

artp·2025년 4월 18일

javascript

목록 보기

9/50

웹 페이지의 기본 원리는 웹 브라우저가 HTML과 CSS로 작성된 파일을 불러와 코드를 해석하고 해석된 내용을 표시하는 것입니다. 웹 브라우저는 HTML과 CSS 파일의 코드가 직접 수정되기 전까진 항상 같은 내용을 표시하는데, 이러한 방식을 정적 웹(static web)이라고 합니다.

흔히 모던 웹이라고 하는 현대적인 웹에서는 정적 웹 말고도 이미 해석이 끝나 웹 브라우저에 표시된 내용을 인위적으로 조작하거나 상호작용하게 할 수 있습니다. 이러한 웹을 정적 웹과 대비해 동적 웹(dynamic web)이라고 합니다.

HTML과 CSS는 정적 웹만 구현할 수 있는 언어라서 이미 웹 브라우저에서 한 번 해석되어 화면에 표시되고 나면 수정할 수 없습니다. 이를 동적 웹처럼 동작하게 하려면 HTML과 CSS 외에 자바스크립트(JavaScript)라는 언어를 사용해야 합니다.

자바스크립트는 마치 사람의 근육처럼 웹 페이지에 동적인(움직임이 있는) 기능을 장착할 수 있게 도와줍니다.
버튼의 클릭, 정보의 입력, 페이지 스크롤, 페이지 이동 등 웹 브라우저에서 이루어지는 모든 동작은 자바스크립트로 구현한 기능들입니다.

자바스크립트 코드 작성 방법

웹 브라우저에 표시할 HTML 문서에 자바스크립트를 적용하고 싶다면 HTML 문서와 자바스크립트 파일을 연결해야 합니다.

HTML 파일과 자바스크립트 연결하기

HTML 문서와 자바스크립트 파일을 연결하는 방법은 내부 스크립트와 외부 스크립트 2가지입니다.

두 방법 중 실무에서는 주로 외부 스크립트 방법을 사용합니다. 여러 이유가 있지만, 가장 큰 이유는 유지 보수가 편하기 때문입니다.

1. 내부 스크립트 방법

내부 스크립트는 HTML 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법입니다. 다음과 같은 HTML 파일을 생성하고 예제 코드를 실행하면 웹 브라우저 화면에 자바스크립트 코드로 작성한 내부 스크립트 방법이라는 글자가 표시됩니다.

<body>
  <script>
    document.write("내부 스크립트 방법");
  </script>
</body>

2. 외부 스크립트 방법

외부 스크립트는 js 확장자로 된 별도의 파일을 생성하고 생성한 파일에 자바스크립트 코드를 작성한 뒤, HTML 문서와 연결하는 방법입니다.
script.js 파일을 생성하고 다음과 같이 코드를 작성합니다.

// script.js 파일
document.write("외부 스크립트 방법");

HTML 문서를 생성해 script.js 파일과 연결합니다. 다음 코드처럼 script 태그에 이미지 경로를 입력할 때 사용한 src 속성을 사용해 연결하려는 파일 경로를 입력하면 됩니다.

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

3. script 태그 사용 위치

script 태그는 항상 body 태그의 종료 태그 바로 전에 사용합니다. 이는 내부 스크립트와 외부 스크립트 방법 모두 동일합니다.

<body>
  <!-- 외부 스크립트 -->
  <script src="script.js"></script>
  <!-- 내부 스크립트 -->
  <script></script>
</body>

웹 브라우저는 HTML 문서를 위에서부터 아래로 한 줄씩 순차적으로 해석합니다. 만약 <script> 태그가 <head>나 <body>의 중간에 있으면, 브라우저는 자바스크립트 코드를 먼저 실행하려고 시도합니다. 이때 아직 DOM 요소들이 완전히 만들어지지 않은 상태일 수 있어서, document.getElementById() 같은 DOM 조작이 실패할 수 있습니다.

따라서 <script> 태그는 HTML 요소들이 모두 해석된 직후, 즉 </body> 바로 앞에 위치시키는 것이 가장 안전합니다. 이렇게 하면 자바스크립트가 렌더링 이후에 실행되므로 화면 구성에 영향을 주지 않고 동작할 수 있습니다.

주석

자바스크립트의 주석은 한 줄일 때와 여러 줄일 때 사용 방법이 다릅니다.
한 줄만 주석으로 처리할 때는 // 기호(슬래시 2개)를 사용합니다.

// 한 줄 주석은 슬래시 2개로 표시합니다.

여러 줄을 주석으로 처리하고 싶을 때는 /* 기호와 */ 기호 사이에 내용을 작성합니다. 기호 사이에 있는 모든 내용이 주석으로 처리됩니다.

/*
  자바스크립트는 여러 줄 주석도
  간단하게 처리할 수 있습니다.
*/

자바스크립트 오류 확인 방법 (Chrome 기준)

프로그래밍 언어를 실행하는 방법에는 크게 컴파일 방식과 인터프리터 방식이 있습니다.
자바스크립트는 인터프리터 언어입니다. 코드를 한 줄씩 읽어가며 실행하고, 실행 중 오류가 발생하면 해당 줄에서 즉시 멈추고 오류 메시지를 출력합니다.

구분	컴파일 언어	인터프리터 언어
실행 방식	전체 코드를 미리 기계어로 번역 후 실행	코드를 한 줄씩 읽고 바로 실행
예시	C, Java (JVM)	JavaScript, Python
오류 발생 시점	실행 전에 컴파일러가 오류 감지	실행 중 오류가 발생한 줄에서 멈춤

자바스크립트 오류는 웹 브라우저는 개발자 도구(DevTools)를 사용하여 확인할 수 있습니다.

1. 개발자 도구 열기

단축키: F12 또는 Ctrl + Shift + I (Mac: Cmd + Option + I)
마우스 오른쪽 클릭 → 검사(Inspect) 선택

2. 콘솔 탭 확인

상단 탭에서 Console을 클릭
오류 메시지 출력 예:

  Uncaught ReferenceError: myFunction is not defined
  at script.js:10

해석: script.js 파일의 10번째 줄에서 myFunction이라는 함수가 정의되지 않아 오류가 발생했다는 의미입니다.

artp

donggyun_ee

이전 포스트

[JS] 동적 바인딩 vs 렉시컬 바인딩

다음 포스트