JavaScript 입문 : 기본 환경설정, 첫 코드 실행하기

항상 늘 그렇듯이 JavaScript의 Editor도 VS Code를 활용하도록 하겠습니다. 그리고 대부분이 웹브라우저를 Chrome을 추천하고 있으니 저도 그렇게 하고 따라해 보겠습니다. 

 

▒ 프로그래밍 맛보기

 

가장 프로그래밍의 기본은 Editor를 이용하여 원하는 내용을 나타내는 과정입니다. 모든 프로그래밍 책이나 강좌에서 'Hello, World!'라는 구문을 종종 인용하곤 합니다.

 

그럼 브라우저에서 개발자코드로 'Hello, World!'를 나타내 보죠. 구글 같은 기본 화면에서 개발자코드 (F12)를 사용 console 탭에서 작성해 보도록 하겠습니다. 

 

다음은 구글화면 개발자코드를 실행한 그림입니다. console 태에서 작업하도록 하겠습니다. 

 

 

가장 기본적인 명령어를 배울 필요가 있습니다. 바로 console이라는 용어입니다. CLI (Command Line Interface) 기반으로 특정명령어를 입력할 때 시용합니다. 

 

Hello, World!를 나타내기 위한 명령어로 다음과 같이 씁니;다.

 

console.log('Hello, World!')

 

위처럼 타이핑하고 엔터를 치면 다음과 같이 표현됩니다. 

 

 

위 그림을 자세히 보면 첫번째 에러가 난 것을 볼 수 있습니다. 

에러메시지는 Uncaught ReferenceError: cosole is not defined 라고 되어 있는데 console에서 스펠링 한개를 놓친 결과로 에러메시지가 나왔습니다. 

 

즉, 대부분의 초보자들의 에러메시지는 타이핑 에러가 대부분이고 괄호나 콜론 등 기호를 제대로 사용하지 않았을 경우의 SyntaxError가 많은 부분을 차지한다고 하니 항상 염두에 두고 공부를 하는 방향이 좋을 듯 합니다. 

 

에러메시지는 어떠한 프로그래밍 언어에서도 상기와 같이 가장 기본적인 에러가 발생이 되고 있다는 점은 참조해 두는게 좋을 듯 합니다. 

 

참고로 소괄호 (  ) 는 영어로 parentheses, 중괄호 {  }는 영어로 braces, 대괄호 [  ]는 영어로 brackets라고 합니다. 이 영어단어는 최소한 알고 가도록 합시다. (에러메시지에서 종종 사용되는 단어이기도 합니다.)

 

자바스크립트는 한줄씩 반영되는 프로그램이다. 라는 개념을 미리 잡아놓고 공부를 시작하도록 합시다. 

즉, 위 예에서처럼 console.log('Hello, World!')로 먼저 한줄이 입력되고 그내용을 평가하여 Hello, World!가 나오고 다시 대기열로 prompt가 바뀌는 것을 볼 수 있습니다.  

 

이러한 순서를 Read - Evaluation - Print 순으로 Looping하는 REPL이라고 합니다.