[TIL]230607

리뷰 posting

저장되어 있던 데이터를 가져와서 기존 배열/새 배열에 데이터를 변경해주는 함수를 짜주셨다.
해당 코드에서 새로고침을 하지 않으면 변경이 되지 않았기 때문에 리뷰 버튼이 클릭되면 posting 함수도 실행하고 새로고침도 실행하도록 코드를 고쳤다.

window.onload = function () {
  const saveButton = document.getElementById("submit-btn");
  saveButton.addEventListener("click", () =>{
    posting();
    location.reload();
  });
  displayComments();
};

추가할 것

1. 저장할 때 유효성 검사
   -> 작성자, 비밀번호, 코멘트가 없을 경우
   공백 체크

if (review.trim() === "") {
    alert("리뷰를 입력해주세요.");
  } else {
    if (name.trim() === "") {
      alert("닉네임을 입력해주세요.");
    } else {
      if (pw.trim() === "") {
        alert("비밀번호를 입력해주세요.");
      } else {
        let movie = localStorage.getItem(id); // 이전에 저장된 movie 데이터 가져오기
        movie = movie ? JSON.parse(movie) : {};

        // 기존 댓글이 있을 경우에는 배열에 추가, 없을 시 새로운 배열로 추가
        
      }
    }
  }
};

2. 작성자도 보이도록 수정하기
   -> name을 출력하게 createMovieDetail()을 수정하였다.

3. 메인 페이지 불러왔을 때 기존 데이터 지워지지 않도록 코드 수정하기
   main.js의 movieData에서 로컬이 비어있을 때만 데이터를 저장하도록 수정해주었다.

4. 등록되어있는 비밀번호 입력칸이 평소에는 보이지 않다가 수정 버튼을 누를 경우 보이게 만들어준다.

병합 중 발생 오류

pagination.js:27 Uncaught (in promise) ReferenceError: loadmovies is not defined
스크립트 태그가 제대로 작동하지 않는다.

1) 팀원의 코드 <- 내 코드
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
2) 내 코드 <- 팀원의 코드
pagination.js:26 Uncaught (in promise) ReferenceError: loadmovies is not defined
각각의 코드가 동작이 안된다.

1번 오류의 경우 html이 수정되지 않아서 id를 불러오지 못했던 것이였다.
2번 오류의 경우 내가 api key를 모듈에서 불러와 사용하도록 파일을 분류하였더니 타입에 문제가 있어서인지 동작이 되지 않았다.

<script src="src/main.js" type="module"></script>
<script src="src/pagination.js" type="module"></script>

스크립트 둘 다 module로 적용하고, pagination 부분에서 필요한 함수를 import하여 작동할 수 있게 만들었다.

• pagination.js
  import * as load from "./main.js";
  -> 동작은 load.loadmovies(); 로 실행

• main.js

export const loadmovies = async() => {
    const options = {
        method: 'GET',
        headers: {
          accept: 'application/json',
          Authorization: apikey.aut,
        }
      };
    const response = await fetch(apikey.apiUrl, options);
    const data = await response.json();
    //console.log(data['results']);
    return data['results'];
};

시계 추가

시간을 보여주는 기능을 추가하셨는데, html에서 script를 넣는 과정에 defer가 존재했다.

<script src="src/clock.js" defer></script>

해당 코드는 HTML parsing을 시도 중에 script defer를 만나게 되면 병렬적으로(비동기 처리) HTML parsing과 js fetching이 진행되고 완료되면 js file을 실행한다.

import 수행 과정에도 시간을 단축할 수 있다.

충돌 수정을 하는 과정만 하더라도 오류가 발생해서 병합하는데 오래 걸린 것 같다.