JavaScript를 실행하는 방법: 브라우저와 Node.js 활용하기

2024. 12. 16. 00:14ㆍ개발/JavaScript

반응형

 

JavaScript를 실행하는 데에는 두 가지 주요 방법이 있습니다. 바로 브라우저와 Node.js를 사용하는 것입니다.

아래에서 각각의 방법과 실행 방법을 단계별로 알아보겠습니다.

1. 브라우저에서 JavaScript 실행하기

준비 단계: Chrome 다운로드

먼저 브라우저에서 JavaScript를 실행하려면 Chrome 같은 브라우저가 필요합니다.

Chrome은 다음 링크에서 다운로드할 수 있습니다:

👉 Chrome 다운로드

실행 방법: Hello World 출력하기

  1. Chrome 브라우저를 열기Chrome을 실행한 후, 개발자 도구를 열어야 합니다.
  2. 개발자 도구 실행Windows: Ctrl + Shift + JMac: Cmd + Option + J
  3. JavaScript 코드 입력개발자 도구의 Console 탭에서 아래 코드를 입력하고 실행해 보세요:
  4. console.log("Hello World!");
  5. 출력 확인Console 창에 Hello World!라는 메시지가 출력됩니다.

2. VS Code를 사용해 JavaScript 실행하기

준비 단계: VS Code 다운로드

코드를 작성하고 실행할 수 있는 편리한 에디터인 VS Code를 다운로드하세요:

👉 VS Code 다운로드

VS Code로 JavaScript 실행하기

  1. VS Code 설치 및 실행다운로드한 VS Code를 설치하고 실행합니다.
  2. JavaScript 파일 생성index.js라는 새 파일을 만듭니다.
  3. 코드 작성아래와 같은 JavaScript 코드를 작성합니다:
  4. console.log("Hello World!");
  5. 터미널에서 실행VS Code 하단의 터미널을 열고 다음 명령어를 실행합니다:터미널에 Hello World!가 출력됩니다.
  6. node index.js

3. HTML 파일에서 JavaScript 실행하기

실행 준비: HTML 파일 생성

  1. index.html 파일 생성아래와 같이 HTML 파일을 작성합니다:
  2. html 코드 복사 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script> console.log("Hello World!"); </script> </body> </html>
  3. Live Server로 실행VS Code에서 Live Server 플러그인을 설치한 후, HTML 파일을 실행합니다.
  4. 결과 확인브라우저에서 개발자 도구(F12)를 열고 Console 탭을 확인하면 Hello World!가 출력됩니다.

4. Node.js에서 JavaScript 실행하기

준비 단계: Node.js 다운로드

Node.js는 JavaScript를 브라우저 외부에서 실행할 수 있게 해줍니다. Node.js가 설치되어 있는지 확인하려면 터미널에서 다음 명령어를 입력하세요:

node -v

Node.js가 설치되어 있지 않다면 Node.js 다운로드 페이지에서 설치하세요.

Node.js로 JavaScript 실행하기

  1. index.js 파일 생성다음 코드를 작성한 후 저장합니다:
  2. console.log("Hello World!");
  3. 터미널에서 실행파일이 있는 디렉터리로 이동한 후, 아래 명령어를 실행합니다:Hello World!가 출력됩니다.
  4. node index.js

Nodemon으로 자동 실행

Node.js 파일을 실행할 때마다 node index.js 명령어를 입력하기 번거롭다면, Nodemon을 설치해 자동으로 실행되도록 설정할 수 있습니다:

npm install nodemon -g

이후 아래와 같이 Nodemon으로 파일을 실행하면, 파일이 변경될 때 자동으로 실행됩니다:

nodemon index.js

요약

실행 환경 실행 방법 주요 특징

브라우저 개발자 도구에서 Console 사용 브라우저에서 바로 JavaScript 실행 가능
VS Code Node.js와 터미널 사용 다양한 JavaScript 파일 실행 가능
HTML <script> 태그 사용 웹 페이지와 함께 실행 가능
Node.js node 명령어 사용 서버 환경에서 실행 가능

 

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

'개발 > JavaScript' 카테고리의 다른 글

함수형 프로그래밍의 장점과 실전 활용  (1) 2025.02.28
JavaScript 연산자 정리  (0) 2024.12.16
JavaScript 기본 타입과 메모리 이해하기  (0) 2024.12.16
JavaScript 기초: 변수(Variable)와 메모리 이해하기  (2) 2024.12.16
JavaScript: 브라우저와 Node.js에서 동작하는 가장 많이 사용하는 언어  (0) 2024.12.15

관련글

티스토리툴바