지난 글에 이어 알아두면 디버깅에 편리함을 더해주는 console 객체의 함수들에 대해 정리해 보려 한다.   info(), warn(), error()이들은 console.log()와 기능이 동일하며 각각 레벨로 구분된 로그 정도로 생각해도 무방할 듯 하다. console.info(): 특정한 정보를 출력할 때 사용.console.warn(): 심각한 에러는 아니고 경고 단계에서 사용.console.error(): 심각한 에러(예상하지 못한 에러, 시스템 에러)에 사용.  이들을 사용하면 기본적으로 직관적인 스타일이 적용된 로그를 볼 수 있으며 콘솔 사이드바에서 각각의 레벨별 확인도 가능하다. cf) 브라우저마다 출력되는 스타일은 약간 다르다는 점에 유의하자. 그 예로 파이어폭스에서는 info로 출력한..

Console 자바스크립트를 처음 시작할 때부터 우리와 함께한 Console.브라우저들은 클라이언트 측의 개발을 보조하기 위해 개발자 도구를 지원하고 있는데, 이 개발자 도구를 조작할 수 있도록 하는 기능들을 제공하는 것이 바로 console 객체이다.     console은 자바스크립트에서 디버깅을 위해 존재하는 객체로 console 내부의 함수를 이용하면 개발자 도구의 콘솔창에 여러 정보들을 출력할 수 있다. console 객체 내부에는 이렇게나 많은 함수들이 있지만 이 글에서는 알아두면 디버깅에 편리함을 더해주는 것들을 위주로 소개해 보려 한다.    console.log()누구나 자바스크립트 코드의 결과 값을 출력하거나 테스트를 위해 console.log()를 정말 많이 써봤을 것이다. 역시나 가..

jQuery. 한 때는 웹 프론트엔드 개발에서 필수적으로 여겨지던 자바스크립트 라이브러리다. 2006년 미국의 SW 개발자 존 레식에 의해 "write less, do more."라는 모토로 출시된 제이쿼리는 이후 DOM의 조작, 이벤트 처리, 애니메이션 제공 등을 간편화 하여 웹 개발을 단순화하는 데 혁신적인 기여를 했다. 당시 순수 자바스크립트만으로는 브라우저 간의 호환성 문제와 복잡한 DOM 조작을 처리하는 것이 상당히 어려웠기 때문. 제이쿼리는 이러한 문제를 해결해 주었고 개발자들 사이에서 빠르게 인기를 얻었다. 제이쿼리는 다음과 같은 특장점을 가지고 있다. 웹 페이지상에서 Element를 쉽게 찾고 조작할 수 있다.거의 모든 웹 브라우저에 대응할 정도로 호환성이 뛰어나다.네트워크, 애니메이션 등..

eval은 evaluate의 약자로 문자열이 코드라고 가정하고 평가해서 실행한다는 의미를 가지고 있다. 그 의미대로 문자열로 된 표현식을 파라미터로 받아 코드로 해석한 후 실행하는 역할을 한다. 따라서 내장 함수 eval()을 사용하면 문자열 형식으로 표현된 코드를 실행할 수 있다. let code = 'console.log("Hello World")';eval(code); // Hello Worldlet value = eval('1+1');console.log(value); // 1let value2 = eval('let i=0; ++i');console.log(value2) // 1  value 의 예와 같이 길이가 긴 문자열이 코드가 될 수 있는데 여기에는 줄바꿈, 함수 선언, 변수 등이 포함될 수..

여기 우리가 지금부터 접근하려 하는 HTML 요소가 하나 있다. Javascript와 jQuery에서는 DOM에 접근하기 위해 선택자(selector)를 사용한다. 그리고 이 요소에 접근하기 위한 Javascript와 jQuery의 선택자는 각각 아래와 같다.// 순수 Javascript 방식let jsCode = document.getelementById('myDiv');// jQuery 방식let jqCode = $('#myDiv'); 이 둘은 같은 요소에 접근하지만 다른 값을 반환한다. 위 코드를 각각 콘솔창에 출력해 보면, Javascript 선택자는 HTML DOM 객체(element 요소)를 리턴하는 것에 비해, jQuery 선택자는 jQuery 객체를 리턴한다. 따라서 Javascript 선..

이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다. 사용자가 마우스나 키보드를 이용해 일으킬 수 있는 이벤트도 있고 브라우저 스스로 웹 페이지를 로딩하며 여러 이벤트를 발생하기도 한다.  자바스크립트에서 이벤트를 다룰 땐 이벤트 핸들러를 사용한다. 이벤트 핸들러란 어떤 이벤트가 발생했을 때 실행되는 함수를 말한다. 사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 일어날 것인지 정의해 주는 것이다.     클릭하세요! 여기 버튼이 하나 있다. 여기에 이벤트를 등록하는 방법에는 세 가지가 있다.   1. 인라인(inline) 방식 가장 고전적이면서..