오늘은 코드 리뷰 시간을 가졌다...
뭔가 난 한게 merge 밖에 없는 느낌이긴한디....
다른사람의 코드를 들으니 새로운 정보를 알게 되었다
const $comment = document.querySelector("#comment");
변수앞에 왜 $를 붙이는 지 궁금했는데
querySelector
이런 류의 친구들은 다른 변수와 혼동하지 않기 위해 붙여준다고 했다
아주 꿀팁인듯..
뭔가 한게 없긴하지만 코드리뷰를 했다
상세 페이지로 영화아이디와 함께 넘어가기 구현한 것과
//main.js
function handleMovieCardClick(event) {
const movieId = event.currentTarget.dataset.movieId;
window.location.href = `/detail.html?id=${movieId}`;
}
//detail.js
const urlParams = new URLSearchParams(window.location.search);
document.addEventListener("DOMContentLoaded", () => {
//html의 컨텐츠들이 전부 로딩 된 후 실행
fetch(
`https://api.themoviedb.org/3/movie/${movieId}?language=ko-KR`,
options //fetch url로 보내기 options와 함께
)
.then((response) => response.json()) //받은데이터를 json으로 파싱
.then((res) => printCard(res))
.catch((err) => console.error(err)); //위의 과정에서 에러가 나면 이쪽으로
});
<div class="modal">
<div class="form">
<div>
<div class="input">
<label for="name">이름</label>
<input id="name" class="modal-input" />
</div>
<div class="input">
<label for="psw">비밀번호</label>
<input id="psw" class="modal-input" type="password" />
</div>
<div class="textarea">
<label for="comment">리뷰 남기기</label>
<textarea id="comment"></textarea>
</div>
</div>
<button class="modal-btn" id="submit">등록</button>
<button class="modal-btn" id="close">닫기</button>
</div>
</div>
modal은 body의 맨위에 둔다
.modal {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 30px;
display: none;
}
.show-modal {
display: block;
}
모달은 기본적으로 안보이게 설정하고
js로 조작해서 보이게 만드는게 포인트
//모달 창 열기
document.querySelector(".modal-open").addEventListener("click", () => {
modal.classList.add("show-modal");
});
//모달 창 닫기
document.querySelector("#close").addEventListener("click", () => {
modal.classList.remove("show-modal");
});
요정도와
팀원의 코드에서 충돌나는거 고치고 오타 조금 수정하는 정도..?
완전 꾸미기와 프론트영역의 느낌이 강한부분은 제외하고 발표해서
내 발표시간이 제일 짧았다 후후후
내일은 아마 팀프젝 회고가 올라오지 않을까?