나의 개인 프로젝트 도중에 아레 상세 페이지를 클릭하면 다른 사람의 상세 페이지로 넘어가는 그런 방식을 구현을 시도를 하였다
해당 방법은 기존에 구현한 메인페이지에서 미리 해봤던 방법이었고 어렵지 않게 구현했다
1. 우선 메인 페이지에서 사용한 카드를 상세 페이지에서도 구현하기 위해서 함수를 그대로 가지고 왔다
function make_card(name, image, uid, isMember) {
const badge = isMember ? `<span class="badge text-bg-primary">팀원</span>` : ``;
return `<div class="col-lg-3" style="margin-top: 10px">`
+ badge +
`<img height=140 width= 140 src="${image}" alt="...">
<h2 class="fw-normal">${name}</h2>
<p>
<a class="btn btn-secondary detail-btn">View details »</a>
</p>
<input class="uid" id="uid" value=${uid}>
</div>`;
}
2. 상세 페이지의 내용을 보여주기 위해서 DB를 조회하고
const querySnapshot = await getDocs(
query(collection(db, "cards"), orderBy("creationTimestamp"))
);
const card_rows = $("#card-rows");
querySnapshot.forEach((doc) => {
const { name, image, isMember } = doc.data();
const temp_html = make_card(name, image, doc.id, isMember);
card_rows.append(temp_html);
});
3. 상세 페이지에서 다른 상세 페이지로 넘어가기 위에서 uid 값을 queryParameter로 받기 위해서 주소에 uid 값 입력!!
let detail_btn_click = (uid) => () => {
let current_href = window.location.href;
if (current_href.split("/").slice(-1)[0].includes("html")) {
window.location =
current_href.split("/").slice(0, -1).join("/") +
"/detail.html?uid=" +
uid;
} else {
window.location = current_href + "?uid=" + uid;
}
};
4. 그리고 마지막으로 위에서 숨겨둔 HTML에 uid 값을
let detail_btn_click = (uid) => () => {
let current_href = window.location.href;
if (current_href.split("/").slice(-1)[0].includes("html")) {
window.location =
current_href.split("/").slice(0, -1).join("/") +
"/detail.html?uid=" +
uid;
} else {
window.location = current_href + "?uid=" + uid;
}
};넘겨주면 끝!!... 인데
UID 값이 안넘어간다?? 왜지??
우선 몇가지 가설을 세워봤다
1. 오타의 가능성
2. DB에서 데이터를 잘못 받아서 건넬 가능성이 있다
3. HTML에서 아이디 값으로 받아서 HTML 생성시에 안에서 중복된 아이디 값으로 리턴했을 가능성이 높다
이 3개의 가설을 들고 확인을 해봤다
1. 오타 : 찾아보니까 없었다
2. DB에서 데이터를 잘못 받아서 건넬 가능성이 있다
- 이 가설은 생각해보니까 틀린 것이 이미 상세페이지 확인 창에서는 데이터를 잘 받아오고 있고 다른 사람 넘어오는쪽도 uid를 제외하고는 잘 받아오는 것을 확인했다
- 그러면 uid를 받아오는 코드가 잘못된 것인가?? 를 확인해봤는데
const card_rows = $("#card-rows");
querySnapshot.forEach((doc) => {
const { name, image, isMember } = doc.data();
const temp_html = make_card(name, image, doc.id, isMember);
card_rows.append(temp_html);
});여기서 보면 id 값을 잘 가지고 오고 있다
3. HTML에서 아이디 값으로 받아서 HTML 생성시에 안에서 중복된 아이디 값으로 리턴했을 가능성이 높다
이거의 가능성이 높아서 확인해보니까
Array.from(card_rows.children()).forEach((card) => {
let uid = $('#uid').val()
detail_button.onclick = detail_btn_click(uid);
});위에서 아이디 값으로 받고 있었다;;
지금 함수로 아이디를 찍어내서 중복이 되겠다 싶어서 코드를 아이디 기반이 아니고 클래스 명 기반으로 가져와서 해당 값을 가져와서 끌어내야 겠다고 생각을 해서
Array.from(card_rows.children()).forEach((card) => {
let uid = card.getElementsByClassName("uid")[0].textContent;
let detail_button = card.getElementsByClassName("detail-btn")[0];
detail_button.onclick = detail_btn_click(uid);
});이런식으로 따로 따로 받을수 있도록 했는데
또 Uid 조회가 안되는 것이 아닌가??
그래서 해당 이유를 찾아보던 중에
Array.from(card_rows.children()).forEach((card) => {
let uid = card.getElementsByClassName("uid")[0].value;
let detail_button = card.getElementsByClassName("detail-btn")[0];
detail_button.onclick = detail_btn_click(uid);
});위에 textContent를 jQuery에서 사용하는 방식인 val()로 바꾸니까 정상적으로 값을 잘 가져오는 것을 확인했다
이유를 확인해보니까 textContent는 주로 <p> 태그 같은 DOM 요소 안에서 텍스트를 꺼내지만
value는 입력요소 안에서 현재 값을 꺼낸다고 한다 즉
<input class="uid" id="uid" value=${uid}>
여기서 입력요소를 썻기 때문에 value를 쓰는것이 더 적합했다는 뜻이 된다
오늘의 결론
1. 입력 태그에서는 value를 쓰는 것이 조금 더 안정적이다