JavaScript 개발자 콘솔 사용 방법

JavaScript

소개

현대 브라우저에는 JavaScript 및 기타 웹 기술과 함께 작동하는 개발 도구가 내장되어 있습니다. 이 도구에는 쉘 인터페이스와 유사한 콘솔과 함께 DOM을 검사하고 디버그하며 네트워크 활동을 분석하는 도구가 포함되어 있습니다.

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

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

참고:이 자습서를 따라 진행하는 동안 브라우저와 콘솔이 이미지의 예제와 다른 모습을 보일 수 있습니다. 브라우저는 자주 업데이트되며 새로운 도구 및 새로운 시각적 스타일이 포함될 수 있습니다. 이러한 업데이트는 브라우저에서 콘솔을 사용하는 데 영향을 미치지 않아야 합니다.

브라우저에서 콘솔 사용하기

가장 현대적인 웹 브라우저 중 일부는 표준 기반 HTML 및 XHTML을 지원하며 JavaScript를 터미널 쉘과 유사한 인터페이스에서 작업할 수 있는 개발자 콘솔에 액세스할 수 있습니다. 이 섹션에서는 Firefox와 Chrome에서 콘솔에 액세스하는 방법에 대해 안내합니다.

Firefox

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

그런 다음 더 많은 도구를 선택하십시오. 그 후에 열린 상태에서 웹 개발자 도구 항목을 클릭하십시오.

이렇게 하면 브라우저 창 하단에 서랍이 열립니다:

리눅스와 Windows에서는 CTRL + SHIFT + K 키보드 단축키를 사용하여 웹 콘솔로 들어갈 수도 있으며, macOS에서는 COMMAND + OPTION + K를 사용할 수 있습니다.

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

Chrome

크롬에서 JavaScript 콘솔을 열려면 먼저 브라우저 창의 오른쪽 상단에 있는 세 개의 세로 점으로 표시된 메뉴로 이동합니다. 거기서 더 많은 도구를 선택한 다음 개발자 도구를 선택하세요.

이렇게 하면 새로운 패널이 열리고, 이미 하이라이트되어 있지 않은 경우 상단 메뉴 바에서 콘솔을 클릭하여 JavaScript 콘솔을 불러올 수 있습니다.

또한 리눅스 또는 윈도우에서는 키보드 단축키 CTRL + SHIFT + J를 사용하거나 macOS에서는 COMMAND + OPTION + J를 사용하여 바로 콘솔로 이동할 수도 있습니다.

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

콘솔에서 작업하기

콘솔에서 JavaScript 코드를 입력하고 실행할 수 있습니다.

Hello, World! 문자열을 출력하는 알림으로 시작하세요:

alert("Hello, World!");

JavaScript 줄 뒤에 ENTER 키를 누르면 브라우저에 경고 팝업이 표시됩니다:

식을 평가한 결과도 콘솔에 출력되며, 표현식이 명시적으로 반환하지 않을 때는 undefined로 표시됩니다.

팝업 알림을 클릭해서 닫는 대신에, JavaScript를 사용하여 콘솔에 로그를 남길 수 있습니다.

“Hello, World!” 문자열을 출력하려면 콘솔에 다음을 입력하십시오:

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

콘솔에서 다음 출력을 받게 됩니다:

OutputHello, World!

콘솔에서 수학 연산을 수행할 수도 있습니다:

console.log(2 + 6);

Output8

좀 더 복잡한 수학도 시도해볼 수 있습니다:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output148048930.17230788

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

let today = new Date();
console.log("Today's date is " + today);

OutputToday's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

콘솔에서 전달한 명령을 수정해야 할 경우, 키보드의 위쪽 화살표 (↑) 키를 입력하여 이전 명령을 검색할 수 있습니다. 이렇게 하면 명령을 편집하고 다시 보낼 수 있습니다.

JavaScript 콘솔은 터미널 셸 인터페이스와 비슷한 환경을 사용하여 실시간으로 JavaScript 코드를 시험해 볼 수 있는 공간을 제공합니다.

HTML 파일과 작업하기

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

콘솔에서 문서를 수정한 후 페이지를 다시로드하면, 수정 전의 상태로 돌아갑니다. 유지하려는 변경 사항은 다른 곳에 저장해 두는 것이 좋습니다.

HTML 문서를 가져와서 콘솔을 사용하여 어떻게 수정하는지 이해합니다. 좋아하는 텍스트 편집기에서 index.html 파일을 만들고 다음과 같은 HTML 줄을 추가합니다:

index.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 파일을 저장하고 선택한 브라우저에로드하면 제목이 Today's Date인 빈 페이지가 브라우저에 렌더링됩니다.

콘솔을 열고 JavaScript를 사용하여 페이지를 수정하기 시작하십시오. JavaScript를 사용하여 HTML에 제목을 삽입하는 것부터 시작합니다.

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

콘솔에 다음 출력이 표시됩니다:

Output"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

페이지는 다음과 유사해야합니다:

배경색과 같은 페이지의 스타일을 수정할 수 있습니다:

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

Output"lightblue"

또한 페이지의 텍스트 색상을 수정할 수 있습니다:

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

Output"white"

이제 페이지는 다음과 유사한 내용을 드러내야합니다:

여기서 <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에 다음 요소가 포함됩니다:

콘솔은 HTML 페이지를 수정하는 실험 공간을 제공하지만, 콘솔에서 작업할 때 HTML 문서 자체를 변경하지 않는 것이 중요합니다. 페이지를 다시로드하면 빈 문서로 돌아갑니다.

다른 개발 도구 이해하기

사용하는 브라우저의 개발 도구에 따라 웹 개발 워크플로우를 지원하는 다른 도구를 사용할 수 있습니다.

DOM — 문서 객체 모델

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

DOM은 객체 트리이며, 계층적으로 HTML 요소를 표시합니다. DOM 트리는 Firefox의 Inspector 패널이나 Chrome의 Elements 패널에서 확인할 수 있습니다.

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

위에서 수정한 페이지는 페이지를 다시로드하기 전에 이와 유사한 DOM 뷰를 가지게 될 것입니다:

또한 CSS 스타일은 DOM 패널 아래나 옆에 표시되어 HTML 문서 내에서 또는 CSS 스타일 시트를 통해 사용되는 스타일을 볼 수 있습니다. 예를 들어, Firefox Inspector에서 샘플 페이지의 본문 스타일에 어떤 내용이 포함되어 있는지 주목해 보세요:

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

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

네트워크

브라우저의 내장 개발 도구의 네트워크 탭은 네트워크 요청을 모니터링하고 기록할 수 있습니다. 이 탭은 브라우저가 페이지를 로드할 때 발생하는 네트워크 요청을 보여주며 각 요청이 얼마나 오래 걸리는지에 대한 정보를 제공합니다. 이를 사용하여 페이지 로드 성능을 최적화하고 요청 문제를 디버그할 수 있습니다.

네트워크 탭은 JavaScript 콘솔과 함께 사용할 수 있습니다. 다시 말해, 콘솔로 페이지 디버깅을 시작한 다음 페이지를 다시로드하지 않고도 네트워크 활동을 확인하려면 네트워크 탭으로 전환할 수 있습니다.

네트워크 탭 사용 방법에 대해 더 알아보려면 파이어폭스 네트워크 모니터 사용하기 또는 크롬 개발자 도구로 네트워크 성능 분석 시작하기를 읽어보세요.

웹사이트가 반응형인 경우, 모바일 전화기, 태블릿, 데스크톱 및 노트북과 같은 다양한 장치에서 외관과 기능이 올바르게 표시되고 작동하도록 디자인 및 개발됩니다. 화면 크기, 픽셀 밀도 및 터치 지원은 장치 간 개발 시 고려해야 할 요소입니다. 웹 개발자로서 반응형 디자인 원칙을 염두에 두어야 합니다. 이렇게 하면 사람들이 액세스하는 장치에 관계없이 웹사이트에 완전히 접근할 수 있습니다.

파이어폭스와 크롬은 웹을 위한 사이트 및 앱을 만들고 개발하는 과정에서 반응형 디자인 원칙에 충실하도록하는 모드를 제공합니다. 이 모드는 개발 프로세스의 일환으로 조사하고 분석할 수 있는 다양한 장치를 에뮬레이트합니다.

파이어폭스의 반응형 디자인 모드 또는 크롬의 장치 모드에 대해 더 알아보려면 이 도구들을 활용하여 웹 기술에 대한 보다 공정한 접근을 보장하는 방법에 대해 알아보세요.

결론

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

JavaScript에 대해 더 알아보려면 데이터 유형 또는 jQuery 또는 D3 라이브러리에 대해 읽어보세요.

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