반응형
SMALL
📌 push()와 pop()란?
push()와 pop() 메서드는 JavaScript의 배열(Array) 조작 메서드로, 데이터를 쉽게 추가하거나 제거할 수 있습니다.
이 메서드는 스택(Stack) 자료구조처럼 LIFO(Last In First Out) 원칙을 따릅니다.
✅ 기본 문법
// push(): 배열의 끝에 요소 추가
array.push(element);
// pop(): 배열의 마지막 요소 제거
array.pop();- push(element): 배열의 끝에 새로운 요소를 추가하고 배열의 길이를 반환
- pop(): 배열의 마지막 요소를 제거하고 제거된 값을 반환
📌 push() & pop() 실용 예제 10가지
1️⃣ 배열에 요소 추가 및 제거
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>push & pop 예제</title>
</head>
<body>
<button id="add">추가</button>
<button id="remove">제거</button>
<ul id="list"></ul>
<script>
let items = [];
// 리스트 업데이트 함수
function updateList() {
document.getElementById("list").innerHTML = items.map(item => `<li>${item}</li>`).join("");
}
// push(): 요소 추가
document.getElementById("add").addEventListener("click", function() {
items.push("새로운 아이템 " + (items.length + 1));
updateList();
});
// pop(): 마지막 요소 제거
document.getElementById("remove").addEventListener("click", function() {
items.pop();
updateList();
});
</script>
</body>
</html>✅ 설명: 버튼을 클릭하면 배열에 아이템을 추가하거나 제거할 수 있습니다.
2️⃣ 최근 방문한 페이지 저장하기
<button id="back">뒤로 가기</button>
<p id="currentPage">현재 페이지: Home</p>
<script>
let historyStack = ["Home"];
function updatePage() {
document.getElementById("currentPage").innerText = "현재 페이지: " + historyStack[historyStack.length - 1];
}
// 페이지 이동 (push 사용)
function visitPage(page) {
historyStack.push(page);
updatePage();
}
// 뒤로 가기 (pop 사용)
document.getElementById("back").addEventListener("click", function() {
if (historyStack.length > 1) historyStack.pop();
updatePage();
});
visitPage("About");
visitPage("Contact");
</script>✅ 설명: push()와 pop()을 활용하여 최근 방문한 페이지 히스토리를 관리할 수 있습니다.
3️⃣ 입력한 데이터 저장 및 제거 (To-Do List 기능)
<input type="text" id="task" placeholder="할 일을 입력하세요">
<button id="addTask">추가</button>
<button id="undo">실행 취소</button>
<ul id="tasks"></ul>
<script>
let tasks = [];
function updateTasks() {
document.getElementById("tasks").innerHTML = tasks.map(task => `<li>${task}</li>`).join("");
}
// 새로운 할 일 추가
document.getElementById("addTask").addEventListener("click", function() {
let task = document.getElementById("task").value;
if (task) {
tasks.push(task);
document.getElementById("task").value = "";
updateTasks();
}
});
// 마지막 입력 실행 취소
document.getElementById("undo").addEventListener("click", function() {
tasks.pop();
updateTasks();
});
</script>✅ 설명: push()를 이용해 입력한 데이터를 저장하고, pop()을 이용해 실행 취소 기능을 추가할 수 있습니다.
4️⃣ 브라우저 탭 관리하기
<button id="newTab">새 탭 열기</button>
<button id="closeTab">탭 닫기</button>
<ul id="tabs"></ul>
<script>
let tabs = ["Home"];
function updateTabs() {
document.getElementById("tabs").innerHTML = tabs.map(tab => `<li>${tab}</li>`).join("");
}
document.getElementById("newTab").addEventListener("click", function() {
tabs.push("새로운 탭 " + (tabs.length + 1));
updateTabs();
});
document.getElementById("closeTab").addEventListener("click", function() {
tabs.pop();
updateTabs();
});
</script>✅ 설명: push()를 활용해 새로운 브라우저 탭을 관리하고, pop()으로 닫을 수 있습니다.
5️⃣ 최근 검색어 저장 및 삭제
<input type="text" id="search" placeholder="검색어 입력">
<button id="saveSearch">검색 저장</button>
<button id="clearLast">마지막 검색 삭제</button>
<ul id="searchList"></ul>
<script>
let searchHistory = [];
function updateSearchList() {
document.getElementById("searchList").innerHTML = searchHistory.map(term => `<li>${term}</li>`).join("");
}
document.getElementById("saveSearch").addEventListener("click", function() {
let term = document.getElementById("search").value;
if (term) {
searchHistory.push(term);
document.getElementById("search").value = "";
updateSearchList();
}
});
document.getElementById("clearLast").addEventListener("click", function() {
searchHistory.pop();
updateSearchList();
});
</script>✅ 설명: push()와 pop()을 활용해 최근 검색어 저장 및 삭제 기능을 구현할 수 있습니다.
6️⃣ 최근 닫은 창 기록 저장
<button id="closeWindow">창 닫기</button>
<button id="restoreWindow">복원</button>
<ul id="windowList"></ul>
<script>
let closedWindows = [];
function updateWindowList() {
document.getElementById("windowList").innerHTML = closedWindows.map(win => `<li>${win}</li>`).join("");
}
document.getElementById("closeWindow").addEventListener("click", function() {
closedWindows.push("창 " + (closedWindows.length + 1));
updateWindowList();
});
document.getElementById("restoreWindow").addEventListener("click", function() {
closedWindows.pop();
updateWindowList();
});
</script>✅ 설명: push()로 창을 닫고, pop()으로 복원하는 기능을 구현합니다.
7️⃣ 방문한 웹사이트 목록 저장
<button id="visit">웹사이트 방문</button>
<button id="undoVisit">마지막 방문 취소</button>
<ul id="visitedSites"></ul>
<script>
let visitedSites = [];
function updateSites() {
document.getElementById("visitedSites").innerHTML = visitedSites.map(site => `<li>${site}</li>`).join("");
}
document.getElementById("visit").addEventListener("click", function() {
visitedSites.push("사이트 " + (visitedSites.length + 1));
updateSites();
});
document.getElementById("undoVisit").addEventListener("click", function() {
visitedSites.pop();
updateSites();
});
</script>✅ 설명: 방문한 웹사이트 목록을 push()로 저장하고, pop()으로 삭제할 수 있습니다.
8️⃣ 웹페이지 입력 히스토리 저장
<input type="text" id="userInput" placeholder="입력하세요">
<button id="saveInput">저장</button>
<button id="undoInput">되돌리기</button>
<ul id="inputHistory"></ul>
<script>
let inputHistory = [];
function updateInputHistory() {
document.getElementById("inputHistory").innerHTML = inputHistory.map(input => `<li>${input}</li>`).join("");
}
document.getElementById("saveInput").addEventListener("click", function() {
let input = document.getElementById("userInput").value;
if (input) {
inputHistory.push(input);
document.getElementById("userInput").value = "";
updateInputHistory();
}
});
document.getElementById("undoInput").addEventListener("click", function() {
inputHistory.pop();
updateInputHistory();
});
</script>✅ 설명: 사용자가 입력한 데이터를 push()로 저장하고, pop()으로 삭제할 수 있습니다.
9️⃣ 로그인한 사용자 기록 관리
<button id="login">로그인</button>
<button id="logout">로그아웃</button>
<ul id="users"></ul>
<script>
let users = [];
function updateUsers() {
document.getElementById("users").innerHTML = users.map(user => `<li>${user}</li>`).join("");
}
document.getElementById("login").addEventListener("click", function() {
users.push("사용자 " + (users.length + 1));
updateUsers();
});
document.getElementById("logout").addEventListener("click", function() {
users.pop();
updateUsers();
});
</script>✅ 설명: push()를 활용하여 로그인한 사용자를 저장하고, pop()으로 로그아웃할 수 있습니다.
🔟 웹 브라우저 뒤로 가기/앞으로 가기 구현
<button id="back">뒤로 가기</button>
<button id="forward">앞으로 가기</button>
<p id="current">현재 페이지: Home</p>
<script>
let backStack = [];
let forwardStack = [];
let currentPage = "Home";
document.getElementById("back").addEventListener("click", function() {
if (backStack.length > 0) {
forwardStack.push(currentPage);
currentPage = backStack.pop();
document.getElementById("current").innerText = "현재 페이지: " + currentPage;
}
});
document.getElementById("forward").addEventListener("click", function() {
if (forwardStack.length > 0) {
backStack.push(currentPage);
currentPage = forwardStack.pop();
document.getElementById("current").innerText = "현재 페이지: " + currentPage;
}
});
</script>✅ 설명: push()와 pop()을 활용해 브라우저의 뒤로 가기 및 앞으로 가기 기능을 구현할 수 있습니다.
📌 마무리 🎯
- push()는 배열 끝에 새로운 요소 추가
- pop()은 배열의 마지막 요소 제거
- push()와 pop()을 활용하면 데이터 관리, 방문 기록, 입력 취소 등 다양한 기능 구현 가능
- 실제 개발에서는 장바구니 기능, 브라우저 히스토리 관리, 음악 재생 목록, 로그인 시스템 등에서 많이 활용됨
반응형
LIST