3. 이벤트 핸들링 (Event Handling)개념이벤트는 웹페이지에서 발생하는 사용자의 행동이나 브라우저의 동작임클릭, 키보드 입력, 스크롤, 폼 제출 등이 모두 이벤트임. 이벤트 핸들링은 이런 이벤트가 발생했을 때 실행할 코드(함수)를 연결하는 것! 1) 이벤트 리스너 등록 방법const button = document.getElementById('myBtn');// 방법 1: addEventListener (권장!)button.addEventListener('click', function() { console.log('버튼이 클릭되었습니다!');});설명:`addEventListener`(이벤트타입, 콜백함수)첫 번째 인자: 이벤트 종류 (문자열) - 'click', 'keydown', 's..

DOM 이란?DOM은 HTML 문서를 JavaScript가 이해할 수 있는 객체 트리 구조로 표현한 것입니다. 브라우저가 HTML을 파싱하면 DOM 트리가 만들어지고, JavaScript로 이 트리를 조작해서 웹페이지를 동적으로 변경할 수 있음. 즉, HTML은 단순한 텍스트 파일인데, 브라우저가 이걸 읽어서 JavaScript가 조작할 수 있는 "객체들의 집합"으로 바꿔놓은 것임HTML 문서가 이렇게 되어 있으면 안녕 내용 DOM 트리는 이런 구조가 됨document └── html ├── head │ └── title │ └── "제목" (텍스트 노드) └── body └──..

1. 고차함수개념고차함수는 함수를 인자로 받거나, 함수를 반환하는 함수임.JavaSCript에서 함수는 "일급 객체"이기 때문에 변수에 담거나, 다른 함수에 전달하거나 반환할 수 있음 즉, 보통 함수는 숫자나 문자열 같은 "값"을 받지만, 고차함수는 "함수 자체"를 값처럼 주고 받는 함수임 대표적인 고차함수들1) forEach - 배열 순회const fruits = ['사과', '바나나', '오렌지'];fruits.forEach(function(fruit, index) { console.log(`${index}: ${fruit}`);});// 화살표 함수로 더 간단하게fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`);})..

모듈이 뭐임?모듈은 쉽게 말해서 레고 블록 같은 것프로그램을 만들 때 모든 코드를 한 파일에 다 때려 넣으면 너무 복잡하고 관리하기 어려움.그래서 기능별로 코드를 나눠서 다른 파일로 만들고, 필요할 때 가져다 쓰는 것예를 들어:`math.js` → 수학 계산 기능`user.js` → 사용자 관리 기능`database.js` → 데이터베이스 연결 기능이렇게 나눠두면 재사용도 쉽고, 유지보수도 편함!Node.js의 두 가지 모듈 시스템Node.js에는 모듈을 사용하는 방법이 2가지 있음:구분CommonJS (CJS)ES Module (ESM)사용 키워드`require` / `module.exports``import` / `export`등장 시기Node.js 초기부터최신 JavaScript 표준파일 확장자`...

Node.js가 뭐임?JavaScript는 원래 웹 브라우저에서만 동작하는 언어였음예를 들어,크롬에서 버튼 클릭하면 반응하기웹페이지에 애니메이션 넣기폼 유효성 검사하기근데, JavaScript를 브라우저 밖에서도 쓸 수 있게하면 어떨까? 해서 나온게 Node.js임Node.js의 정체Node.js = JavaScript 런타임 환경쉽게 말하면,브라우저 없이도 JavaScript를 실행할 수 있게 해주는 프로그램컴퓨터에서 JavaScript 파일을 직접 실행 가능서버, 데스크톱 앱, 도구 등을 만들 수 있음Node.js로 할 수 있는 것들1. 웹 서버 만들기가장 많이 쓰이는 용도. 백엔드 서버를 JavaScript로 만들 수 있음2. API 서버 구축REST API, GraphQL 서버 등3. 파일 시스템..

Promise로 비동기 처리를 깔끔하게 할 수 있게 됐지만, `then()`이 여러 개 이어지면 여전히 길고 귀찮음`async / await`을 이용하면 비동기 코드를 동기 코드처럼 한 줄씩 읽을 수 있게됨1. `async``async`는 "이 함수는 비동기 함수야"라고 표시하는 키워드임내부에서 자동으로 Promise를 반환함async function getData() { return { name: "도서", id: "doseo", };}console.log(getData());// Promise { : { name: "도서", id: "doseo" } }`async` 함수는 무조건 Promise를 반환함함수 내부에서 return으로 값을 주면, 그게 자동으로 `reslove()`에 담겨 ..

자바스크립트의 비동기 처리는 처음엔 `setTimeout()` -> 콜백(callback)으로 시작하지만,복잡한 로직이 늘어날수록 콜백이 중첩되고 코드 가독성이 급격히 나빠짐이 문제를 해결하기 위한 것이`Promise`객체임1. Promise란?Promise는 "결과를 나중에 약속하는 객체"임쉽게 말해, 비동기 작업이 끝나면 성공(`resolve`) 혹은 실패(`reject`)를 알려주는 약속임const promise = new Promise((resolve, reject) => { // 비동기 작업을 수행하는 함수 (executor) setTimeout(() => { console.log("안녕!"); resolve("안녕!"); // 성공했을 때 // reject("에러 발생");..

자바스크립트는 기본적으로 한 줄씩 순서대로 실행되는 "동기" 언어임!하지만 현실적으로 "서버에서 데이터 받아오기", "파일 읽기", "타이머 기다리기" 등 시간이 걸리는 작업이 많음.이런 작업을 다 기다리다보면 브라우저가 멈추기 때문에, 비동기 방식으로 처리해야 함1. 기본적인 비동기 예시function task() { setTimeout(() => { console.log("안녕!"); }, 3000);}task();// (3초 후) 안녕!`setTimeout()`은 대표적인 비동기 함수임.3초(3000ms) 뒤에 `console.log("안녕")`을 실행하는데,그동안 JS는 멈추지 않고 다음 코드를 계속 실행함.즉, `setTimeout()`은 나중에 실행할 일을 예약하는 함수임2. 비동기 ..

자바스크립트는 기본적으로 "단일 스레드" 언어임즉, 한 번에 하나의 작업만 순서대로 처리할 수 있음하지만 실제 웹 환경에서는 서버 요청, 타이머, 파일 읽기처럼 시간이 오래 걸리는 작업을 효율적으로 처리해야 하므로이런 경우에 "비동기" 방식을 사용함1. 동기란?여러 개의 작업이 있을 때, 순서대로 한 번에 하나씩 실행되는 방식.앞의 코드가 끝나야 다음 코드가 실행됨console.log(1);console.log(2);console.log(3);// 1// 2// 3한 줄씩 순차적으로 실행이전 코드가 완료되기 전엔 다음 코드가 실행되지 않음예시: 계산, 변수 선언, 일반 함수 실행 등2. 비동기란?여러 개의 작업이 있을 때, 순서대로 기다리지 않고백그라운드(Web APIs)에서 실행하고 나중에 결과를 가져..