홈

인공지능, 그리고 교육

POSTS.

VIBE CODING.

STORY.

LIFE.

123

제목없음

VIBE CODING.

1-3 자바스크립트 이해

라이프오브파이

2025년 10월 27일8달 전

카테고리

바이브코딩

3장. 자바스크립트 이

- 웹페이지에 생명을 불어넣는 언어

정적인 화면에 '생명'을 넣는 일

HTML과 CSS로 완성된 웹페이지는 예쁘지만, 아직 '움직이지 않는 그림'에 불과합니다. 버튼을 눌러도 아무 일도 일어나지 않고, 입력창에 글자를 써도 반응이 없습니다. 이 상태는 마치 전원을 꺼둔 스마트폰 화면처럼 '멈춰 있는 세상'이죠.
그런데 버튼을 누르면 팝업이 열리고, 입력창에 문자를 치면 자동으로 추천 단어가 뜨는 그 순간—이 모든 마법을 담당하는 존재가 바로 자바스크립트(JavaScript) 입니다.

자바스크립트는 웹페이지에 '생명'을 불어넣는 언어입니다. HTML이 뼈대라면, CSS는 옷이고, 자바스크립트는 그 옷을 입고 움직이는 사람의 근육과 신경입니다.

웹의 무대 위, 배우는 자바스크립트

앞 장에서 살펴보았듯 브라우저는 하나의 건축물처럼 동작합니다. 그리고 그 위에 세 요소가 있다는 것도 함께 알아보았습니다.

•

HTML은 기본적인 집의 뼈대를 구축하고,

•

CSS는 인테리어를 담당하며,

•

JavaScript는 전기와 수도를 담당하죠.

예를 들어, HTML로 버튼을 하나 만들고, CSS로 색깔을 예쁘게 칠했다고 해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>좋아요 버튼 테스트</title>
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Pretendard",
          "Noto Sans KR", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #f5f5f5;
      }

      #likeButton {
        font-size: 1rem;
        padding: 12px 20px;
        border-radius: 8px;
        border: none;
        background-color: #ff4d6a;
        color: white;
        cursor: pointer;
      }

      #likeButton:hover {
        background-color: #e03f59;
      }
    </style>
  </head>
  <body>
    
    <!-- 버튼 영역 -->
    <button id="likeButton">좋아요 ❤️</button>
      
  </body>
</html>

 <!-- 버튼 영역 -->
    <button id="likeButton">좋아요 ❤️</button>

이 상태에서 브라우저는 위 버튼 영역의 코드를 해석해 그저 정적인 버튼을 보여줄 뿐입니다. 하지만 여기에 다음과 같은 자바스크립트 한 줄을 추가하면 이야기가 달라집니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>좋아요 버튼 테스트</title>
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Pretendard",
          "Noto Sans KR", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #f5f5f5;
      }

      #likeButton {
        font-size: 1rem;
        padding: 12px 20px;
        border-radius: 8px;
        border: none;
        background-color: #ff4d6a;
        color: white;
        cursor: pointer;
      }

      #likeButton:hover {
        background-color: #e03f59;
      }
    </style>
  </head>
  <body>
    <!-- 버튼 영역 -->
    <button id="likeButton">좋아요 ❤️</button>

    <!-- 자바스크립트 -->
    <script>
      document.getElementById("likeButton").addEventListener("click", () => {
          alert("좋아요를 눌렀습니다!");
        });
    </script>
      
  </body>
</html>

*html 파일을 생성한 뒤 위 내용을 붙여넣고 브라우저에서 실행해보세요.

위에서 추가된 자바스크립트 부분은 다음과 같습니다.

document.getElementById("likeButton").addEventListener("click", () => {
  alert("좋아요를 눌렀습니다!");
});

이 자바스크립트 덕분에 이제 버튼을 누르면 아래 이미지와 같이 "좋아요를 눌렀습니다!" 라는 알림이 뜨죠. 즉 자바스크립트 한 줄이 바로 '정적인 그림'을 '움직이는 이야기'로 바꿉니다.

변수 ― 기억을 담당하는 메모장

프로그래밍 언어의 가장 기본은 기억입니다. 어떤 값을 저장해두었다가 나중에 다시 꺼내 쓰는 것이죠. 자바스크립트에서는 이 역할을 변수(variable) 가 맡습니다. 따라서 변수는 브라우저 속의 작은 메모장이라고 생각하면 됩니다.

let count = 0;

이 문장은 "count라는 이름의 메모장에 0을 적어둬"라는 뜻입니다. 그리고 나중에 이렇게 쓸 수 있죠.

count = count + 1;

이제 메모장에는 1이 적히게 됩니다.

버튼을 누를 때마다 숫자가 올라가게 만들면, 간단한 '좋아요 카운터'를 만들 수도 있습니다.

let count = 0;

document.getElementById("likeButton").addEventListener("click", () => {
  count = count + 1;
  console.log("좋아요 수:", count);
});

이처럼 변수는 '상태(state)'를 기억하는 도구입니다. 이후 리액트 설명에서 배울 useState의 근본 원리도 결국 이 변수 개념에 기반해 있습니다.

함수 ― 행동을 정의하는 마법의 주문

변수가 '기억'을 담당한다면, 함수(function) 는 '행동'을 담당합니다. 함수는 일종의 '동작 묶음'입니다. 예를 들어, 버튼을 클릭할 때마다 실행될 동작을 함수로 만들어보죠.

function sayHello() {
  alert("안녕하세요!");
}

이제 이 함수를 버튼과 연결하면 됩니다.

document.getElementById("greetButton").addEventListener("click", sayHello);

이렇게 하면 버튼을 누를 때마다 sayHello() 함수가 실행되어 알림창이 뜹니다. 함수는 반복되는 행동을 한 번만 정의해두고 재활용할 수 있게 해줍니다. 즉, '동작의 재사용'을 가능하게 하는 핵심 개념입니다.

앞으로 우리가 사용할 리액트에서도 이같은 함수 개념을 확장하여 컴포넌트(component)를 생성하고 활용합니다.

이벤트 ― 세상과의 대화

자바스크립트는 사용자의 행동(이벤트) 에 반응합니다. 클릭, 입력, 스크롤, 마우스 이동, 키보드 입력 — 이런 모든 '행동'이 이벤트입니다.

예를 들어 이런 코드가 있습니다.

document.getElementById("nameInput").addEventListener("input", (e) => {
  console.log("입력 중:", e.target.value);
});

이 코드는 사용자가 이름 입력창에 타이핑할 때마다 브라우저 콘솔에 글자를 보여줍니다. 즉, 브라우저가 사용자의 행동을 감지하고, 자바스크립트가 거기에 반응하는 구조입니다. 이 구조를 좀 더 비유하자면, 자바스크립트는 귀를 가진 배우와 같습니다. 관객(사용자)이 어떤 행동을 하면, 그 소리를 듣고 바로 반응하죠.

DOM 조작 ― 화면의 요소를 직접 바꾸기

이제 자바스크립트의 진짜 힘을 보여줄 차례입니다. HTML로 만들어진 화면의 요소를 '직접' 바꿀 수 있다는 점이죠.
DOM(Document Object Model)의 개념은 앞서 언급한 적이 있었는데요. DOM은 브라우저가 HTML을 읽어들여 '트리 구조의 객체' 로 바꾼 결과물입니다. 즉, HTML 문서를 자바스크립트가 이해할 수 있도록 변환한 내부 구조라고 생각하면 됩니다. 이 구조를 통해 자바스크립트는 화면의 내용을 실시간으로 바꿀 수 있습니다.

document.getElementById("message").innerText = "안녕하세요, 자바스크립트!";

이 한 줄이 HTML의 텍스트를 바꿉니다. 화면이 새로고침되지 않아도 내용이 즉시 바뀌는 것, 바로 이것이 동적 웹(Dynamic Web) 의 시작입니다.

정리 ― 움직이는 웹의 원리

정적인 HTML과 CSS 위에 자바스크립트가 더해지면, 비로소 웹페이지는 '살아 있는 유기체'처럼 반응합니다.

요소	역할	비유
HTML	구조를 정의	뼈대
CSS	디자인을 담당	옷
JavaScript	동작을 제어	근육과 신경

그리고 이 세 가지가 함께 어우러질 때, 우리가 매일 쓰는 웹서비스를 구성하는 검색창, 알림, 애니메이션, 버튼 반응 등이 모두 자연스럽게 작동하게 됩니다.

다음 장으로 ― 리액트의 등장

하지만 자바스크립트만으로 복잡한 화면을 만들다 보면 "어느 부분이 언제, 왜 바뀌는지"를 관리하기가 점점 어려워집니다. 화면의 데이터가 많아질수록, '어떤 요소를 언제 업데이트해야 할지'가 복잡해지죠.

이 문제를 해결하기 위해 등장한 것이 바로 리액트(React) 입니다.
리액트는 자바스크립트의 원리를 그대로 이어받으면서, "상태(state)가 바뀌면 화면이 자동으로 갱신된다"는 새로운 사고방식을 제시합니다. 다음 장에서는, 이 리액트가 어떻게 자바스크립트의 한계를 넘어 더 '똑똑한 화면'을 만들어주는지 알아보겠습니다.

3장에서 소개된 내용들은 아래 test.html 파일을 작성하셔서 모두 테스트해보실 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>3장 자바스크립트 핵심 원리 테스트</title>
    <style>
      body {
        font-family: 'Pretendard', sans-serif;
        background: linear-gradient(135deg, #f9fbe7, #e1f5fe);
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 40px;
      }

      h1 {
        color: #2e7d32;
        margin-bottom: 10px;
      }

      section {
        background: #ffffffcc;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 500px;
        margin: 20px 0;
        padding: 20px;
      }

      button {
        background-color: #81c784;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s;
      }

      button:hover {
        background-color: #66bb6a;
      }

      input {
        padding: 8px 10px;
        border: 2px solid #81c784;
        border-radius: 6px;
        width: 100%;
        margin-top: 5px;
        font-size: 16px;
      }

      p {
        font-size: 16px;
        margin-top: 10px;
        color: #333;
      }

      .counter {
        font-size: 18px;
        color: #1565c0;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>💡 자바스크립트 핵심 원리 테스트</h1>

    <!-- 1️⃣ 변수와 이벤트: 좋아요 카운터 -->
    <section>
      <h3>1. 변수와 이벤트 (좋아요 버튼)</h3>
      <button id="likeButton">좋아요 ❤️</button>
      <p class="counter">좋아요 수: <span id="countDisplay">0</span></p>
    </section>

    <!-- 2️⃣ 함수: 인사하기 -->
    <section>
      <h3>2. 함수 (인사하기)</h3>
      <button id="greetButton">인사하기 👋</button>
    </section>

    <!-- 3️⃣ 이벤트: 입력 감지 -->
    <section>
      <h3>3. 이벤트 (입력 중 로그)</h3>
      <input type="text" id="nameInput" placeholder="이름을 입력해보세요" />
      <p id="inputPreview">입력 결과가 여기에 표시됩니다.</p>
    </section>

    <!-- 4️⃣ DOM 조작: 텍스트 변경 -->
    <section>
      <h3>4. DOM 조작 (화면 내용 바꾸기)</h3>
      <p id="message">이 문장은 곧 자바스크립트가 바꿀 예정입니다.</p>
      <button id="changeTextButton">텍스트 바꾸기 ✨</button>
    </section>

    <script>
      /* ----------------------------------------------------
         1️⃣ 변수와 이벤트
         ---------------------------------------------------- */
      let count = 0;
      const likeButton = document.getElementById("likeButton");
      const countDisplay = document.getElementById("countDisplay");

      likeButton.addEventListener("click", () => {
        count = count + 1;
        console.log("좋아요 수:", count);
        countDisplay.textContent = count;
      });

      /* ----------------------------------------------------
         2️⃣ 함수: 인사하기
         ---------------------------------------------------- */
      function sayHello() {
        alert("안녕하세요! 😀");
      }

      document
        .getElementById("greetButton")
        .addEventListener("click", sayHello);

      /* ----------------------------------------------------
         3️⃣ 이벤트: 입력 감지
         ---------------------------------------------------- */
      const input = document.getElementById("nameInput");
      const preview = document.getElementById("inputPreview");

      input.addEventListener("input", (e) => {
        const value = e.target.value;
        console.log("입력 중:", value);
        preview.textContent = value
          ? `현재 입력 중: ${value}`
          : "입력 결과가 여기에 표시됩니다.";
      });

      /* ----------------------------------------------------
         4️⃣ DOM 조작: 텍스트 변경
         ---------------------------------------------------- */
      const message = document.getElementById("message");
      const changeTextButton = document.getElementById("changeTextButton");

      changeTextButton.addEventListener("click", () => {
        message.innerText = "안녕하세요, 자바스크립트가 바꾼 문장입니다! 🌟";
      });
    </script>
  </body>
</html>

'LIFEOFPI' 구독하기

사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'LIFEOFPI'을 구독하세요!

VIBE CODING.

1-3 자바스크립트 이해

라이프오브파이

2025년 10월 27일8달 전

카테고리

바이브코딩

3장. 자바스크립트 이

- 웹페이지에 생명을 불어넣는 언어

정적인 화면에 '생명'을 넣는 일

웹의 무대 위, 배우는 자바스크립트

앞 장에서 살펴보았듯 브라우저는 하나의 건축물처럼 동작합니다. 그리고 그 위에 세 요소가 있다는 것도 함께 알아보았습니다.

•

HTML은 기본적인 집의 뼈대를 구축하고,

•

CSS는 인테리어를 담당하며,

•

JavaScript는 전기와 수도를 담당하죠.

예를 들어, HTML로 버튼을 하나 만들고, CSS로 색깔을 예쁘게 칠했다고 해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>좋아요 버튼 테스트</title>
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Pretendard",
          "Noto Sans KR", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #f5f5f5;
      }

      #likeButton {
        font-size: 1rem;
        padding: 12px 20px;
        border-radius: 8px;
        border: none;
        background-color: #ff4d6a;
        color: white;
        cursor: pointer;
      }

      #likeButton:hover {
        background-color: #e03f59;
      }
    </style>
  </head>
  <body>
    
    <!-- 버튼 영역 -->
    <button id="likeButton">좋아요 ❤️</button>
      
  </body>
</html>

 <!-- 버튼 영역 -->
    <button id="likeButton">좋아요 ❤️</button>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>좋아요 버튼 테스트</title>
    <style>
      body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Pretendard",
          "Noto Sans KR", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #f5f5f5;
      }

      #likeButton {
        font-size: 1rem;
        padding: 12px 20px;
        border-radius: 8px;
        border: none;
        background-color: #ff4d6a;
        color: white;
        cursor: pointer;
      }

      #likeButton:hover {
        background-color: #e03f59;
      }
    </style>
  </head>
  <body>
    <!-- 버튼 영역 -->
    <button id="likeButton">좋아요 ❤️</button>

    <!-- 자바스크립트 -->
    <script>
      document.getElementById("likeButton").addEventListener("click", () => {
          alert("좋아요를 눌렀습니다!");
        });
    </script>
      
  </body>
</html>

*html 파일을 생성한 뒤 위 내용을 붙여넣고 브라우저에서 실행해보세요.

위에서 추가된 자바스크립트 부분은 다음과 같습니다.

document.getElementById("likeButton").addEventListener("click", () => {
  alert("좋아요를 눌렀습니다!");
});

변수 ― 기억을 담당하는 메모장

let count = 0;

이 문장은 "count라는 이름의 메모장에 0을 적어둬"라는 뜻입니다. 그리고 나중에 이렇게 쓸 수 있죠.

count = count + 1;

이제 메모장에는 1이 적히게 됩니다.

버튼을 누를 때마다 숫자가 올라가게 만들면, 간단한 '좋아요 카운터'를 만들 수도 있습니다.

let count = 0;

document.getElementById("likeButton").addEventListener("click", () => {
  count = count + 1;
  console.log("좋아요 수:", count);
});

이처럼 변수는 '상태(state)'를 기억하는 도구입니다. 이후 리액트 설명에서 배울 useState의 근본 원리도 결국 이 변수 개념에 기반해 있습니다.

함수 ― 행동을 정의하는 마법의 주문

function sayHello() {
  alert("안녕하세요!");
}

이제 이 함수를 버튼과 연결하면 됩니다.

document.getElementById("greetButton").addEventListener("click", sayHello);

앞으로 우리가 사용할 리액트에서도 이같은 함수 개념을 확장하여 컴포넌트(component)를 생성하고 활용합니다.

이벤트 ― 세상과의 대화

자바스크립트는 사용자의 행동(이벤트) 에 반응합니다. 클릭, 입력, 스크롤, 마우스 이동, 키보드 입력 — 이런 모든 '행동'이 이벤트입니다.

예를 들어 이런 코드가 있습니다.

document.getElementById("nameInput").addEventListener("input", (e) => {
  console.log("입력 중:", e.target.value);
});

DOM 조작 ― 화면의 요소를 직접 바꾸기

document.getElementById("message").innerText = "안녕하세요, 자바스크립트!";

이 한 줄이 HTML의 텍스트를 바꿉니다. 화면이 새로고침되지 않아도 내용이 즉시 바뀌는 것, 바로 이것이 동적 웹(Dynamic Web) 의 시작입니다.

정리 ― 움직이는 웹의 원리

정적인 HTML과 CSS 위에 자바스크립트가 더해지면, 비로소 웹페이지는 '살아 있는 유기체'처럼 반응합니다.

요소	역할	비유
HTML	구조를 정의	뼈대
CSS	디자인을 담당	옷
JavaScript	동작을 제어	근육과 신경

다음 장으로 ― 리액트의 등장

3장에서 소개된 내용들은 아래 test.html 파일을 작성하셔서 모두 테스트해보실 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>3장 자바스크립트 핵심 원리 테스트</title>
    <style>
      body {
        font-family: 'Pretendard', sans-serif;
        background: linear-gradient(135deg, #f9fbe7, #e1f5fe);
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 40px;
      }

      h1 {
        color: #2e7d32;
        margin-bottom: 10px;
      }

      section {
        background: #ffffffcc;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 500px;
        margin: 20px 0;
        padding: 20px;
      }

      button {
        background-color: #81c784;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s;
      }

      button:hover {
        background-color: #66bb6a;
      }

      input {
        padding: 8px 10px;
        border: 2px solid #81c784;
        border-radius: 6px;
        width: 100%;
        margin-top: 5px;
        font-size: 16px;
      }

      p {
        font-size: 16px;
        margin-top: 10px;
        color: #333;
      }

      .counter {
        font-size: 18px;
        color: #1565c0;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>💡 자바스크립트 핵심 원리 테스트</h1>

    <!-- 1️⃣ 변수와 이벤트: 좋아요 카운터 -->
    <section>
      <h3>1. 변수와 이벤트 (좋아요 버튼)</h3>
      <button id="likeButton">좋아요 ❤️</button>
      <p class="counter">좋아요 수: <span id="countDisplay">0</span></p>
    </section>

    <!-- 2️⃣ 함수: 인사하기 -->
    <section>
      <h3>2. 함수 (인사하기)</h3>
      <button id="greetButton">인사하기 👋</button>
    </section>

    <!-- 3️⃣ 이벤트: 입력 감지 -->
    <section>
      <h3>3. 이벤트 (입력 중 로그)</h3>
      <input type="text" id="nameInput" placeholder="이름을 입력해보세요" />
      <p id="inputPreview">입력 결과가 여기에 표시됩니다.</p>
    </section>

    <!-- 4️⃣ DOM 조작: 텍스트 변경 -->
    <section>
      <h3>4. DOM 조작 (화면 내용 바꾸기)</h3>
      <p id="message">이 문장은 곧 자바스크립트가 바꿀 예정입니다.</p>
      <button id="changeTextButton">텍스트 바꾸기 ✨</button>
    </section>

    <script>
      /* ----------------------------------------------------
         1️⃣ 변수와 이벤트
         ---------------------------------------------------- */
      let count = 0;
      const likeButton = document.getElementById("likeButton");
      const countDisplay = document.getElementById("countDisplay");

      likeButton.addEventListener("click", () => {
        count = count + 1;
        console.log("좋아요 수:", count);
        countDisplay.textContent = count;
      });

      /* ----------------------------------------------------
         2️⃣ 함수: 인사하기
         ---------------------------------------------------- */
      function sayHello() {
        alert("안녕하세요! 😀");
      }

      document
        .getElementById("greetButton")
        .addEventListener("click", sayHello);

      /* ----------------------------------------------------
         3️⃣ 이벤트: 입력 감지
         ---------------------------------------------------- */
      const input = document.getElementById("nameInput");
      const preview = document.getElementById("inputPreview");

      input.addEventListener("input", (e) => {
        const value = e.target.value;
        console.log("입력 중:", value);
        preview.textContent = value
          ? `현재 입력 중: ${value}`
          : "입력 결과가 여기에 표시됩니다.";
      });

      /* ----------------------------------------------------
         4️⃣ DOM 조작: 텍스트 변경
         ---------------------------------------------------- */
      const message = document.getElementById("message");
      const changeTextButton = document.getElementById("changeTextButton");

      changeTextButton.addEventListener("click", () => {
        message.innerText = "안녕하세요, 자바스크립트가 바꾼 문장입니다! 🌟";
      });
    </script>
  </body>
</html>

'LIFEOFPI' 구독하기

사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'LIFEOFPI'을 구독하세요!