Summary
- 아는 만큼 보입니다.
- 코드를 직접 작성하지 못 해도, 읽고 수정할 수 있어야 합니다.
- 어려울수록 몸값은 올라갑니다.
Introduction
김자영 강사님
JavaScript에서 함수, 이벤트, 웹 스토리지, json 에 대해 살펴보고 예시들과 함께 정리합니다.
Code, Conept & Explanation
함수
비동기 함수
비동기 함수는 작업이 끝날 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해주는 함수입니다.
JavaScript는 한 번에 하나의 작업만 처리할 수 있는 단일 스레드 언어입니다. 따라서 시간이 오래 걸리는 작업 (예: 서버에서 데이터 가져오기)을 처리하면 프로그램이 멈추는 일이 생길 수 있습니다.
비동기 함수를 사용하면, 시간이 오래 걸리는 작업이 끝날 때까지 기다리지 않고 다른 작업을 먼저 할 수 있습니다.
함수 기본 구조
function (){}
() = {}
위 구조만은 꼭 기억해야 합니다.
기본 함수
1️⃣ 선언적 함수 (Function Declaration)
function 키워드를 사용해 함수를 선언하는 방식입니다.
호이스팅(Hoisting) 덕분에 함수 선언 전에 호출이 가능합니다.
function sayHello(name) {
console.log(`Hello, ${name}!`);
return "hello";
}
sayHello("world"); // 출력: Hello, world!✅ 특징:
1. 이름이 있는 함수로 선언됩니다.
2. 호이스팅: 함수 선언부가 코드 상단으로 끌어올려져, 선언 전에 호출 가능합니다.
3. 전역에서 사용하기 쉽고 가독성이 좋습니다.
2️⃣ 함수 표현식 (Function Expression)
함수를 변수에 할당하여 선언하는 방식입니다.
함수가 익명 함수일 때 많이 사용됩니다.
const sayHello = function (name) {
console.log(`Hello, ${name}!`);
return "hello";
};
sayHello("expression"); // 출력: Hello, expression!✅ 특징:
1. 변수에 함수가 할당됩니다.
2. 호이스팅되지 않음: 함수 선언 이후에만 호출 가능합니다.
3. 주로 콜백 함수나 일회성 함수에 사용됩니다.
3️⃣ 화살표 함수 (Arrow Function)
ES6부터 도입된 함수로, 짧고 간결한 문법이 특징입니다.
function 키워드 대신 =>를 사용합니다.
const sayHello = (name) => {
console.log(`Hello, ${name}!`);
return "hello";
};
sayHello("arrow"); // 출력: Hello, arrow!✅ 특징:
1. 문법이 간단하고 코드를 짧게 작성할 수 있습니다.
2. this를 사용하지 않음: 일반 함수와 달리 this가 호출 컨텍스트에 묶이지 않습니다.
3. 콜백 함수나 이벤트 핸들러에 자주 사용됩니다.
일급함수
1️⃣ 일급 함수 (First-Class Function)
JavaScript에서 함수는 "일급 객체"입니다. 즉, 함수도 일반 데이터처럼 다룰 수 있다는 뜻입니다.
✅ 일급 함수의 특징:
1) 변수에 함수를 저장할 수 있음:
const sayHello = function () {
console.log("Hello!");
};
sayHello(); // 출력: Hello!2) 함수를 다른 함수의 인자로 전달할 수 있음:
function greet(callback) {
callback(); // 전달받은 함수를 실행
}
greet(() => console.log("Hi!")); // 출력: Hi!3) 함수를 다른 함수에서 반환할 수 있음:
function makeMultiplier(x) {
return function (y) {
return x * y;
};
}
const multiplyBy2 = makeMultiplier(2);
console.log(multiplyBy2(5)); // 출력: 10✨ 요약:
함수는 변수에 저장, 전달, 반환이 모두 가능합니다!
함수도 데이터처럼 다룰 수 있습니다.
콜백 함수
2️⃣ 콜백 함수 (Callback Function)
콜백 함수는 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다.
✅ 콜백 함수의 정의:
한 함수가 다른 함수를 호출하면서 "콜백(나중에 실행)"을 요청하는 방식입니다.
✅ 예시:
1. 타이머 함수:
setTimeout(() => {
console.log("3초 후 실행됩니다!");
}, 3000); // 3초 후에 콜백 함수 실행- 이벤트 처리:
const button = document.querySelector("button");
button.addEventListener("click", () => {
console.log("버튼이 클릭되었습니다!");
});- 배열 메서드에서의 콜백:
const numbers = [1, 2, 3];
numbers.forEach((num) => {
console.log(num * 2); // 각각의 숫자를 2배로 출력
});✅ 주요 용도:
1. 비동기 처리: 네트워크 요청, 타이머 등.
2. 이벤트 처리: 클릭, 마우스 이동 등.
3. 배열 메서드: forEach, map, filter 등.
이벤트
자주 사용하는 이벤트
JavaScript의 이벤트는 사용자의 동작에 따라 웹 페이지에서 특정 작업을 수행하도록 도와줍니다. 이 글에서는 클릭(click)과 키업(keyup), 체인지(change) 이벤트를 중심으로 간단히 정리하겠습니다.
- 클릭
- 키업
- 체인지
1️⃣ 클릭 이벤트 (click)
정의: 사용자가 HTML 요소를 클릭했을 때 발생하는 이벤트입니다.
주요 사용처:
1. 버튼 클릭 시 특정 작업 실행.
2. 링크 클릭 시 페이지 이동 또는 동작 처리.
3. 다양한 UI 요소와의 상호작용 처리.
✅ 사용 예제:
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("버튼이 클릭되었습니다!");
});🔑 클릭 이벤트의 특징:
1. 대상 요소: 거의 모든 HTML 요소에서 사용 가능 (<'button>, <'div>, <'a> 등).
2. 더블클릭 이벤트(dblclick)와는 다름 → 두 번 클릭 시 동작 처리 필요 시 사용.
2️⃣ 키업 이벤트 (keyup)
정의: 사용자가 누른 키를 손에서 뗄 때 발생하는 이벤트입니다.
주요 사용처:
1. 입력 필드에서 사용자가 입력한 값 확인.
2. 실시간 검색 기능 구현.
3. 입력 제한 또는 포맷 처리.
✅ 사용 예제:
const inputField = document.querySelector("input");
inputField.addEventListener("keyup", (event) => {
console.log(`입력된 키: ${event.key}`);
});🔑 키업 이벤트의 특징:
1. 대상 요소: 주로 <'input> 또는 <'textarea>와 같은 입력 요소에서 사용.
2. 키다운(keydown) 이벤트와의 차이 :
키다운은 키를 누르는 순간 발생 (반복적으로 호출 가능).
키업은 키에서 손을 뗄 때 딱 한 번 발생.
3️⃣ change 이벤트
정의: 폼 요소(<'input>, <'select>, <'textarea> 등)의 값이 변경된 후 포커스가 다른 곳으로 이동했을 때 발생하는 이벤트.
주요 사용처:
1. 드롭다운 메뉴(select)에서 선택 값이 바뀌었을 때.
2. 체크박스나 라디오 버튼의 상태가 변경되었을 때.
3. 사용자 입력을 감지하고 동작을 실행할 때.
✅ 사용 예제 1: 드롭다운 메뉴 값 변경 감지사용
<label for="colorSelect">색상을 선택하세요:</label>
<select id="colorSelect">
<option value="red">빨강</option>
<option value="blue">파랑</option>
<option value="green">초록</option>
</select>
<script>
const selectElement = document.getElementById("colorSelect");
selectElement.addEventListener("change", (event) => {
console.log(`선택한 색상: ${event.target.value}`);
});
</script>사용자가 드롭다운에서 색상을 선택하면 change 이벤트가 발생하여 선택한 값이 콘솔에 출력됩니다.
✅ 사용 예제 2: 체크박스 상태 변경
<label>
<input type="checkbox" id="agreeCheckbox" />
동의합니다
</label>
<script>
const checkbox = document.getElementById("agreeCheckbox");
checkbox.addEventListener("change", (event) => {
if (event.target.checked) {
console.log("동의가 선택되었습니다.");
} else {
console.log("동의가 해제되었습니다.");
}
});
</script>체크박스가 선택되거나 해제될 때 change 이벤트가 발생하며, 상태에 따라 다른 메시지가 출력됩니다.
✅ 사용 예제 3: 입력 필드 값 변경
<label for="nameInput">이름을 입력하세요:</label>
<input type="text" id="nameInput" />
<script>
const inputField = document.getElementById("nameInput");
inputField.addEventListener("change", (event) => {
console.log(`입력한 이름: ${event.target.value}`);
});
</script>사용자가 입력 필드에 값을 입력하고 포커스를 다른 곳으로 옮길 때 change 이벤트가 발생하여 입력된 값이 출력됩니다.
🔑 change 이벤트의 특징:
1. 포커스를 잃을 때만 발생: 실시간으로 값 변경을 처리하려면 input 이벤트를 사용하세요.
2. 폼 요소에 주로 사용: select, input, textarea, checkbox, radio 등에서 유용.
이벤트 핸들링 방법 정리
JavaScript에서 이벤트 핸들링은 사용자가 웹 페이지에서 발생시키는 이벤트(클릭, 키보드 입력 등)를 처리하는 방법입니다.
주요 방식은 아래 세 가지입니다.
1️⃣ 인라인 이벤트 핸들러
HTML 태그 안에 이벤트 처리 코드를 직접 작성하는 방식입니다.
HTML 태그 안에 on이벤트 직접 작성
<button onclick="alert('버튼 클릭!')">클릭</button>장점: 간단하고 빠르게 작성 가능.
단점: HTML과 JavaScript가 섞여 있어 유지보수가 어려움.
복잡한 작업에는 부적합.
2️⃣ DOM 요소의 핸들러 속성
JavaScript에서 특정 요소의 이벤트 속성에 함수 연결.
DOM요소.on이벤트명 = 함수;
const button = document.querySelector("button");
button.onclick = () => {
alert("버튼 클릭!");
};장점 : HTML과 JavaScript 분리 → 코드가 깔끔해짐.
단점 : 하나의 이벤트에 하나의 핸들러만 설정 가능. (기존 핸들러를 덮어씀)
3️⃣ addEventListener 방식 (추천)
이벤트에 여러 개의 핸들러를 추가 가능하며, 가장 유연하고 권장되는 방식입니다.
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("첫 번째 핸들러 실행!");
});
button.addEventListener("click", () => {
alert("두 번째 핸들러 실행!");
}); 장점: 하나의 이벤트에 여러 핸들러 추가 가능.
다양한 이벤트 처리 시나리오에 대응 가능.
HTML과 JavaScript 완전히 분리 → 유지보수에 유리.
단점: 문법이 조금 더 복잡.
3가지 방식 정리하면,
1. 선언적 함수 : 간단한 전역 함수에 적합.
2. 함수 표현식 : 콜백 함수나 선언 이후에 호출해야 하는 함수에 적합.
3. 화살표 함수: 간결한 문법과 this를 사용하지 않는 상황에 적합.
각 방식의 특성을 이해하고 적절히 사용해 보세요! 😊
웹 스토리지(Web Storage)
웹 스토리지는 웹 브라우저에서 데이터를 클라이언트(사용자 기기)에 저장할 수 있도록 하는 기술입니다.
이를 통해 사용자는 데이터를 서버로 보내지 않고도 로컬에 저장하고 나중에 재사용할 수 있습니다.
웹 스토리지의 특징
-
데이터를 키(Key)-값(Value) 쌍으로 저장합니다.
-
모든 데이터는 문자열 형태로 저장됩니다.
복잡한 데이터(객체, 배열 등)는 JSON 형식으로 변환해서 저장해야 합니다. -
두 가지 종류가 있습니다:
로컬 스토리지(Local Storage)
세션 스토리지(Session Storage)
로컬 스토리지(Local Storage)
특징
1. 영구적으로 데이터가 저장됩니다.
2. 브라우저를 닫아도 데이터가 유지됩니다.
3. 같은 도메인 내에서만 데이터에 접근 가능합니다.
4. 사용자가 직접 삭제하기 전까지 데이터가 유지됩니다.
// 데이터 저장
localStorage.setItem("key", "value");
// 데이터 가져오기
let value = localStorage.getItem("key");
// 특정 데이터 삭제
localStorage.removeItem("key");
// 모든 데이터 삭제
localStorage.clear();세션 스토리지(Session Storage)
특징
1. 데이터가 현재 세션(탭) 동안만 저장됩니다.
2. 브라우저 탭을 닫으면 데이터가 삭제됩니다.
3. 같은 탭 내에서만 데이터 공유가 가능합니다.
// 데이터 저장
sessionStorage.setItem("key", "value");
// 데이터 가져오기
let value = sessionStorage.getItem("key");
// 특정 데이터 삭제
sessionStorage.removeItem("key");
// 모든 데이터 삭제
sessionStorage.clear();쉽게 비유로 설명하면,
- 로컬 스토리지 : 메모장처럼 데이터를 오래 보관하는 공간.
- 세션 스토리지 : 종이 노트처럼 열려 있는 동안만 데이터를 저장하는 공간.
웹 스토리지를 활용하면 사용자의 브라우저에 데이터를 저장하고, 효율적으로 관리할 수 있습니다. 상황에 따라 적합한 저장 방식을 선택해서 사용해 보세요!
JSON (JavaScript Object Notation)
JSON은 경량의 데이터 교환 형식으로, 데이터를 효율적으로 전송하고 저장할 때 사용됩니다.
JSON의 특징
- 데이터를 키-값 쌍으로 이루어진 텍스트 기반 형식으로 저장합니다.
- 텍스트로만 구성되어 빠르게 전송되고, 여러 시스템 간 호환성이 좋습니다.
- 특정 프로그래밍 언어에 종속되지 않아서 대부분의 언어(JavaScript, Python, Java, C++ 등)에서 사용할 수 있습니다.
- 공개 API를 통해 데이터를 주고받을 때 많이 사용됩니다.
Challenges & Solutions
Results
What I Learned & Insights
직접 모두 작성해야 하는 것은 아닙니다.
하지만 남이 작성한 것을 이해할 수 있어야 합니다.
또 남이 작성한 것을 고칠 수 있어야 합니다.
모르면 고칠 수 없습니다.
데이터분석이나 머신러닝 지식이 더 중요합니다.
나머지는 라이브러리가 다 해줍니다.
웹은 프로그래밍적인 사고가 필요합니다.
어려울수록 몸값은 올라갑니다.
Conclusion
아는 만큼 보입니다.
이전에는 하나의 사이트로 보여지는 부분만 봤다면
이제는 어떻게 구성됐는지
어떤 기능들을 넣었는지 보게 됐습니다.
