학습 공간 개념 · 판단 · 실험

Frontend Performance Lab

JavaScript

JavaScript의 역할과 첫 실행

JavaScript는 값을 계산하고 사용자 행동에 따라 화면을 바꿉니다.

이럴 때 필요해요

화면의 버튼이 동작하는 코드를 읽기 전에 실행과 결과 확인부터 익힙니다.

어떻게 동작하나요?

HTML로 버튼을 표시하고 CSS로 꾸밀 수 있습니다. 버튼을 눌렀을 때 수량을 늘리는 동작은 JavaScript로 작성할 수 있습니다.

브라우저 개발자 도구의 Console에서 짧은 식을 실행할 수 있습니다. console.log는 결과를 콘솔에 기록합니다. 페이지 본문의 글자를 자동으로 바꾸는 함수는 아닙니다.

아래 예제를 콘솔에서 실행하면 계산 결과가 나옵니다. 이후 결과를 이름에 저장하는 변수와 값을 바꾸는 방법을 배웁니다. 오류가 나면 메시지와 문제가 발생한 줄부터 살펴보세요.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.js
console.log(2 + 3); // 5
javascript · 읽기 전용1줄

2와 3의 합인 5를 콘솔에 기록합니다.

자주 헷갈리는 포인트

  • 콘솔 출력과 웹 페이지에 표시되는 내용은 다릅니다.
  • 예제의 // 뒤는 실행하지 않는 설명 주석입니다.

내 말로 설명해 보기

console.log(2 + 3)을 실행하면 페이지 본문의 글자가 바뀔까요?

생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.

예시 답변 확인

설명에 들어갈 핵심

  • JavaScript는 값을 계산하고 사용자 행동에 따라 화면을 바꿉니다.
  • 2와 3의 합인 5를 콘솔에 기록합니다.

예시 답변

콘솔에 5가 출력됩니다. 페이지 내용을 바꾸려면 이후에 배울 DOM 조작이나 React 화면 갱신이 필요합니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.

공식 참고 자료

← JavaScript