[JavaScript] 자바스크립트 실행 환경

자바스크립트 실행 환경

• 웹 브라우저의 콘솔에서 실행하기
• 자바스크립트 코드를 HTML 문서에 삽입하여 웹 브라우저로 실행하기
• Node.js의 대화형 모드(REPL)로 실행하기
• Node.js로 파일을 읽어 들여 실행하기

웹 브라우저의 콘솔에서 실행하기

• 개발자 도구 켜기: Ctrl + Shift + I
• 콘솔 화면의 “ > ” 표시: 프롬프트
• 프로그램을 여러 줄에 나누어 입력하기
• 콘솔 화면 안에 표시된 내용 지우기: Ctrl + L 또는 왼쪽 모서리

  

  콘솔 내용 지우기

• console.log의 출력 결과는 자바스크립트 실행 환경에 따라 달라질 수 있음
• 크롬 콘솔
  
  • 크롬 콘솔은 상세한 정보를 표시하지만 다른 실행 환경은 정보를 간략히 표시함

{Symbol(heart): 3}

크롬 콘솔창 출력결과

• 파이어폭스 콘솔

Object{}

• HTML 문서에 삽입하여 크롬에서 여는 경우

Object

HTML 문서에 삽입하여 웹 브라우저로 실행하기

• 클라이언트 측 자바스크립트(웹 브라우저에서 동작하는 자바스크립트)
  • HTML, CSS 스타일을 제어하여 대화형(Interactive) 웹 페이지를 만들 때 사용

• 자바스크립트로 HTML 요소와 CSS 스타일을 제어할 때는 script 요소를 head 요소의 자식 요소로 배치
• console.log(...)를 document.write(...)로 바꾸면 출력 결과를 웹 페이지의 창 안에서 확인 가능(HTML body 안에 출력함)

Node.js에서 실행하기

• Node.js는 주로 서버 측 자바스크립트 실행 환경으로 사용됨
• Node.js 위에서 동작하는 서버 애플리케이션을 작성하면 다양한 웹 서버를 구축 가능하며, 일반 PC에도 설치 가능
• Node.js는 구글 크롬이 사용하는 V8 엔진(자바스크립트 실행 엔진)을 탑재하고 있어 실행속도가 매우 빠름
• Node.js를 실행시키려면 명령 프롬프트(윈도우) 또는 터미널(맥)을 사용

Node.js의 대화형 모드(REPL, Read Eval Print Loop)로 실행하기

• 명령 프롬프트에 node 입력
• 여러 줄 모드
  • Shift + Enter: 행 앞에 … 표시됨
  • 코드 작성이 끝나면 여러 줄 모드가 자동으로 해제되지만 Ctrl+C를 눌러 강제로 해제할 수도 있음
• 대화형 모드 종료: .exit 입력 또는 Ctrl + C 연달아 두 번 누르기

편집기 모드로 실행하기

• 명령 프롬프트에 .editor 입력
• 행 단위로 입력
• 편집기 모드 해제: Ctrl + D

Node.js로 파일을 읽어 들여 실행하기

• 디렉토리로 이동하기: cd
• 현재 디렉터리를 표시하기: pwd / cd
• 디렉터리 안에 저장된 파일 목록 보기: ls / dir
• 확장자가 .js인 파일의 목록 표시: ls *.js
• Node.js로 자바스크립트 파일 실행하기
  • node 파일경로 입력