오늘은 01 - 2 장의 내용을 정리해보자.
01 - 2 장의 제목은 '개발환경 설치와 코드실행'으로, 개발환경(Chrome, VScode)을 설치하고 오류 메시지를 확인하는 방법에 대해 다루고 있다.
1주차의 기본미션이 이번장에서 등장하므로 꼼꼼하게 잘 정리하도록 하자!
코드 실행기: 구글 크롬
현재 자바스크립트는 다양한 곳에 활용되고 있으며, 이는 자바스크립트 코드를 실행할 수 있는 실행기의 종류가 그만큼 다양하다는 의미이기도 하다. 자바스크립트가 가장 많이 활용되고 있는 곳은 웹 브라우저이다.
현재 가장 많은 최신 자바스크립트 기능을 지원하는 웹 브라우저는 구글 크롬이다.
구글 크롬은 이미 설치되어 있으므로 설치 과정은 넘어가자.
텍스트 에디터: 비주얼 스튜디오 코드
자바스크립트는 메모장으로도 개발할 수 있다. 하지만 개발을 조금 더 쉽게 할 수 있도록 도와주는 개발 전용 에디터를 설치하는 것이 좋다.
2020년 기준 가장 많이 사용되고 있는 개발 전용 에디터는 비주얼 스튜디오 코드이다.
비주얼 스튜디오 코드 역시 이미 설치되어 있으므로 설치 과정은 넘어가자.
코드 실행하기(1): 구글 크롬 콘솔에서 실행하기
크롬에서 개발자 도구를 실행할 때 여태까지는 f12를 통해서 실행했는데, Ctrl + Shift + I 를 이용해서 실행할 수도 있다.
개발자 도구의 콘솔에서 간단한 코드의 실행하고 결과를 확인할 수 있다.
| >console.log("Hello Javascript") | -> 입력한 코드 |
| Hello JavaScript...! | -> console.log()로 출력된 내용 |
| undefined | -> 해당 줄의 결과 |
코드 실행하기(2): 파일 만들고 저장해 실행하기(1주차 기본미션)
이번엔 비주얼 스튜디오 코드를 사용해서 HTML 페이지를 생성하고 코드를 작성한 뒤 실행하는 방법에 대해 알아보자.
1, 2단계: html 파일을 만들고 'html'을 타이핑 하면 자동완성 기능이 나오는데 그 중에서 [html:5]를 선택하는 순간 HTML 코드의 기본적인 형태가 자동 완성 기능으로 만들어진다.
다음은 [html:5]를 선택했을 때 자동 완성되는 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
자바스크립트를 사용하려면 기본 html 페이지의 <head> 태그 사이에 다음과 같이 <script> 태그를 삽입한다.
<script> 태그 사이에 자바스크립트 코드를 입력한다. <script> 태그는 <head>안에 넣으면 코드를 살펴보기에도 편리하므로 특별한 경우가 아니라면 <head> 태그 안에 위치시킨다.
<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert('Hello World')
</script>
</head>
<body>
</body>
</html>
3단계: HTML 페이지 실행하기
예제가 저장되어 있는 폴더에 가서 파일을 크롬 브라우저에 드래그&드롭해서 놓는다.
Tip!
비주얼 스튜디오 코드와 같은 개발 전용 툴을 사용하면 코드를 입력할 때 참고 할 수 있는 자동 완성 기능이 작동한다.
이 기능은 Ctrl + SpaceBar 키를 눌러 띄울 수 있으니 최대한 활용하도록 하자!
오류를 확인하는 법 & 자주 만나게 될 오류
개발자 도구 오른쪽 위에 x 표시가 되어 있는 붉은색 원을 클릭하면 어떤 오류인지 확인할 수 있다.
혹은 console 탭에서 어떤 오류가 출력되는지 확인할 수 있다.(오류 발생 위치도 확인 가능)
자주 만나게 될 오류
1. ReferenceError(예외처리)
| Uncaught ReferenceError: OO is not defined |
OO 부분에 오타를 내었을때 주로 발생하는 오류이다. 오타를 수정해주면 OK
2. SyntaxError(구문오류)
| Uncaught SyntaxError: Invalid or unexpected token |
토큰(기호)를 잘못 입력했을 때의 오류이다. 예를 들어 'Hello World'를 입력하기 위해서 따옴표를 열었으나 따옴표를 닫지 않았을 때 발생한다.
<script>
alert('Hello World)
</script>
| Uncaught SyntaxError: missing ) after argument list |
이 역시 비슷한 구문 오류이다.
01 - 2 장은 여기서 마무리된다.
다음은 01 - 3 장 내용을 정리해보자.
오늘 하루도 쌓였다!
'혼공학습단 11기(完)' 카테고리의 다른 글
| [혼공스] 02 - 2 정리 (1) | 2024.01.08 |
|---|---|
| [혼공스] 02 - 1 정리 (1) | 2024.01.07 |
| [혼공스] 1주차 미션 (0) | 2024.01.06 |
| [혼공스] 01 - 3 정리 (1) | 2024.01.05 |
| [혼공스] 01 - 1 정리 (1) | 2024.01.03 |
