웹(web)/프론트엔드-javascript25 크롬 콘솔에서 디버깅하기 크롬 개발자도구 콘솔을 사용하여 다양한 디버깅 방법을 알아보자. # 콘솔 키기 크롬 개발자도구를 키고 Console 탭이 아닌 경우에 단축키인 ESC를 클릭하면 개발자도구 아래쪽에 console drawer이 나타난다. 개발자도구 상단 쪽 X 버튼 왼쪽에 있는 점 세개를 누르면 show console drawer을 눌러도 된다. 상단 탭에서 Console 탭을 찾아서 클릭하면 다음과 같이 콘솔이 나타난다. 크게 보려면 탭을 찾아서 키면 된다. # expression을 모니터링하기 실시간으로 현재 viewport의 active element를 보고 싶다면 어떻게 해야할까? 위 버튼을 누르면 아래 처럼 입력할 수 있는 창이 나타난다. 여기에 document.activeElement를 입려한 후 엔터를 치면 .. 2021. 5. 5. 자바스크립트 동작 방식: 실행 컨텍스트(execution context) 자바스크립트는 인터프리터 방식의 언어일까? 답은 no에 가깝다고 할 수 있다. 인터프리터 방식의 언어라면 다음 코드는 에러가 나야할 것이다. foo(); function foo(){console.log(1)} 코드는 크게 선언문과 실행문으로 나누어 볼 수 있다. 선언문은 변수, 함수 등에 대한 식별자 이름을 만드는 것이고 ( const a, function foo() {} ) 실행문은 선언된 것들을 가지고 사용하는 부분으로 볼 수 있다. (console.log(a), foo()). 결국, 자바스크립트 파일은 선언문과 실행문의 묶음이다. 이를 실행하는 규칙을 방식이 자바스크립트에서는 실행 컨텍스트라는 방식으로 되어있다. 실행 컨텍스트는 세 가지로 나뉜다. Global Execution Context: 함수.. 2021. 5. 2. 비동기, Promise JS로 개발이 어느 정도 되면 비동기 코드들이 사용된다. 비동기란 get('naver.com') 같은 것을 하는 코드가 있을 때 요청을 날리고 다음 코드 실행으로 넘어가는 방식이다. console.log("hello") get('naver.com') console.log('bye') 라는 세 줄의 코드가 있을 때 get에 대한 응답이 날라오기 까지 5분이 걸린다고 해보자. 만약 get의 응답이 날라오기 전까지 다음 라인을 실행하지 못한다면 'bye'가 5분 뒤에 콘솔에 찍힐 것이다. get의 응답을 받는 것이 이후 코드에 선행되어야 하지 않는다면 get의 응답이 오기 전까지 기다리느 것이 아니라 이후 코드를 실행하면 될 것이다. 요청을 날리고 -> 'bye'를 찍고 -> 요청이 5분 뒤에 응답이 올 것이.. 2020. 11. 8. scope ES5까지는 global scope와 function scope만 사용되었다. scope란 변수의 사용범위이다. 변수를 선언하면 어떤 범위에서 사용할 수 있는가에 대한 규칙이다. global scope 부분에서 선언한 것이라면 해당 파일 어디에서든 사용할 수 있다. function scope부분에서 선언한 것이라면 해당 function 안에서는 어디서든 사용할 수 있다. 아래의 코드에서 b는 코드 어디에서든 사용 가능하다. 여기서 어디에서든 이라는 것은 작업하는 js파일 어느 줄에서든 사용가능하다는 뜻이다. c는 fun 함수 안이라면 어디서든 사용 가능하다. fun(){ ~~ } 에서 ~~ 부분 어디든 가능하다. var b = 1; function fun(){ var c = 2; ...end } ...e.. 2020. 6. 29. 이전 1 2 3 4 ··· 7 다음
