[TIL] 05.06

목요일 팀회의 이후부터 기능구현을 시작했다. 메인페이지에서 영화를 클릭하면 상세페이지로 넘어오고, 상세페이지는 사진과 같이 상단 - 영화에 대한 설명 / 하단 - 리뷰작성,수정,삭제와 리뷰목록이 보이게하는 기능을 구현하였다.
우선, 단계별로 정리하자면

1. 영화 ID 를 url을 통해 받아와서 영화 상세페이지를 구성한다.
2. 상세페이지에는 왼쪽에 영화 포스터, 오른쪽에 영화 개요와 평점, 비슷한 장르의 영화추천으로 나눈다.
   -> grid 속성 사용해서 반응형으로 만들기
3. 하단에 form 태그를 사용해서 리뷰창을 만들고 영화ID를 key 값으로 하는 리뷰객체 생성
   -> grid 속성 사용
4. swal 사용으로 비밀번호 유효성검사를 진행하고 수정,삭제시 본인만 접근 가능하도록 한다.
5. 이를 로컬스토리지에서 관리한다.

위와 같은 순서로 진행했고, 단계별로 어려웠던점이 있었다.

---

❗문제에서 해결까지

1. 데이터가 안넘어오는 부분

* 해결책

//카드를 노출시키는 함수 하단
window.location.href = `review.html?id=${movie.id}`;

//상세페이지 js 상단
const url = new URLSearchParams(window.location.search);
const movieId = url.get("id");

// + fetch(url -> movieId 추가, options)

• window.location.search 는 현재 URL의 쿼리 문자열 부분을 가져온다.
  ex) https://example.com?id=123&name=john 에서 ?id=123&name=john이 쿼리 문자열이다.
• new URLSearchParams( ) 는 이 쿼리 문자열을 파싱하여 URLSearchParams 객체를 생성한다.
• url.get("id") 는 URLSearchParams 객체에서 "id" 매개변수의 값을 가져온다.
  ex) moveId = "123" 이 된다.
  -> 이렇게 영화 id를 가져왔고, 상단구성과 리뷰관리할때 사용했다.

2. 익숙하지 않은 grid

지난 개인과제를 반응형으로 수정하면서 grid 를 사용해봤는데, 어려울거라 생각했지만 틀 없이 배치시키는 것 보다 훨씬 편했다. 이번에도 그리드를 사용하기 위해 상단/하단 크게 2개의 구역을 나눠서 적용했다.
다만, TMDB에 등록된 영화 포스터의 크기가 세로로 길고, 가운데 정렬도 안되고.. 너무 커서 사진이 잘리는 부분이 마음에 안들었다.

* 해결책

grid-template-colums 에서 포스터의 구역을 좁게 설정하는대신 사진 비율을 100% 로 주었고 place-item 위치를 center로 적용했더니 그래도! 원본 포스터와 비슷하게 만들었다.
아직은 어떤 UI가 바람직한지 감이 잘 안와서 과제를 할때마다 항상 고민중이다.
아래와 같이 작성칸과 리뷰의 구분을 바꿨는데 뭐가 나은지는 팀원분들께도 여쭤봐야겠다.
리뷰를 작성해주세요 칸을 봐보면 비밀번호 입력칸보다 작은데 저것도 크기 일정하게 맞추려고 그리드 속성을 여러번 수정했다! 그리드 속성에 대해서는 팀프로젝트 제출 후에 따로 정리해볼 생각이다.

결국 아래와 같이 만들었는데 이번엔 수직 가운데정렬을 하고싶어서 검색해보니 align-self: center; 속성이 필요했다.

그나저나.. 캡쳐된 댓글작성시간을 보니 이제 일찍 자긴 해야겠단 생각이 드네 ㅜㅜ

3, 4. 객체와 배열 / 삭제 메서드

처음에 리뷰작성 기능을 구현했을때 id 마다 구분하지 않아서, 다른 영화를 선택해도 같은 리뷰들이 나타났다.
개인과제때 카드 클릭시 영화 id가 swal로 보이도록 했던것을 기반으로 영화 ID 를 키로 사용해서 해당 영화에 대한 리뷰들을 배열로 관리하는 구조로 만들었다.

• 영화 ID를 키값으로 하는 객체 안에는 해당 영화에 대한 리뷰들이 배열 형태로 저장되어 있다.
  • reviews 객체의 키값은 영화 ID이다.
  • 각 영화 ID에 해당하는 값은 그 영화에 대한 리뷰 배열이다.
  • 리뷰 배열안의 각 요소는 하나의 리뷰 객체이다.
  • 리뷰 객체에는 리뷰내용, 시간, 비밀번호 가 저장되어있다.

* 해결책

즉, 비밀번호에 접근하려면 reviews[movieId][index].password 이렇게 타고 들어가야한다. 그러다보니 리뷰삭제기능을 구현할때 delete 를 써야할지 splice 를 써야할지 헷갈렸는데 검색해보고 다시 개념정리를 해봤다.

• delete / splice
  • delete : 객체의 속성 삭제시 사용하는 키워드
    ex) delete obj.name -> obj 객체의 name 속성 삭제
    -> delete 키워드로 배열의 요소를 삭제하게 되면 해당 요소를 undefined 로 만든다. (배열 구조 깨짐 / 데이터 관리 어려움)
  • splice : 배열의 요소 삭제시 delete 보다 splice() 함수 사용이 더 좋다.
    -> 배열의 구조유지 / 삭제된 요소 이후의 인덱스 자동 조정

결국 나는 배열을 삭제해야하므로 splice( ) 를 사용했다.

4-1. 유효성 검사

비밀번호를 입력받을때 8글자 이상, 영어 대문자 포함하는 형식으로 만들고 싶었다.
password.length로 길이에는 접근이 가능하겠는데 영어 대문자를 거를때는 어떻게 하는지 몰라서 검색해보았다.

• 정규표현식 /[A-Z]/
  -> 대문자 알파벳 A-Z까지 중 하나라도 포함되어 있는지 검사한다.
  -> [A-Z]는 문자 클래스라고 불리며, 대괄호 안에 포함된 문자들 중 하나라도 일치하면 true 를 반환한다.
  -> /[A-Z]/.test(reviewPassword) 를 통해 reviewPassword 에 대문자 알파벳이 포함되어있는지 검사한다.

5. 로컬 스토리지 접근

로컬스토리지를 처음사용해봐서 데이터를 어떻게 접근해야하는지 몰랐다. 영화 id를 key로하는 객체로 만들었기때문에 로컬스토리지에 저장된 리뷰데이터 역시 객체로 바꿔주었다.

• 로컬스토리지에는 문자열 형태로 데이터가 저장되므로, 이를 js 객체로 사용하기 위해서는 변환이 필요하다.
• JSON.parse( ) 함수 사용 -> json 형식의 문자열을 javascript 객체로 변환해준다.

  // 로컬 스토리지에서 리뷰 데이터 가져오기
  let reviews = JSON.parse(localStorage.getItem("reviews")) || {};	// -> reviews 데이터를 문자열에서 객체로 변환해준다. 
  // || {} : reviews 데이터가 없는경우 빈객체 { } 를 기본값으로 설정해서 reviews 가 항상 객체형태를 유지하도록 보장한다.
  // -> 데이터가 없는 경우에도 안전하게 처리 가능

• 로컬스토리지 데이터 삭제하는 법
  • 전체데이터 삭제 :
    -> 브라우저에서 개발자도구 - 로컬스토리지 - localStorage.clear( ) 를 사용 -> 로컬스토리지에 저장된 모든 데이터를 삭제
  • 특정 키 값 삭제 :
    -> localStorage.removeItem('키 이름')

이 외에도 SweatAlert 사용하면서 preConfirm 함수 쓸때 대문자를 소문자로 쓰는 바람에 댓글 삭제가 계속 안됐던것과..-> 바로 코드스펠체커 확장프로그램 다운받았다..ㅋㅋㅋ ㅠㅠ
배열과 객체안에 접근하는 법 등 아직 자바스크립트 개념이 잘 안잡힌 부분이 많다고 느껴진다.
브랜치 사용도 익숙해져가고있고..! 이번주에 팀프로젝트 마무리가 되면 확실히 깃 사용법은 익숙해질것같다.
감사하게도 팀원분들 덕분에 모르는 부분을 하나씩 해결해나가고 있다.
이번주 마무리까지 잘 해보자!
-> Swal / grid / 배열 메서드 / 브랜치사용, pr 에 대해서는 따로 하나씩 포스팅을 해야겠다는 다짐을..!!