IT Study./혼공JS

1장. 자바스크립트 개요와 개발환경 설정 - 2

impnem 2022. 6. 1. 20:34

 

 

 

혼공JS 1장 - 2

 

 

 

01-2 개발환경 설치와 코드 실행

  • 개발을 할 수 있게 해주는 환경을 개발환경(development environment)이라고 부른다.
  • 개발환경에는 코드를 작성하는 텍스트 에디터와 코드를 실행하는 코드 실행기가 필요하다.
  • 여기서는 기본적인 자바스크립트 개발을 위해 텍스트 에디터는 비주얼 스튜디오 코드(Visual Studio Code)를 사용하고, 코드 실행기는 구글 크롬이라는 웹 브라우저를 사용한다.

 

 

<코드 실행기 : 구글 크롬>

구글 크롬 설치하기

 

Chrome 웹브라우저

더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.

www.google.com

 

 

<텍스트 에디터: 비주얼 스튜디오 코드>

비주얼 스튜디오 코드 설치하기

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

비주얼 스튜디오 코드 한국어 언어팩 설치하기

  • 설치했을 때 한국어로 나오는 경우에는 넘어가면 된다.

 

  • 화면 왼쪽의 툴바에서 5번째에 있는 [확장(Ctrl+Shift+X)] 아이콘을 클릭한다.
  • 검색창에 'Korean'을 입력하고 엔터를 눌러 검색한 후 목록에서 [Korean Language Pack for Visual Studio Code]를 선택하고 [Install] 버튼을 클릭해 설치한다.
  • 그리고 비주얼 스튜디오 코드를 재시작한다.

 

 

<코드 실행하기(1): 구글 크롬 콘솔에서 실행하기>

  • 구글 크롬의 주소창에 about:blank를 입력하고 빈 페이지에 들어간다.
  • 여기서 단축키 Ctrl+Shift+i 혹은 F12를 눌러 개발자 도구를 실행하여 [Console] 탭을 클릭한다.
  • [Console] 탭에서 아래의 코드를 작성한다.
console.log("Hello JavaScript...!")
  • 그러면 아래처럼 결과가 나타난다.
console.log("Hello JavaScript...!") // 입력한 코드이다.
Hello JavaScript...! // console.log()로 출력된 내용이다.
undefined // 해당 줄의 결과이다. - 결과가 따로 없어서 undefined가 출력된다.

 

 

<코드 실행하기(2): 파일 만들고 저장해 실행하기>

1단계: HTML 페이지 생성하기

  • vscode(비주얼 스튜디오 코드)를 실행하고, 만들려는 폴더에 hello.html이라는 이름으로 생성한다.

 

2단계: HTML 페이지 작성하기

  • hello.html을 연 상태로 html을 입력하면 하단의 자동 완성 기능에 [html:5]를 선택하고 엔터를 누르면 아래와 같은 HTML의 기본 코드가 자동 완성된다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • 여기서 자바스크립트를 작성하고 테스트를 하기 위해서 <script> 태그를 추가하여 아래와 같이 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    alert('Hello World')
  </script>
</head>
<body>
  
</body>
</html>
  • 반드시 작성 후에는 [Ctrl+S]를 눌러 저장한다.

 

3단계: HTML 페이지 실행하기

  • hello.html의 탭을 드래그&드롭으로 크롬 브라우저 탭 칸에 놓으면 아래와 같이 작동하게 된다.

 

 

 

 

오류를 확인하는 방법

  • 아래와 같이 코드를 잘못 입력했을 경우 구글 크롬 개발자 도구에서 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    alrt('Hello World') // alert를 alrt로 잘못 입력했다고 가정한다.
  </script>
</head>
<body>
  
</body>
</html>

 

ReferenceError (예외처리)

Uncaught ReferenceError: OOO is not defined
  • ooo 부분을 잘못 입력했을 때 발생하는 에러이다.

 

SyntaxError (구문 오류)

Uncaught SyntaxError: Invalid or unexpected token
  • 토큰(기호)을 잘못 입력했을 때의 오류이다.
  • 예로 'Hello World'를 입력하기 위해 따옴표를 열고 닫지 않았을 경우

 

Uncaught SyntaxError: missing ) after argument list
  • 토큰(기호)을 잘못 입력했다는 오류이며 이 경우에는 괄호를 열었으나 닫지 않았을 때 나오는 에러이다.

 

 

자바스크립트 표준 스타일

  • 프로그래밍 언어도 지역(팀 또는 회사 등)에 따라서 사용하는 코드 작성 방식이 조금씩 다르다.
  • 이러한 코드 작성 방식을 코딩 스타일(coding style) 또는 코딩 컨벤션(coding convention)이라고 부른다.
  • 몇 가지 예를 들면 아래와 같다.
    • 들여 쓰기로 띄어쓰기를 2개를 사용할지 4개를 사용할지에 대한 결정
    • 중괄호 입력 전에 줄 바꿈을 할지 말지에 대한 결정
    • 키워드 뒤에 괄호를 바로 붙일지 공백을 줄일지에 대한 결정

 

 

 

 

해당 글은 [혼자 공부하는 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.