정보실

웹학교

정보실

javascript JavaScript 개발자 콘솔을 사용하는 방법 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해


JavaScript 개발자 콘솔을 사용하는 방법 


소개 


최신 브라우저에는 JavaScript 및 기타 웹 기술과 작동하도록 개발 도구가 내장되어 있습니다. 이러한 도구에는 쉘 인터페이스와 유사한 콘솔과 DOM 검사, 네트워크 활동 분석 및 분석 도구가 포함됩니다.


콘솔을 사용하면 JavaScript 개발 프로세스의 일부로 정보를 기록하고 페이지 컨텍스트 내에서 JavaScript 표현식을 수행하여 웹 페이지와 상호 작용할 수 있습니다. 기본적으로 콘솔은 필요할 때 JavaScript를 작성, 관리 및 모니터링 할 수 있는 기능을 제공합니다.


이 학습서에서는 브라우저 컨텍스트 내에서 JavaScript로 콘솔을 사용하는 방법을 살펴보고 웹 개발 프로세스의 일부로 사용할 수 있는 다른 내장 개발 도구에 대한 개요를 제공합니다.


https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console 


브라우저에서 콘솔 작업 


표준 기반 HTML 및 XHTML을 지원하는 대부분의 최신 웹 브라우저는 터미널 쉘과 유사한 인터페이스에서 JavaScript로 작업 할 수 있는 개발자 콘솔에 대한 액세스를 제공합니다. Firefox 및 Chrome에서 콘솔에 액세스하는 방법을 살펴 보겠습니다.


Firefox 


FireFox에서 웹 콘솔을 열려면 주소 표시 줄 옆 오른쪽 상단에 있는 ☰ 메뉴로 이동하십시오.


거기에서 공구 모양 아이콘으로 표시된 개발자 버튼을 클릭하면 웹 개발자 메뉴가 열립니다. 열린 상태에서 웹 콘솔 메뉴 항목을 클릭하십시오.


Firefox Web Console Menu Item 


이렇게 하면 브라우저 창의 맨 아래에 트레이가 열립니다.


Firefox Web Console Tray Item 

또한 맥 OS에서 키보드 단축키 Ctrl + Shift + K 리눅스와 윈도우에서, 또는 COMMAND + OPTION + K와 웹 콘솔에 입력 할 수 있습니다.


이제 콘솔에 액세스 했으므로 JavaScript로 콘솔에서 작업을 시작할 수 있습니다.


Chrome 


Chrome에서 자바 스크립트 콘솔을 열려면 브라우저 창의 오른쪽 상단에 있는 3 개의 세로 점으로 표시되는 메뉴로 이동할 수 있습니다. 여기에서 추가 도구를 선택한 다음 개발자 도구를 선택할 수 있습니다.


Chrome Developer Tools Menu Item 


JavaScript 메뉴가 강조 표시되지 않은 경우 상단 메뉴 표시 줄에서 콘솔을 클릭하여 JavaScript 콘솔을 표시 할 수 있는 패널이 열립니다.


Chrome Developer Tools Menu Item 


Linux 또는 Windows에서는 키보드 단축키 CTRL + SHIFT + J 또는 macOS에서는 COMMAND + OPTION + J를 사용하여 JavaScript 콘솔에 바로 들어갈 수 있습니다. 그러면 콘솔에 즉시 초점이 맞춰집니다.


이제 콘솔에 액세스 했으므로 JavaScript로 콘솔에서 작업을 시작할 수 있습니다.


콘솔에서 작업 


콘솔 내에서 JavaScript 코드를 입력 할 수 있습니다.


Hello, World!라는 문자열을 출력하는 경고부터 시작하겠습니다.


alert("Hello, World!"); 


JavaScript 라인 다음에 ENTER 키를 누르면 브라우저에 다음과 같은 경고 팝업이 표시됩니다.


JavaScript Console Alert Example 


콘솔은 또한 식 평가 결과를 인쇄하는데,식이 명시 적으로 무언가를 반환하지 않으면 undefined로 표시됩니다.


계속 클릭 해야 하는 팝업 경고가 아닌 console.log를 사용하여 콘솔에 로깅하여 JavaScript로 작업 할 수 있습니다.


Hello, World!를 인쇄하려면 문자열을 입력하면 콘솔에 다음을 입력 할 수 있습니다.


console.log("Hello, World!"); 


콘솔 내에서 다음과 같은 결과가 나타납니다.


console.log(2 + 6); 


Output
8


좀 더 복잡한 수학을 시도 할 수도 있습니다.


console.log(34348.2342343403285953845 * 4310.23409128534); 


Output
148048930.17230788

또한 변수를 사용하여 여러 줄로 작업 할 수 있습니다.


  • let d = new Date();
  • console.log("Today's date is " + d);
Output
Today's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)

콘솔을 통해 전달 된 명령을 수정해야 하는 경우 키보드에서 위쪽 화살표 ↑ 키를 입력하여 이전 명령을 검색 할 수 있습니다. 그러면 명령을 편집하고 다시 보낼 수 있습니다.


JavaScript 콘솔은 터미널 쉘 인터페이스와 유사한 환경을 사용할 수 있도록 하여 JavaScript 코드를 실시간으로 시험 할 수 있는 공간을 제공합니다.


HTML 파일로 작업하기 


콘솔에서 HTML 파일 또는 동적으로 렌더링 된 페이지의 컨텍스트 내에서 작업 할 수도 있습니다. 이를 통해 기존 HTML, CSS 및 JavaScript 컨텍스트 내에서 JavaScript 코드를 실험 할 수 있습니다.


콘솔을 사용하여 페이지를 수정 한 후 페이지를 다시 로드하면 문서를 수정하기 전에 상태로 돌아가므로 다른 곳에 유지하려는 변경 사항을 저장해야 합니다.


콘솔을 사용하여 수정하는 방법을 이해하기 위해 다음 index.html 파일과 같은 빈 HTML 문서를 살펴 보겠습니다.


<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

위의 HTML 파일을 저장하고 선택한 브라우저에 로드 하면 페이지 제목이 오늘 날짜 인 빈 페이지가 표시됩니다.


그런 다음 콘솔을 열고 JavaScript로 작업하여 페이지를 수정할 수 있습니다. 먼저 JavaScript를 사용하여 HTML에 제목을 삽입합니다.


  • let d = new Date();
  • document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

콘솔에서 다음과 같은 결과가 나타납니다.


Output
"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"

이 시점에서 페이지는 다음과 유사하게 나타납니다.


JavaScript Console Plain Date Example 


또한 배경색과 같은 페이지 스타일을 수정할 수도 있습니다.


document.body.style.backgroundColor = "lightblue"; 


Output
"lightblue"

페이지의 텍스트 색상뿐만 아니라


document.body.style.color = "white"; 


Output
"white"

이제 페이지가 다음과 같이 보일 것입니다.


JavaScript Console Style Date Example 


여기에서 <p> 단락 요소를 만들 수 있습니다 :


let p = document.createElement("P"); 


이 요소를 만든 다음 단락에 추가 할 수 있는 텍스트 노드를 만들 수 있습니다.


let t = document.createTextNode("Paragraph text."); 


변수 p에 텍스트 노드를 추가하여 텍스트 노드를 추가합니다.


p.appendChild(t); 


마지막으로 <p> 단락과 p를 추가하고 텍스트 노드를 문서에 추가하십시오.


document.body.appendChild(p); 


이 단계를 완료하면 HTML 페이지 index.html은 다음과 유사합니다.


JavaScript Console Date with Paragraph Example 


콘솔은 HTML 페이지 수정을 실험 할 수있는 공간을 제공하지만 콘솔에서 작업을 수행 할 때 HTML 문서를 변경하지 않음을 명심해야 합니다. 이 경우 페이지를 다시 로드 하면 빈 문서로 돌아갑니다.


다른 개발 도구 이해 


사용하는 브라우저의 개발 도구에 따라 다른 도구를 사용하여 웹 개발 워크 플로에 도움을 줄 수 있습니다. 이러한 도구 중 몇 가지를 살펴 보겠습니다.


DOM — 문서 객체 모델 


웹 페이지가 로드 될 때마다 브라우저는 페이지의 문서 객체 모델 또는 DOM을 만듭니다.


DOM은 객체의 트리이며 계층적 뷰 내에 HTML 요소를 보여줍니다. DOM 트리는 Firefox의 Inspector 패널 또는 Chrome의 Elements 패널에서 볼 수 있습니다.


이 도구를 사용하면 DOM 요소를 검사 및 편집 할 수 있으며 특정 페이지의 측면과 관련된 HTML을 식별 할 수도 있습니다. DOM은 텍스트 스니펫 또는 이미지에 ID 속성이 있는지 여부를 알려주고 해당 속성 값이 무엇인지 결정할 수 있습니다.


위에서 수정한 페이지에는 페이지를 다시 로드 하기 전에 이와 유사한 DOM 보기가 있습니다.


JavaScript DOM Example 


또한 측면 패널이나 DOM 패널 아래에 CSS 스타일이 표시되어 HTML 문서 내에서 또는 CSS 스타일 시트를 통해 어떤 스타일이 사용되고 있는지 확인할 수 있습니다. 위의 샘플 페이지는 Firefox Inspector에서 다음과 같이 표시됩니다.


JavaScript CSS Example 


DOM 노드를 실시간 편집하려면 선택한 요소를 두 번 클릭하고 변경하십시오. 예를 들어 <h1> 태그를 수정하여 <h2> 태그로 만들 수 있습니다.


콘솔과 마찬가지로 페이지를 다시 로드하면 HTML 문서의 저장된 상태로 돌아갑니다.


Network 


브라우저 내장 개발 도구의 네트워크 탭은 네트워크 요청을 모니터링하고 기록 할 수 있습니다. 이 탭에는 페이지를 로드 할 때, 각 요청에 걸리는 시간 및 각 요청에 대한 세부 정보가 포함 된 브라우저의 네트워크 요청이 표시됩니다. 페이지 로드 성능을 최적화하고 요청을 디버그 하는 데 사용할 수 있습니다.


JavaScript 콘솔과 함께 네트워크 탭을 사용할 수 있습니다. 즉, 콘솔을 사용하여 페이지 디버깅을 시작한 다음 네트워크 탭으로 전환하여 페이지를 다시 로드 하지 않고 네트워크 활동을 볼 수 있습니다.


네트워크 탭을 사용하는 방법에 대해 자세히 알아 보려면 Firefox의 네트워크 모니터 작업 또는 Chrome의 DevTools를 사용하여 네트워크 성능 분석을 시작하는 방법에 대해 읽으십시오.


반응형 디자인 


웹 사이트는 반응이 좋으면 휴대 전화, 태블릿, 데스크톱 및 랩톱과 같은 다양한 장치에서 제대로 표시되고 작동하도록 설계 및 개발되었습니다. 여러 장치에서 개발할 때 화면 크기, 픽셀 밀도 및 지원 터치가 고려해야 할 요소입니다. 웹 개발자는 액세스 가능한 장치에 관계없이 사람들이 웹 사이트를 완벽하게 사용할 수 있도록 반응 형 디자인 원칙을 염두에 두어야 합니다.


Firefox와 Chrome은 모두 웹 사이트와 앱을 만들고 개발할 때 반응 형 디자인 원칙에주의를 기울일 수 있는 모드를 제공합니다. 이러한 모드는 개발 프로세스의 일부로 조사 및 분석 할 수 있는 다양한 장치를 에뮬레이션 합니다.


Firefox의 반응형 디자인 모드 또는 Chrome의 장치 모드에 대해 자세히 읽어보고 이러한 도구를 활용하여 웹 기술에 보다 공평하게 액세스하는 방법에 대해 자세히 알아보십시오.


결론 


이 학습서에서는 최신 웹 브라우저에서 JavaScript 콘솔을 사용하는 방법에 대한 개요와 워크 플로우에서 사용할 수 있는 다른 개발 도구에 대한 정보를 제공했습니다.


JavaScript에 대해 자세히 알아 보려면 데이터 유형 또는 jQuery 또는 D3 라이브러리에 대해 읽으십시오.




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 65회 ]  작성일19-10-26 18:40

웹학교