[JavaScript 시리즈 1편] 왜 JavaScript를 다시 공부할까

이번 시리즈는 개념 → 코드 → 이유 순서를 반복해 웹 UI 사고를 다집니다. 고등학생 수준에서도 바로 적용할 수 있도록 용어를 한국어로 풀고, 짧은 문장으로 정리합니다.

이번 글에서 새로 나오는 용어

1. 브라우저 실행 환경: 설치 없이 브라우저만으로 코드를 돌리는 공간이라는 뜻입니다.
2. 비동기 처리: 기다릴 일을 다른 줄에 맡기고 내 코드를 계속 흘려보내는 사고방식입니다.
3. Promise: “조금 뒤에 결과를 줄게”라고 약속하는 객체라서 로딩·타이머를 표현할 수 있습니다.
4. fetch: 서버와 데이터를 주고받게 해 주는 브라우저 내장 네트워크 함수입니다.

핵심 개념

• 브라우저 실행 환경: 브라우저가 직접 코드를 읽고 실행하는 공간입니다. 설치 없이 곧바로 실행되므로 교내 프로젝트나 동아리 웹툴을 빠르게 시험할 수 있습니다.
• 비동기 처리: Promise(나중에 결과를 알려주는 객체)와 async/await로 “기다리는 작업”을 표현하는 방법입니다. 서버 응답, 타이머, 네트워크 지연을 안전하게 다룰 수 있습니다.
• 프론트엔드 뼈대: 상태 → 렌더 → 이벤트 → 비동기 통신이라는 흐름입니다. 프레임워크를 배우기 전에 이 뼈대를 설명할 수 있어야 협업이 수월합니다.
• 학습 로드맵: 15편은 값과 비동기 기초, 610편은 상태·모듈·폼, 이후 편은 성능·접근성·빌드 도구와 최종 프로젝트를 다룹니다.

코드로 확인하기

const button = document.querySelector("button");

button?.addEventListener("click", () => {
  console.log("클릭됨");
});

DOM(Document Object Model)은 브라우저가 만든 화면 트리입니다. querySelector는 이 트리에서 요소를 찾아 주는 함수입니다. 버튼 클릭을 감지해 콘솔에 메시지를 남길 수 있습니다.

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function fetchSchedule() {
  console.log("로딩 시작");
  await wait(500);
  console.log("데이터 준비 완료");
}

fetchSchedule();

Promise는 “조금 뒤에 결과를 알려줄게”라는 상자입니다. setTimeout과 묶으면 대기 화면, 로딩 스피너, 재시도 버튼을 쉽게 설계할 수 있습니다.

async function loadPosts() {
  const response = await fetch("/api/posts");
  if (!response.ok) {
    throw new Error("네트워크 응답 오류");
  }
  return response.json();
}

fetch는 브라우저가 제공하는 네트워크 함수입니다. .ok는 속도 지연이나 서버 오류를 빠르게 잡아내는 속성이라 꼭 확인해야 합니다.

왜 중요한가

• 학교 전시회나 지역 축제 안내 페이지처럼 빠르게 화면을 띄워야 할 때, 브라우저만 있으면 실행되는 JavaScript가 가장 먼저 떠오릅니다.
• 비동기 흐름을 이해하면 로딩 지연, 와이파이 끊김 같은 실제 환경을 자연스럽게 설명할 수 있습니다.
• 프레임워크의 멋진 문법도 결국 JavaScript의 상태·이벤트·렌더 개념을 재구성한 것이라, 기초를 되짚으면 다른 도구로 옮길 때 흔들리지 않습니다.

실습

• 따라 하기: 버튼 요소를 선택해 클릭 이벤트를 연결하고, 콘솔에 “클릭됨” 메시지를 남깁니다.
• 확장하기: fetchSchedule 함수를 수정해 가짜 API 응답 객체를 반환하고, 그 데이터를 카드 UI로 출력하는 함수 골격을 작성합니다.
• 디버깅: fetch 요청에서 주소를 일부러 틀려 네트워크 에러를 발생시키고, .ok 검사를 추가해 오류 메시지를 명확히 기록합니다.
• 완료 기준: 클릭 이벤트, 비동기 함수, 오류 처리 3가지를 하나의 흐름으로 설명하고 콘솔 출력이 모두 예상대로 나오면 실습을 마칩니다.

마무리

JavaScript는 “어쩔 수 없이 쓰는 언어”가 아니라 화면이 살아 움직이는 원리를 보여 주는 언어입니다. 앞으로의 글들은 변수·함수·DOM·네트워크 같은 주제를 순서대로 정리하며 브라우저 실행 환경을 탄탄하게 다듬습니다. 다음 편에서는 값과 자료형부터 다시 정리해 보겠습니다.