연습 - JavaScript를 사용하여 대화형 작업 추가

  • 10분

JavaScript(또는 ECMAScript)는 대화형 작업을 웹 페이지에 추가하는 데 도움이 되는 프로그래밍 언어입니다.

예를 들어, JavaScript를 사용하여 사용자가 단추를 선택할 때 발생하는 동작(팝업 창 열기 등)을 정의할 수 있습니다. JavaScript를 사용하면 웹 페이지에서 콘텐츠를 다시 로드하지 않고도 추가하거나 제거할 수 있습니다.

이 단원에서는 웹 페이지에 예제 JavaScript 파일을 설정합니다. 여기에서 밝은 테마와 어두운 테마 간에 전환하는 단추를 만듭니다. 그런 다음, 실제 테마 전환을 수행하는 JavaScript 코드에 단추를 연결합니다. 마지막으로, 브라우저의 개발자 도구를 사용하여 완성한 프로젝트를 확인합니다.

CSS와 마찬가지로 JavaScript를 HTML 파일에 직접 추가할 수 있지만 별도의 파일에 JavaScript를 저장하는 것이 가장 좋습니다. JavaScript 코드를 별도 파일에 추가하면 여러 웹 페이지에서 해당 코드를 더 쉽게 재사용할 수 있습니다. 예를 들어 웹 페이지 본문 내 아무 곳에나 다음 코드를 추가하여 팝업 경고를 만들 수 있습니다.

<script>alert('Hello World')</script>

하지만 JavaScript 코드는 사용자 지정 기능이 필요한 모든 파일에 연결할 수 있는 별도의 파일에 추가하는 것이 좋습니다.

HTML 스크립트 태그 <script>을(를) 사용하면 외부 JavaScript 파일에 연결할 수 있으며, 이 연습에서는 이 방법으로 웹앱을 구성합니다.

  1. Visual Studio Code에서 index.html 파일을 엽니다.

  2. 닫는 </body> 요소를 찾아 그 위의 새 줄에 커서를 놓습니다. script:src을(를) 입력한 다음, Enter를 선택합니다. <script> 요소에 대한 여는 태그와 닫는 태그가 코드에 추가됩니다.

  3. 다음 예제와 같이 <script> 요소를 수정하여 app.js 파일을 로드합니다. 목록의 닫는 </ul> 요소 뒤에 위치하는지 확인합니다.

    ...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

<script> 요소는 <head> 내에 또는 <body>의 다른 위치에 배치할 수 있습니다. 그러나 <script> 요소를 <body> 섹션 끝에 배치하면 스크립트를 로드하기 전에 먼저 모든 페이지 콘텐츠를 화면에 표시할 수 있습니다.

내결함성 추가

  1. HTML 파일에서는 <noscript> 요소를 닫는 </script> 태그 뒤에 추가합니다. 이 요소는 JavaScript가 비활성화된 경우 메시지를 표시하는 데 사용할 수 있습니다.

    <script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>

    <noscript> 요소를 추가하는 것은 ‘내결함성’ 또는 ‘점진적 저하’의 한 가지 예입니다. <noscript> 요소를 사용하면 코드가 특정 기능이 지원되지 않거나 사용할 수 없는 경우를 검색하고 계획할 수 있습니다.

strict 모드 설정

JavaScript는 쉽게 학습하도록 디자인되었으며 개발자의 특정 실수를 허용합니다. 예를 들어, 철자가 틀린 변수가 사용될 때 JavaScript는 오류를 throw하지 않고 대신 새 전역 변수를 만듭니다. JavaScript를 배우기 시작할 때 오류가 적으면 편리합니다. 하지만 그렇게 하면 브라우저 최적화가 어렵고 디버그하기 어려운 코드를 작성하게 될 수 있습니다.

실수할 때 더 유용한 오류를 발생시키려면 엄격한 모드로 전환합니다.

  • Visual Studio Code에서 app.js 파일을 열고 다음을 입력합니다.

    'use strict';

단추 추가

사용자가 웹 페이지에서 밝은 테마와 어두운 테마 사이를 전환할 수 있도록 하는 방법이 필요합니다. 이 연습에서는 HTML <button> 요소를 사용하여 해당 기능을 구현합니다.

  1. HTML 파일(index.html)에서 <button> 요소를 추가합니다. 단추를 <div> 요소 안에 넣고 목록(</ul>) 끝 바로 뒤에 추가합니다.

    ...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...

    이 예제의 <button> 요소에는 CSS 스타일을 적용하는 데 사용할 class 특성이 있습니다.

  2. Ctrl+S(Windows) 또는 Command+S(macOS) 바로 가기 키를 사용하여 HTML 파일에 변경 내용을 저장합니다.

  3. CSS 파일(main.css)에서 .btn 클래스 선택기를 사용하여 HTML 단추에 대한 새 규칙을 추가합니다. 단추 색을 일반 밝은 테마 또는 어두운 테마 색과 다르게 만들려면 이 규칙에서 color 및 background-color 속성을 설정합니다. 페이지가 표시될 때 이러한 .btn 속성은 CSS 파일의 body 규칙에 설정된 기본 속성을 재정의합니다.

    .btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  4. 다음으로, .btn 규칙을 수정하여 단추의 크기, 형태, 모양, 배치에 대한 몇 가지 스타일을 추가합니다. 다음 CSS는 페이지 머리글 오른쪽에 원형 단추를 만듭니다.

    .btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  5. 다음으로 밝은 테마와 어두운 테마에 대한 CSS를 업데이트합니다. 새로운 변수 --btnBg 및 --btnFontColor를 정의하여 단추 관련 배경색 및 글꼴 색을 지정합니다.

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

  6. Ctrl+S(Windows) 또는 Command+S(macOS) 바로 가기 키를 사용하여 CSS 파일에 변경 내용을 저장합니다.

이벤트 처리기 추가

단추를 선택했을 때 특정 작업을 수행하도록 하려면 JavaScript 파일에 이벤트 처리기가 필요합니다. 이벤트 처리기는 페이지에서 이벤트가 발생했을 때 JavaScript 함수를 실행하는 방법입니다. 단추의 경우 click 이벤트에 대한 이벤트 처리기를 추가하겠습니다. 이벤트 처리기 함수는 click 이벤트가 발생할 때 실행됩니다.

이벤트 처리기를 추가하려면 먼저 단추 요소에 대한 참조가 필요합니다.

  1. JavaScript 파일(app.js)에서 document.querySelector을(를) 사용하여 단추 참조를 가져옵니다.

    const switcher = document.querySelector('.btn');

    document.querySelector 함수는 CSS 파일에서 사용한 것과 같은 CSS 선택기를 사용합니다. switcher는 이제 페이지의 단추에 대한 참조입니다.

  2. 다음으로, click 이벤트에 대한 이벤트 처리기를 추가합니다. 다음 코드에서는 click 이벤트에 대한 수신기를 추가하고 click 이벤트가 발생할 때 브라우저가 실행할 이벤트 처리기 함수를 정의합니다.

    switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});

이전 코드에서는 toggle 메서드를 사용하여 <body> 요소의 class 특성을 수정했습니다. 이 메서드는 light-theme 및 dark-theme 클래스를 자동으로 추가하거나 제거합니다. 이 코드는 클릭할 때 밝은 스타일 대신 어두운 스타일을 적용한 다음, 다시 클릭하면 어두운 스타일 대신 밝은 스타일을 적용합니다.

그러나 올바른 테마를 표시하도록 단추 레이블도 업데이트해야 하므로 if 문을 추가하여 현재 테마를 확인하고 단추 레이블을 업데이트해야 합니다.

이벤트 처리기가 추가된 JavaScript 코드는 다음과 같습니다.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

둘 이상의 단어가 있는 변수 이름(예: 변수 className)에 카멜 대소문자를 사용하는 것이 JavaScript 규칙입니다.

콘솔 메시지

웹 개발자는 웹 페이지에는 표시되지 않지만 콘솔 탭의 개발자 도구에서 읽을 수 있는 숨겨진 메시지를 만들 수 있습니다. 콘솔 메시지를 사용하면 코드 결과를 확인하는 데 유용합니다.

JavaScript 파일에서 이벤트 수신기 내, if 문 뒤에 console.log에 대한 호출을 추가합니다.

이렇게 변경하면 전체 JavaScript 코드가 다음과 같이 보이게 됩니다.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Visual Studio Code의 JavaScript 파일에 있는 경우 log을(를) 입력한 후 Enter 키를 눌러 console.log에 대한 자동 완성을 사용할 수 있습니다.

텍스트 주위에 작은따옴표 또는 큰따옴표가 있는 텍스트 문자열을 정의할 수 있습니다.

브라우저에서 열기

  1. 미리 보려면 index.html을 선택하고 기본 브라우저에서 열기를 선택하거나 F5 키를 눌러 동일한 브라우저 탭을 다시 로드합니다.

    Screenshot of the website showing the new button.

  2. 새 어둡게 단추를 선택하여 어두운 테마로 전환합니다.

    Screenshot of the website after switching to dark theme.

  3. 모든 것이 올바르게 표시되고 예상 대로 작동하는지 확인합니다. 그렇지 않은 경우 이전 단계를 검토하여 누락된 내용이 있는지 확인해야 합니다.

개발자 도구에서 페이지 확인

  1. 개발자 도구를 엽니다.

    • 마우스 오른쪽 단추를 클릭하고 검사를 선택하거나, F12 바로 가기 키를 사용합니다. 또는 Windows 또는 Linux에서 Ctrl+Shift+I 바로 가기를 사용하고, macOS에서 Option+Command+I를 사용합니다.

  2. 요소 탭을 선택하고 요소 탭 내에서 스타일 탭을 선택합니다.

  3. <body> 요소를 선택합니다. 스타일 탭에서 적용된 테마를 확인합니다. 현재 테마가 어두운 테마인 경우 dark-theme 스타일이 적용됩니다.

    어두운 테마가 선택되어 있는지 확인합니다.

  4. 콘솔 탭을 선택하여 console.log 메시지, current class name: dark-theme을 확인합니다.

Screenshot of the browser window with the website and the Developer Tools console open showing the console message.

콘솔을 사용하여 JavaScript 코드에서 흥미로운 인사이트를 얻을 수 있습니다. 더 많은 콘솔 메시지를 추가하여 코드의 어떤 부분이 실행되고 있는지 이해하고 다른 변수의 현재 값을 알 수 있습니다.

콘솔에 관한 자세한 내용은 콘솔 개요 문서를 확인하세요.