브라우저 안의 작은 데이터베이스​웹 애플리케이션에서는 사용자의 데이터를 저장해야 하는 경우가 많습니다. 간단한 데이터는 서버가 아니라 브라우저 내부 저장소에 보관할 수 있습니다. LocalStorage 사용법// 저장localStorage.setItem("username", "hong");// 불러오기console.log(localStorage.getItem("username"));// 삭제localStorage.removeItem("username");LocalStorage는 브라우저를 껐다 켜도 데이터가 남아 있습니다. 활용 사례 로그인 상태 유지 사용자 환경 설정 저장 쇼핑몰 장바구니LocalStorage는 작지만 강력한 저장소입니다. 서버 부담을 줄이고 사용자 경험을 향상시키는 좋은 도구입니다.

안정적인 웹 만들기​코드를 실행하다 보면 오류가 발생할 수 있습니다. 이를 방치하면 프로그램이 멈추지만, 에러 처리를 하면 안전하게 실행을 이어갈 수 있습니다. try-catchtry { throw new Error("문제가 발생했습니다!");} catch (err) { console.error(err.message);}finallytry { console.log("작업 실행");} finally { console.log("항상 실행됨");}에러 처리는 사용자 경험을 지키는 핵심입니다. 반드시 try-catch와 에러 로그 관리 방식을 익혀야 합니다.

문맥에 따라 달라지는 값​JavaScript에서 this는 함수가 어떻게 호출되었는가에 따라 값이 달라집니다.console.log(this); // 전역 객체객체의 메서드 안에서 호출하면 다른 값이 됩니다.const obj = { name: "홍길동", sayName() { console.log(this.name); }};obj.sayName(); // 홍길동또한 bind, call, apply로 강제로 바꿀 수도 있습니다.function greet() { console.log(this.name);}const user = { name: "철수" };greet.call(user); // 철수this는 혼란스럽지만, 제대로 이해하면 JavaScript를 한 단계 깊게 다룰 수 있습니다.

코드의 체계적인 관리​프로젝트가 커지면 하나의 파일에 모든 코드를 담을 수 없습니다. 이때 필요한 것이 모듈 시스템입니다. ES6 모듈// math.jsexport function add(a, b) { return a + b;}// main.jsimport { add } from "./math.js";console.log(add(2, 3));이렇게 export와 import를 통해 기능을 나누어 관리할 수 있습니다. 장점 코드 재사용성 증가 유지보수 편리 네임스페이스 충돌 방지모듈 시스템은 현대 JavaScript 개발에서 필수입니다. React, Vue, Node.js 모두 모듈 시스템을 기반으로 동작합니다.

함수 안에 숨겨진 비밀​JavaScript에서 가장 독특한 개념 중 하나가 클로저(Closure) 입니다. 클로저란 함수가 선언될 때의 스코프를 기억하여, 외부 함수가 종료된 이후에도 그 변수에 접근할 수 있는 기능을 말합니다. 예시function counter() { let count = 0; return function() { count++; return count; };}const inc = counter();console.log(inc()); // 1console.log(inc()); // 2이 코드에서 count 변수는 counter 함수가 끝났음에도 사라지지 않고 내부 함수에서 계속 사용됩니다. 활용 사례 데이터 은닉 (private 변수처럼 사용) 상태 유지 모듈 패턴 구현클로저는 처음엔 이해하기 어렵지만, JavaScript의 동작 원리를 이해하는 핵심입니다. React 훅 같은 프레임워크도 클로저 개념 위에서 동작합니다.

효율적인 데이터 처리의 핵심JavaScript 개발을 하다 보면 가장 많이 사용하는 자료형이 배열(Array) 과 객체(Object) 입니다. 데이터를 구조적으로 다루기 위해서는 이 두 가지를 능숙하게 활용할 수 있어야 합니다.배열 메서드배열에는 유용한 메서드가 많습니다.const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(n => n * 2); // [2,4,6,8,10]const even = numbers.filter(n => n % 2 === 0); // [2,4]const sum = numbers.reduce((acc, n) => acc + n, 0); // 15이렇게 하면 반복문을 직접 작성하지 않고도 데이터를 가공할 수 있습니다.객체 다루기객체는 키-값 구조로 데이터를 저장합니다.const user = { name: "홍길동", age: 30 };console.log(user.name); // 홍길동또한 구조 분해 할당을 이용하면 더 간결하게 사용할 수 있습니다.const { name, age } = user;console.log(name, age);배열과 객체를 자유자재로 다룰 수 있어야 효율적인 코드 작성이 가능합니다. 특히 map, filter, reduce는 필수적으로 익혀야 하는 메서드입니다.

서버와 데이터를 주고받는 표준 방식웹 개발에서 가장 중요한 작업 중 하나는 서버와의 통신입니다. 과거에는 XMLHttpRequest(XHR)를 사용했지만, 문법이 복잡하고 직관적이지 않았습니다. 이를 대체하는 것이 fetch API입니다.기본 사용법fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error("에러:", error));이렇게 하면 API에서 JSON 데이터를 불러와 출력할 수 있습니다. async/await와 함께 쓰기async function loadPost() { try { const res = await fetch("https://jsonplaceholder.typicode.com/posts/1"); const data = await res.json(); console.log(data); } catch (err) { console.error("에러 발생:", err); }}이 방식은 에러 처리까지 깔끔하게 할 수 있습니다. POST 요청 보내기fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: "새 글", body: "내용", userId: 1 })}).then(res => res.json()).then(data => console.log(data));fetch API는 직관적이고 강력한 표준 도구입니다. REST API, GraphQL, JSON 데이터를 다룰 때 반드시 알아야 할 기술입니다.

멈추지 않는 웹의 비밀​JavaScript의 가장 중요한 특징 중 하나는 비동기 처리(Asynchronous Processing) 입니다. 일반적으로 코드는 한 줄씩 순서대로 실행되지만, 웹에서는 서버와 데이터를 주고받거나 파일을 읽는 작업처럼 시간이 오래 걸리는 일이 많습니다. 이런 작업을 동기적으로 처리하면 브라우저가 멈추는 문제가 발생합니다. 이를 해결하는 기술이 비동기 처리입니다. 콜백 함수의 한계 과거에는 비동기 처리를 위해 콜백 함수를 사용했습니다.setTimeout(() => { console.log("3초 후 실행");}, 3000);하지만 콜백이 중첩되면 코드가 복잡해져서 콜백 지옥(callback hell) 이라는 문제가 생깁니다.Promise의 등장Promise는 콜백 문제를 해결하기 위해 도입된 개념입니다.function getData() { return new Promise((resolve) => { setTimeout(() => resolve("데이터 로드 완료"), 2000); });}getData().then((result) => console.log(result));Promise는 “미래에 완료될 작업”을 표현하며, .then() 체인을 이용해 결과를 처리합니다.async/await – 가장 직관적인 방식ES8에서는 async/await 문법이 추가되어 비동기 처리를 더 깔끔하게 표현할 수 있습니다.async function fetchData() { const data = await getData(); console.log(data);}fetchData();이렇게 작성하면 비동기 코드도 동기 코드처럼 읽히기 때문에 가독성이 좋아집니다.실무 활용 예시 API 요청 및 응답 처리 대용량 파일 업로드/다운로드 애니메이션과 타이머 처리비동기 처리는 JavaScript가 브라우저 환경에서 사랑받는 이유 중 하나입니다. Promise와 async/await 문법을 자유자재로 다룰 수 있어야 현대적인 웹 개발에 참여할 수 있습니다.

사용자와 소통하는 웹의 핵심 기술​웹사이트를 단순히 “보여주는 공간”이라고 생각하면 오해입니다. 진짜 웹은 사용자가 클릭하거나 입력하는 순간부터 시작됩니다. 이러한 사용자 행동을 감지하고 반응하도록 만드는 기술이 바로 이벤트 처리(Event Handling) 입니다. JavaScript에서 이벤트 처리를 익히면, 버튼을 클릭할 때 알림을 띄우거나 입력값을 실시간으로 확인하는 등 동적인 상호작용을 구현할 수 있습니다. 이벤트의 기본 개념 이벤트란 사용자의 동작(클릭, 스크롤, 입력 등)이나 시스템에서 발생하는 사건을 의미합니다. HTML 요소에 특정 이벤트가 발생했을 때 실행할 동작을 미리 정의하는 것이 이벤트 처리입니다. 예를 들어, 버튼을 클릭하면 경고창을 띄우는 간단한 코드를 보겠습니다.<button id="btn">눌러보세요</button><script> const button = document.getElementById("btn"); button.addEventListener("click", () => { alert("버튼이 클릭되었습니다!"); });</script>이렇게 addEventListener를 사용하면 특정 요소에 원하는 이벤트를 연결할 수 있습니다.주요 이벤트 종류 마우스 이벤트: click, dblclick, mouseover, mouseout 키보드 이벤트: keydown, keyup, keypress 폼 이벤트: input, change, submit 윈도우 이벤트: load, resize, scroll 예를 들어, 사용자가 입력창에 글자를 입력할 때마다 실시간으로 미리보기 텍스트를 업데이트하려면 다음과 같이 작성합니다.<input id="nameInput" placeholder="이름을 입력하세요"><p id="preview"></p><script> const input = document.getElementById("nameInput"); const preview = document.getElementById("preview"); input.addEventListener("input", () => { preview.innerText = `안녕하세요, ${input.value}!`; });</script>이벤트 위임(Event Delegation)실무에서 자주 등장하는 패턴이 바로 이벤트 위임입니다. 많은 요소 각각에 이벤트를 붙이는 대신, 부모 요소 하나에만 이벤트를 걸어 효율적으로 관리하는 방식입니다.<ul id="menu"> <li>메뉴 1</li> <li>메뉴 2</li> <li>메뉴 3</li></ul><script> const menu = document.getElementById("menu"); menu.addEventListener("click", (e) => { if (e.target.tagName === "LI") { alert(`${e.target.innerText} 선택됨`); } });</script>이렇게 하면 li가 몇 개가 되든, 하나의 이벤트 핸들러로 모두 처리할 수 있습니다.이벤트 처리는 웹 개발에서 사용자 경험(UX) 을 결정짓는 핵심입니다. 단순히 코드를 실행하는 것을 넘어, 사용자와 소통하고 인터랙션을 제공하는 기술입니다. 기본 이벤트부터 이벤트 위임까지 익혀두면 실무에서 훨씬 깔끔하고 효율적인 코드를 작성할 수 있습니다.

웹페이지를 살아 움직이게 만드는 기술​JavaScript를 공부할 때 가장 먼저 마주하는 개념 중 하나가 바로 DOM(Document Object Model) 조작입니다. DOM은 간단히 말해 HTML 문서를 객체 형태로 표현한 구조입니다. HTML 태그 하나하나가 JavaScript에서 접근할 수 있는 객체로 변환되며, 이를 이용하면 웹페이지의 내용을 바꾸거나 스타일을 적용할 수 있습니다. 예를 들어, 버튼을 누르면 글자가 바뀌도록 만들고 싶다고 합시다. HTML에 <p id="text">안녕하세요</p> 라는 요소가 있다면, JavaScript에서는 이렇게 접근할 수 있습니다.document.getElementById("text").innerText = "반갑습니다!";이 한 줄의 코드로, 웹페이지의 글자가 즉시 변경됩니다. 이것이 바로 DOM 조작의 힘입니다.DOM 접근 방법 getElementById – 특정 ID를 가진 요소 선택 getElementsByClassName – 같은 클래스를 가진 요소들 선택 querySelector – CSS 선택자 방식으로 요소 선택 querySelectorAll – CSS 선택자와 일치하는 모든 요소 선택 이러한 선택자를 이용해 원하는 HTML 태그에 접근한 뒤, innerText, innerHTML, style, classList 등을 조작해 다양한 효과를 줄 수 있습니다.DOM 조작 활용 예시 버튼 클릭 시 특정 영역 보이기/숨기기 입력창에 글자를 입력하면 실시간으로 미리보기 출력 웹페이지 테마를 버튼 하나로 다크 모드/라이트 모드 전환 동적으로 새로운 요소 추가 및 삭제 과거에는 DOM 조작이 꽤 번거로웠지만, 지금은 표준화된 API 덕분에 비교적 단순하게 사용할 수 있습니다. jQuery 같은 라이브러리 없이도 충분히 다양한 기능을 구현할 수 있죠.DOM 조작은 JavaScript의 핵심 중 하나이며, “웹페이지를 동적으로 만든다”는 말은 곧 DOM을 다룬다는 의미입니다. 기본적인 선택자와 속성 변경법만 익혀도 훨씬 풍부한 사용자 경험을 제공할 수 있습니다.