📅 날짜
2025-02-13
📌 학습 내용
🟠 1. JavaScript 함수의 기본 형태와 ES6 이후 화살표 함수
JavaScript에서 함수 선언 방식(ES6 이전 vs 이후), 매개변수와 반환값, 가변 인자 등을 학습.
📌 개념 정리
✅ function 키워드(ES6 이전)와 화살표 함수(ES6 이후) 비교
✅ 매개변수 유무, 반환값 유무에 따른 함수 형태
✅ 함수의 재사용성과 유지보수의 중요성
✅ 객체를 반환하는 함수 (return { ... })와 toString() 메서드 활용
✅ 가변 인자(...args)를 활용한 여러 개의 인자 처리
📌 예제 코드
// 기본 함수 선언 방식 (ES6 이전)
function sum1(n1, n2) {
return n1 + n2;
}
// 화살표 함수 (ES6 이후)
const sum2 = (n1, n2) => {
return n1 + n2;
};
// 가변 인자 활용
const sumAll = (...args) => {
return args.reduce((acc, num) => acc + num, 0);
};
console.log(sum1(10, 20)); // 30
console.log(sum2(10, 20)); // 30
console.log(sumAll(10, 20, 30, 40, 50)); // 150🟠 2. JavaScript의 호이스팅(Hoisting) 개념
JavaScript에서 변수 및 함수 선언이 실행 전에 메모리에 저장되는 원리를 학습.
📌 개념 정리
✅ 변수 호이스팅
var는 호이스팅되지만 초기화되지 않음 (undefined)let,const는 TDZ(Temporal Dead Zone)에 걸려 초기화 전 접근 불가
✅ 함수 호이스팅
function선언문은 호이스팅되어 실행 전에 메모리에 저장됨- 화살표 함수(
const fn = () => {})는 호이스팅되지 않음 (ReferenceError 발생)
✅ var 사용 지양, let/const 사용 권장
✅ 화살표 함수는 기본적으로 익명 함수로 처리됨
📌 예제 코드
// 변수 호이스팅 확인
console.log(a); // undefined (var는 호이스팅되지만 초기화되지 않음)
var a = 10;
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
// 함수 호이스팅 확인
hello1(); // 정상 실행
function hello1() {
console.log("Hello World");
}
hello2(); // ReferenceError: Cannot access 'hello2' before initialization
const hello2 = () => console.log("Hello World 2");🟠 3. JavaScript의 클로저(Closure) 개념
JavaScript에서 함수가 실행될 당시의 환경을 유지하면서 내부 변수를 기억하는 원리를 학습.
📌 개념 정리
✅ 클로저란?
- 내부 함수가 외부 함수의 변수를 참조할 수 있는 구조 (렉시컬 스코프 적용)
✅ 클로저의 주요 특징과 활용
- 정보 은닉(Information Hiding): 변수를 외부에서 직접 접근하지 못하도록 보호
- 데이터 보존(Data Persistence): 함수 실행 시점의 환경을 유지하여 상태값 지속 관리
- 비동기 처리(Asynchronous Operations): 클로저를 사용하여 비동기 작업에서 데이터를 유지
📌 예제 코드
// 클로저 예제: 외부 함수가 내부 함수의 변수를 유지함
function outer() {
let count = 0; // 상태값 유지
return function addOne() {
count++;
console.log(`현재 count: ${count}`);
};
}
const closureFunc = outer();
closureFunc(); // 현재 count: 1
closureFunc(); // 현재 count: 2
closureFunc(); // 현재 count: 3🟠 4. JavaScript를 활용한 네비게이션 메뉴 동적 생성
사용자의 입력값을 기반으로 동적으로 네비게이션 메뉴를 생성하는 기능 구현.
📌 개념 정리
✅ 배열을 사용한 데이터 관리 (split(), forEach(), map())
✅ DOM 조작 (document.createElement(), appendChild(), removeChild())
✅ 이벤트 리스너(addEventListener())를 활용한 동적 UI 생성
✅ 모바일/데스크탑 뷰모드 변환 기능 (wrapperEl.style.width 조정)
📌 예제 코드
const navBtn = document.querySelector('.nav-btn');
navBtn.addEventListener('click', () => {
const form = document.navForm;
const menuArr = form.menuname.value.split(' ');
while(mainMenuEl.firstChild){
mainMenuEl.removeChild(mainMenuEl.firstChild);
}
menuArr.forEach((menuName) => {
const liEl = document.createElement('li');
const aEl = document.createElement('a');
aEl.setAttribute('href', 'javascript:void(0)');
aEl.innerHTML = menuName;
liEl.appendChild(aEl);
mainMenuEl.appendChild(liEl);
});
});🟠 5. JavaScript를 활용한 식당 데이터 필터링 및 동적 표시
JSON 데이터를 기반으로 특정 카테고리(한식)만 필터링하고 UI에 동적으로 표시하는 기능 구현.
📌 개념 정리
✅ 데이터 필터링 (filter())로 특정 카테고리(한식)만 선택
✅ sort()와 map()을 사용하여 필요한 데이터만 추출
✅ replaceAll('<br />', '\n')을 사용해 메뉴 문자열 정리 후 split('\n')으로 배열 변환
✅ 메뉴 가격에서 '원'과 ',' 제거하여 숫자로 변환 (replace(), match(/\d/))
✅ 동적으로 <select> 옵션을 생성하여 식당 목록 표시
✅ 사용자가 식당을 선택하면 해당 메뉴를 find()를 이용해 찾아 UI에 출력
📌 예제 코드
const showMenuBtn = document.querySelector('.show-menu-btn');
showMenuBtn.addEventListener('click', () => {
const form = document.form1;
const selectedRestorant = form.selectRestorant.value;
const restorantEl = RenewaledMenu.find(item => item.BZ_NM === selectedRestorant);
const restorantMenuBlockEl = document.querySelector('.restorant-menu-block');
restorantMenuBlockEl.innerHTML = restorantEl.MNU.map(menu => menu.join(' - ')).join('<br>');
});📝 요약
| 학습 내용 | 주요 개념 | 핵심 키워드 |
|---|---|---|
| JavaScript 함수 | 함수 선언 방식(ES6 이전 vs 이후), 매개변수, 반환값, 가변 인자 | function, 화살표 함수, ...args |
| JavaScript 호이스팅 | 변수와 함수의 선언이 실행 전 메모리에 저장되는 현상 | var, let, const, TDZ, 함수 선언 |
| JavaScript 클로저 | 내부 함수가 외부 함수의 변수를 참조하는 구조 | 렉시컬 스코프, 데이터 보존, 정보 은닉 |
| 네비게이션 메뉴 동적 생성 | 사용자 입력값을 기반으로 UI 생성 | DOM 조작, 이벤트 리스너, createElement |
| 식당 데이터 필터링 | JSON 데이터를 활용한 데이터 처리 및 UI 표시 | filter, sort, map, replaceAll |
