🌐 [ 쿼리스트링 (Query String) ]

---

📘 [ 개념 ]

항목	설명
💡 정의	웹주소(URL)에 매개변수를 포함하여 데이터 전달하는 방식
🔗 형태	URL?변수명=값&변수명=값
📦 용도	페이지 간 데이터 전달, 게시물 선택, 검색 결과 유지 등

예시:
👉 https://example.com/detail.html?bno=3&user=hong

---

⚙️ [ 사용법 ]

(1) 이동하는 방법

방법	코드
🧩 HTML	<a href="URL?변수명=값">이동</a>
🧠 JavaScript	location.href = "URL?변수명=값";

(2) URL에서 변수값 가져오기

let params = new URLSearchParams(location.search);
let value = params.get("변수명");

코드	설명
location.search	? 이후의 쿼리 문자열을 반환
new URLSearchParams()	쿼리 문자열을 다루기 쉽게 객체로 변환
.get('변수명')	특정 변수의 값을 가져옴

---

🧩 [ 응용 예제 ]

📜 예시 코드

// 1️⃣ URL 상의 웹주소 가져오기
let params = new URLSearchParams(location.search);
let id = params.get('id');

// 2️⃣ localStorage에 저장된 리스트와 비교
let boardList = JSON.parse(localStorage.getItem('boardList'));
let board = boardList.find(b => b.id == id);

// 3️⃣ 일치하는 게시물의 정보 출력
document.querySelector('.title').innerHTML = board.title;
document.querySelector('.content').innerHTML = board.content;

단계	설명
①	URLSearchParams로 URL의 매개변수 가져오기
②	localStorage의 데이터와 비교
③	일치하는 데이터의 내용 화면에 출력

---

🛠️ [ 주의 및 활용 팁 ]

상황	설명
🧾 수정 / 삭제 / 등록 기능 구현 시	각 기능에서 동일한 쿼리스트링을 이용하여 해당 게시물 식별
🪟 수정 페이지 이동 시	input 태그의 value에 기존 데이터를 넣어 미리 채워줌
♻️ 데이터 반복 사용	게시판, 쇼핑몰, 예약 시스템 등에서 자주 사용

---

💬 [ 느낀점 ]

• 💡 대부분의 사이트(특히 게시판, 쇼핑몰)에서는 쿼리스트링을 적극적으로 활용한다.
• 🚀 단순히 데이터 전달이 아닌, 페이지 간의 동적 상호작용의 핵심 도구이다.
• 👥 프로젝트에서 의견 충돌도 하나의 경험이다. 협업은 ‘소통’이 핵심!
• 🔥 자만하지 말고 꾸준히 성장하자. 매번의 프로젝트가 발전의 기회다.

---