자바스크립트를 사용하기전 오타와의 싸움이다!

코비코 koreanvisionarycoder ㅣ 2022. 10. 21. 16:59

오타에 참으로 민감한 우리 자바스크립트씌........ ^^

작은 오타로 에러났다는 사실을 알았을때................................................

Chaper 1 자바스크립트를 사용하기전 오타와의 싸움이다!

Window 기준으로, Google 크롬브라우저를 설치 한뒤, 메인 페이지에서 'F12' 를 누르면 개발자도구가 나온다.

위 창에 ' consloe' 탭을 클릭한뒤,
오른쪽 빈공간에 > 모양을 확인할 수 있다. 이를 프롬포트(Prompt) 라고 한다.
여기에 코드를 입력하시면 된다. 다음코드를 작성한 후 , [Enter]키를 치면 코드가 실행된다.

step 1. 콘솔창에 Hello World가 출력을 해고 응용해서 (' Hello world! ')도 출력해보자.

▶ console. log ( ' ' ) 내부 글자를 변경하면 된다.

step 2. 오타를 기억하자.

프로그래밍은 한 글자만 틀려도 에러가 날 경우가 많다. 본인이 타이핑을 하다가 오타가 났다면 이에 관련한 오타의 대한 에러메세지를 외우는 것이 좋다.

처음 시작 할때, ' Hello world ' 를 검색하면 에러가 날 경우가 많다. 어쩌면 수백번 에러를 낼 수도 있다. 친절하게 몇줄에 몇번째에 오타가 있다고 이야기 해주지 않으니까. 이런경우에는 오타 문장 자체를 꼭 기억하자.

오히려 이때 에러에 대한 코드를 읽고, 어떤 경우에 어떤 '에러메세지'가 나오는지 상황에 따라 외우는 것이 좋다.

Tip. 프로그래머를 위한 온라인 타자 연습을 이용해보자 오타도 훨씬 줄어들 수 있을것이다. (스피드코더)

Typing Practice for Programmers | SpeedCoder

www.speedcoder.net

미리 괄호 자체의 영어단어를 외우는 것을 추천한다.

( ) parentheses
{ } braces
[ ] brackets

자바스크립트 오타 이외에 오류들

자바스크립트에는 다양한 오류 유형이 있다. 그 중 구문오류를 가장 자주 만난다.

개발자 도구에서 오류가 발생했을 때 해당 오류는 무엇을 뜻하는 것인지 아래 순서대로 확인할 수 있다.

자바스크립트 코드에 문제가 있을 때 오류 생성자가 [Console] 창에 오류 유형을 보여주기 때문에 개발자는 이 오류 유형을 보고 코드에 어떤 오류가 났는지 짐작할 수 있다.

오류는 오류 유형, 오류 내용 그다음으로 오류 위치의 순서로 나타난다.

다양한 오류 중 입문자가 가장 실수하기 쉬운 유형이 앞서 살펴 본 SyntaxError(구문 오류) 이다. 익숙하지 않은 코드를 작성하다 보니 오타와 쉼표, 괄호 따옴표와 같은 기호를 빠뜨리거나 혹은 하나 더 입력하는 등 사소한 실수 오류들이 많다.

이러한 Error는 웹 브라우저에서 실행조차 되지 않고 실행 전에 오류를 내기 때문에 오류 위치를 개발자 도구에서 정확하게 확인하고 처음 자바스크립트를 입문하는 사람들이라면 비교적 쉽게 해결할 수 있는 오류여서 오류를 만날 때마다 코드 작성에 주의하면 점차 오류를 줄일 수 있다.

자바스크립트 다양한 에러 타입

EvalError : eval() 함수와 관련한 오류가 발생한 경우

InternalError : 자바스크립트 엔진 내부에서 오류한 경우

RangeError : 숫자 변수나 매개변수가 유효한 범위를 벗어난 경우

ReferenceError : 잘못된 참조를 했음을 나타내는 경우

TypeError : 변수나 매개변수가 유효한 자료형이 아닌 경우

URIError : encodeURI()나 decodeURI() 함수에 부적절한 매개변수를 제공한 경우

AggregateError : 하나의 동작이 여러 개의 오류 발생시키는 경우

SyntaxError : 코드 분석 중 잘못된 구문을 만난 경우

예외란 구문 오류 이외에 프로그램 실행 중에 발생하는 모든 오류를 의미하며 이를 런타임 오류runtime error 또는 예외exception라고 한다.

자바스크립트에서는 프로그램이 실행되는 도중 발생하는 예외를 처리하기 위해 try catch finally 문을 사용한다.예외 처리는 예외가 발생했을 때 프로그램이 중단되지 않게 처리하는 것으로, try-catch-finally 구문을 사용하여 예외가 발생하여도 프로그램이 그대로 실행되도록 한다.

try catch finally..

try

try {
  lalala; // 에러, 변수가 정의되지 않음 = 예외가 발생할 가능성이 있는 코드 
}

try 에러가 났을 때 원상복구를 시도할 코드. 에러 발생시 코드의 실행 흐름이 catch 블록으로 옮겨간다.

catch

catch(err) {
  alert(err.name); // ReferenceError
  alert(err.message); // lalala is not defined
  alert(err.stack); // ReferenceError: lalala is not defined at ... (호출 STACK)
 
  // 에러 전체를 보여줄 수도 있습니다.
  // 이때, 에러 객체는 "name: message" 형태의 문자열로 변환됩니다.
  alert(err); // ReferenceError: lalala is not defined
  
  // 예외가 발생했을 때  실행할 코드

catch 에러에 대한 정보를 담고 있는 객체(위 예제의 e)를 사용할 수 있다.

속성명	설명
message	예외 메시지
description	예외 설명
name	예외 이

finally

} finally {
  // 무조건 실행되는 코드
}

finally: try블록 안에서의 에러 발생 여부와 관계 없이 무조건 실행되어야 하는 코드이다. return, break, continue등으로 코드의 실행 흐름이 즉시 이동되더라도 무조건 실행되며 finally블록은 catch 블록과도 같이 사용된다.

에러가 안 났을 때: try - finally
에러가 났을 때: try - 에러발생 - catch - finally

※ throw 예외를 발생시키다라는 것은 에러나 예외 상황을 알린다는 뜻이며 예외를 강제로 발생시켜야 할 경우가 생길 때는 throw를 사용한다.

정리하자면 ,

//try {
    * 실행할 코드를 입력한다.
    * 정상이라면 문제없이 실행된다. 하지만 경우에 따라 예외가 발생할 수 있다. 
    * 예외는 throw 문에 의해 발생할 수도 있고, 예외를 발생시키는 메서드에 의해 발생할 수도 있다.
} //
// catch (e) {
    * 이 블록 내부의 문장들은 오직 try 블록에서 예외가 발생할 경우에만 실행된다. 
    * 이 문장들에선 지역 변수 e를 사용하여 Error 객체 또는 앞에서 던진 다른 값을 참조할 수 있다. 
    * 이 블록에서는 어떻게든 그 예외를 처리할 수도 있고,
    * 그냥 아무것도 하지 않고 예외를 무시할 수도 있고, 
    * 아니면 throw 를 사용해서 예외를 다시 발생시킬 수도 있다. 
} //
//finally {
    * 이 블록에는 try 블록에서 일어난 일에 관계없이 무조건 실행될 코드가 위치한다. 
    * 이 코드는 try 블록이 어떻게든 종료되면 실행된다. 
    * try 블록이 종료되는 상황은 다음과 같다. 
        1) 정상적으로 블록의 끝에 도달했을 때 
        2) break, continue 또는 return 문에 의해서 
        3) 예외가 발생했지만 catch 절에서 처리했을 때 
        4) 예외가 발생했고 그것이 잡히지 않은 채 퍼져나갈 때 
}//

에러와 예외

- 예외 : try catch 구문으로 해결할 수 있는 것 이다.

- 에러 : try catch 구문으로 해결할 수 없는 것 이다.

예외 강제 발생

- 예외를 강제로 발생시킬 때는 throw 키워드를 사용한다.

- 에러와 다르게 예외는 try catch 구문으로 처리할 수 있다.

'JS' 카테고리의 다른 글

자바스크립트 활용하기 💡"DOM편 " (0)	2022.11.03
좋은 "변수이름" 짓는방법 " Naming 💡 (0)	2022.10.26

Kovico lab