231026 TIL) 팀 프로젝트 기능 영화 상세페이지에 합치기

오늘 한 일

①자바스크립트 예제 풀기

②팀 프로젝트 과제

ⓐ유효성검사 추가

ⓑ상세페이지 각각 리뷰기능 추가

③프로그래머스 문제풀기

④못들은 강의 듣기

 

 

팀 프로젝트 3일차다. 영화리뷰댓글작성 기능구현은 이미 마쳤고 이제 영화 상세페이지와 합치는 일만 남았었다.

movieid를 찾아서 movieid별로 각각 다른 댓글리뷰창을 저장하고 불러와야했다. 사실 말이 쉽지 합치는게 어떻게 해야할지 처음에는 감이 안왔다.  API로 불러오는게 아니라 상세페이지와 맞는 ID를 찾아서 넣어야했다.

상세페이지의 실행창의 콘솔을 보고 준 정보중에 ID가 있었다. 일단 저 콘솔 안에 있는 id값을 가져오려고 했는데 결국 실패했다. 그러다 다른 팀원이 한 코드 중에 처음보는 코드가 있었다.

 

 

const movieId = urlParams.get('id');

현재 웹 페이지의 URL에서 'id' 매개변수의 값을 가져오는 코드. 이걸 알게되었다. 
url.Params가 현재 페이지 URL의 매개변수를 가져오고 조작하는 기능이고 get('id')는 해당 웹페이지의 id를 가져온다. 이걸로 너무 간단하게 해결할 수 있었다.

 console.log(movieId);를 작성 함수 안에 넣고 로컬스토리지에 movieid 요소 추가하고 

 

    // 영화 ID에 따라 필터링
    if (post.movieId === movieId) {
      let el = makeDiv(post.writer, post.pwd, post.content, post.star);
      list.appendChild(el);
    }
  }
}

 

불러올 때는 movieId와 맞는 영화를 불러오기위해  loadLocalStrorage에 위 코드를 넣었다. 결과적으로 성공적이었다. a 영화 상세페이지에 들어가서 리뷰작성하고 새로고침해도 유지되고, 다른 영화에 들어가면 그 전에 다른 영화에서 작성한 내용은 안보인다.

 

 

내일 할 일

①자바스크립트 예제 풀기

②팀 프로젝트 과제

ⓐjs 분할하기

ⓑ내가 짠 코드 설명할 줄 알 정도로 이해하기

③프로그래머스 문제풀기

④못들은 강의 듣기

ⓐ영화 개인프로젝트 해설영상

ⓑ웹개발 강의 복습