자바스크립트와 웹 프론트엔드 - 5

본 내용은 https://programmers.co.kr/learn/courses/10

강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. 

 

Part5. Extra

1. script 위치에 따른 실행

• 브라우저는 HTML 문서를 읽으면서 script tag를 실행함

-      HTML 문서 Element 파싱 보다 스크립트가 먼저 실행되면 접근되지 않음

-      페이지의 상단의 script 에서 이후 파싱될 Element에 접근하고 싶다면 onload 등의 eventhandler로 실행되도록 해야 함

• async, defer 속성을 이용하면 스크립트의 실행과 문서의 로딩을 동시에 진행할 수 있음(비 동기적)

 

2. Chrome 디버거 활용

[ 프로그램 오류의 종류 ]

-      Syntax Error (문법적 오류) : 해당 구문이 실행되지 않아 쉽게 발견 및 수정 가능

-      Semantic Error (논리적 오류) :실행은 되지만 의도한 결과가 도출되지 않는다.

 

[ 개발자 도구 Sources tab 활용 ]

• Breakpoint  - 멈추고 싶은 코드의 라인번호를 클릭해서 추가 가능

- Resume : 다음 Breakpoint 까지 프로그램을 재개

- Step over : 함수의 호출이 있을 때 건너뛴다.

- Step into : 함수의 호출이 있을 때 해당 함수로 들어간다.

- Step out : 현재 실행 중인 함수에서 벗어난다.

• Watch 창 - 조사식을 추가해 각 시점의 변수 상태를 조회 가능

• Scope - 실행중인 함수의 scope 정보 확인 가능

• Console 창 - 디버깅 중에도 명령을 입력 가능 ( 변수의 값을 수정하거나 확인 가능 )

 

3. 익명함수와 함수 즉시 호출

[ 익명 함수의 필요성 ]

Javascript 에서는 함수가 인자로 사용되거나 콜백 함수로 사용될 수 있기 때문에, 일회성으로 사용될 코드의 블럭을 함수로 정의하는 경우가 많음. 즉, 이러한 함수의 경우 이름이 꼭 필요하지 않음.

• 익명함수의 정의 : 함수의 이름이 없이 정의 가능 / 인자로 바로 전달 가능

setTimeout(  function (){  //함수 내용 }, 3000 );

 

 

 

 

 

4. 예외처리

[ 예외 처리의 필요성 ]

프로그램의 외부 요인으로 프로그램의 특정 파트가 정상적으로 동작하지 않을 수 있으나, 에러처리를 이용하면 프로그램이 정상적으로 실행될 수 있음

 

[ Try, Catch, Finally 구문 ]

try 구문 안에서 호출한 함수 안에서 에러가 발생한 경우에도 catch로 이동해 프로그램이 실행됨.

try{  // 정상적으로 실행되는 경우 실행될 프로그램 작성 / try 블록안에서 에러가 발생한 경우 catch 블록으로 이동함  }

catch(e){  // try 블록에서 에러가 발생한 경우 / 에러를 인자 e로 받아 에러를 처리하는 코드를 작성

             consol.log( e ) ; }

finally{   // try, catch구문이 실행되고 나서 실행될 코드  }

 

[ 에러 발생시키기 ]

• throw 명령 사용 : return 구문과 비슷하게 에러를 나타낼 수 있는 인자를 사용 - 문자열, 숫자, 객체 등 object를 자유롭게 활용 가능

• 에러 처리 과정 : throw 발생 시, catch 구문을 찾아서 이동하게 됨

-      현재의 블록에서 catch, finally 구문이 없다면 상위 블록, 상위 함수(호출된 함수)로 이동

-      try, finally 구문만 존재시, finally 구문은 실행되고, catch 될 수 있는 구문을 찾아 이동함

-    catch 구문을 찾으면 에러가 처리되고 해당 try, catch 구문 이후 코드가 실행됨