본문 바로가기
  • 코딩, 허쌤이 떠먹여 줄게
FrontEnd/Javascript

2장. 자바스크립트 실행 환경

by 허쌤 2025. 12. 30.

2장. 자바스크립트 실행 환경

자바스크립트 실행 환경 개요

자바스크립트는 다양한 환경에서 실행할 수 있습니다. 가장 일반적인 방법은 웹 브라우저에서 실행하는 것이지만, Node.js를 통해 서버에서도 실행할 수 있습니다.

1. 브라우저에서 실행

1-1. 인라인 스크립트 (Inline Script)

HTML 파일 내부에 <script> 태그를 사용하여 직접 코드를 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스크립트</title>
</head>
<body>
    <h1>JavaScript 실행</h1>

    <script>
        // 자바스크립트 코드
        console.log('Hello JavaScript');
        document.write('<p>인라인 스크립트로 작성된 내용</p>');
    </script>
</body>
</html>

특징:

  • 빠르게 테스트하기 좋음
  • HTML과 JavaScript가 같은 파일에 있음
  • 작은 프로젝트에 적합

주의사항:

  • 코드가 복잡해지면 관리가 어려움
  • 재사용성이 낮음

1-2. 외부 JavaScript 파일

JavaScript 코드를 별도의 .js 파일로 분리하여 사용합니다.

구조:

project/
  ├── index.html
  └── app.js

index.html:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스크립트</title>
</head>
<body>
    <h1>JavaScript 실행</h1>

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

app.js:

console.log('Hello JavaScript');
document.write('<p>외부 파일에서 로드된 내용</p>');

특징:

  • 코드 재사용 가능
  • HTML과 JavaScript 분리로 관리 용이
  • 여러 HTML 파일에서 같은 JavaScript 파일 사용 가능
  • 브라우저 캐싱으로 성능 향상

1-3. 스크립트 태그 위치

<head> 태그 내부

<head>
    <script src="app.js"></script>
</head>
  • 장점: 스크립트가 먼저 로드됨
  • 단점: HTML이 로드되기 전에 실행되어 DOM 요소에 접근 불가

<body> 태그 끝부분 (권장)

<body>
    <h1>제목</h1>

    <script src="app.js"></script>
</body>
  • 장점: HTML이 모두 로드된 후 실행되어 DOM 요소 접근 가능
  • 권장: 대부분의 경우 이 방법 사용

defer 속성 사용

<head>
    <script src="app.js" defer></script>
</head>
  • HTML 파싱과 병렬로 다운로드
  • HTML 파싱 완료 후 실행
  • 순서 보장

async 속성 사용

<head>
    <script src="app.js" async></script>
</head>
  • HTML 파싱과 병렬로 다운로드
  • 다운로드 완료 즉시 실행
  • 순서 보장 안 됨

2. 브라우저 콘솔에서 실행

개발자 도구 열기

  • Windows/Linux: F12 또는 Ctrl + Shift + I
  • Mac: Cmd + Option + I

콘솔 사용법

// 간단한 출력
console.log('Hello JavaScript');

// 변수 선언 및 사용
let name = '홍길동';
console.log(name);

// 계산
let result = 10 + 20;
console.log(result);

// 함수 실행
function greet(name) {
    return `안녕하세요, ${name}님!`;
}
console.log(greet('홍길동'));

콘솔 메서드 종류

console.log('일반 로그');           // 일반 정보 출력
console.error('에러 메시지');        // 에러 출력 (빨간색)
console.warn('경고 메시지');        // 경고 출력 (노란색)
console.info('정보 메시지');         // 정보 출력
console.table([{name: '홍길동', age: 20}]); // 테이블 형태로 출력

3. Node.js 환경에서 실행

Node.js란?

Node.js는 브라우저 밖에서 자바스크립트를 실행할 수 있게 해주는 런타임 환경입니다.

Node.js 설치 확인

터미널(명령 프롬프트)에서:

node --version
npm --version

Node.js로 JavaScript 실행

app.js 파일 생성:

console.log('Hello from Node.js!');

let name = '홍길동';
console.log(`안녕하세요, ${name}님!`);

터미널에서 실행:

node app.js

Node.js와 브라우저의 차이점

기능 브라우저 Node.js
window 객체 ✅ 있음 ❌ 없음
document 객체 ✅ 있음 ❌ 없음
console 객체 ✅ 있음 ✅ 있음
파일 시스템 접근 ❌ 불가 ✅ 가능
서버 생성 ❌ 불가 ✅ 가능

4. 실습 예제

예제 1: 인라인 스크립트

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스크립트 예제</title>
</head>
<body>
    <h1 id="title">제목</h1>
    <button onclick="changeTitle()">제목 변경</button>

    <script>
        function changeTitle() {
            document.getElementById('title').textContent = '제목이 변경되었습니다!';
        }
    </script>
</body>
</html>

예제 2: 외부 파일 사용

index.html:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스크립트 예제</title>
</head>
<body>
    <h1 id="title">제목</h1>
    <button id="btn">제목 변경</button>

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

script.js:

document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('title').textContent = '제목이 변경되었습니다!';
});

예제 3: 여러 스크립트 파일 사용

<body>
    <!-- 유틸리티 함수 -->
    <script src="utils.js"></script>

    <!-- 메인 로직 -->
    <script src="main.js"></script>

    <!-- 초기화 -->
    <script src="init.js"></script>
</body>

주의: 스크립트는 위에서 아래 순서로 실행됩니다!

5. 모듈 시스템 (ES6 Modules)

모듈이란?

코드를 여러 파일로 나누어 관리하는 방식입니다.

모듈 사용하기

index.html:

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

main.js:

import { greet, add } from './utils.js';

console.log(greet('홍길동'));
console.log(add(10, 20));

utils.js:

export function greet(name) {
    return `안녕하세요, ${name}님!`;
}

export function add(a, b) {
    return a + b;
}

주의: 모듈은 로컬 서버에서 실행해야 합니다 (file:// 프로토콜에서는 동작하지 않음)

6. 개발 환경 추천 설정

VS Code + Live Server

  1. VS Code에서 HTML 파일 열기
  2. Live Server 확장 설치
  3. 우클릭 → "Open with Live Server"
  4. 자동으로 브라우저에서 열림
  5. 파일 수정 시 자동 새로고침

간단한 로컬 서버

Python 사용:

python -m http.server 8000

Node.js http-server 사용:

npx http-server

브라우저에서 http://localhost:8000 접속

연습 문제

  1. 인라인 스크립트 연습

    • HTML 파일을 만들고 <script> 태그 안에 자신의 이름을 출력하는 코드를 작성하세요.

  2. 외부 파일 연습

    • script.js 파일을 만들고, HTML 파일에서 이를 불러와 실행하세요.

  3. 콘솔 연습

    • 브라우저 콘솔에서 다음을 실행하세요:
      • 변수 선언 및 출력
      • 간단한 계산
      • 함수 정의 및 호출

  4. Node.js 연습 (선택사항)

    • Node.js가 설치되어 있다면, 터미널에서 JavaScript 파일을 실행해보세요.

다음 장 예고

다음 장에서는 변수와 상수에 대해 학습합니다. 데이터를 저장하고 사용하는 방법을 배웁니다.

'FrontEnd > Javascript' 카테고리의 다른 글

6장. 조건문  (0) 2026.01.06
5장. 연산자  (0) 2026.01.06
3장. 변수와 상수  (0) 2026.01.05
4장. 데이터 타입  (0) 2025.12.30
1장. 자바스크립트란?  (0) 2025.12.30

관련글

티스토리툴바