자바스크립트 시작하기: 오류와 표준 스타일

 

윤인성님의 혼자 공부하는 자바스크립트를 읽으며 제 생각을 더해 정리한 내용입니다.

 

프로그래밍을 하다보면 필연적으로 오류를 만나게 됩니다.

하물며 직접 작성하지 않고, 검증된 오픈소스를 가져오더라도 나의 프로젝트에 적용할때는 다양한 오류가 발생합니다.저는 오류를 발생했다는것만 알고 해석하지는 못했는데, 간단하게나마 의미를 알 수 있었습니다.

 

오류를 확인하는 방법

코드의 실행과 직접적인 관련이 있는 코드를 잘못 입력하면 일반적으로 오류가 발생합니다.

구글 크롬 개발자 도구는 HTML 페이지를 개발하는데 필요한 유용한 기능을 제공합니다.

크롬에서 코드를 실행한 후 마우스 오른쪽 버튼을 클릭해 [검사]를 선택합니다.

개발자 도구 오른쪽 위에 X 표시가 되어 있는 붉은색 원이 나옵니다. 이는 자바스크립트 코드 등에 오류가 발생했을 때 출력되는 아이콘입니다.

이 아이콘을 클릭하거나 개발자 도구의 [Console] 탭을 클릭합니다.

 

‘Uncaught SyntaxError: missing ) after argument list’ 라는 오류를 출력합니다. 이것을 보고 어떤 오류인지 확인합니다. ex01.html : 12 은 오류가 발생한 위치입니다. 클릭하면 오류가 발생한 위치로 이동합니다.

 

처음 자바스크립트를 공부할 때 자주 접하는 오류 몇 가지 살펴보겠습니다.

ReferenceError [ 예외 처리 ]

[ 예외 ]

Uncaught ReferenceError: OO is not defined

[ 상황 ]

숙련된 자바스크립트 개발자들도 자주 만나는 오류 중 하나입니다. OO 부분을 잘못 입력했을 때 발생합니다.

[ 해결 ]

이 오류는 OO 부분을 수정하면 해결됩니다.

 

SyntaxError [ 구문 오류 ]

[ 구문 오류(1) ] Uncaught SyntaxError: Invalid or unexpected token

[ 상황 ] 토큰(기호)을 잘못 입력했을 때의 오류입니다. 예를 들어 따옴표를 열었으나 따옴표를 닫지 않은 코드입니다.

[ 해결 ] 따옴표를 제대로 닫아주면 해결됩니다.

---

[ 구문 오류(2) ] Uncaught SyntaxError: missing ) after argument list

[ 상황 ] 토큰(기호)을 잘못 입력했다는 오류입니다. 괄호를 열었으나 닫지 않은 코드입니다.

[ 해결 ] 괄호를 제대로 닫아주면 해결됩니다.

---

자바스크립트 표준 스타일

코드 작성 방식을 코딩 스타일(coding style) 또는 코딩 컨벤션(coding convention) 이라고 부릅니다. 몇 가지 예를 들면 다음과 같습니다.

들여쓰기 2개와 4개 : 들여쓰기로 띄어쓰기 2개(자바스크립트 표준 스타일)를 사용할지 4개를 사용할지에 대한 결정

중괄호 입력 방식 : 중괄호 입력 전에 줄바꿈을 할지 말지에 대한 결정

키워드 뒤에 공백 : 퀴워드 뒤에 괄호를 바로 붙일지 공백을 줄지에 대한 결정

 

사실 어떻게 작성하는 것이 더 좋다는 절대적인 기준은 없습니다. 프로젝트 할 때는 팀원들과 상의하여 적절한 코드 작성 기준을 정하면 됩니다.

자바스크립트 표준 스타일에 대한 한국어 문서가 있으니 한번 읽어보면 좋은 공부가 될 것입니다.

https://standardjs.com/readme-kokr.html