til.23.06.08

Jean·2023년 6월 8일
0


오늘은 코드 리뷰 시간을 가졌다...
뭔가 난 한게 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");
});

요정도와
팀원의 코드에서 충돌나는거 고치고 오타 조금 수정하는 정도..?
완전 꾸미기와 프론트영역의 느낌이 강한부분은 제외하고 발표해서
내 발표시간이 제일 짧았다 후후후

내일은 아마 팀프젝 회고가 올라오지 않을까?

profile
햇내기 개발자 지망생

0개의 댓글