팀 프로젝트가 시작되었다.
개인 과제로 만들었던 영화 검색 페이지에서 추가적으로 카드를 클릭 시 상세 페이지로 넘어가고 해당 페이지에 간략한 영화 소개와 리뷰 기능을 추가하는 프로젝트이다.
localStorage를 사용하여 정보를 저장하기로 하였다.
처음 접해보는 개념이라 검색을 많이 했는데...
휘발성이 강한 섹션 저장 방식과는 다르게 localStorage를 사용하면 반영구적으로 local에 저장을 할 수 있다고 한다.
저장 방식은
localStorage.setItem("key", "value")
불러오기는
localStorage.getItem("key")
로 단순한 구조를 띄었다.
우리가 하고자 했던건 리뷰에 해당하는 영화 id와 작성자 이름, 리뷰 내용, 비밀번호 등을 배열 형식으로 저장해둘 필요가 있었다.
하지만 localStorage.setItem 방식으로 키 값을 id로 두고 저장을 해보았더니 데이터가 덮어씌워지는 현상이 발생했다.
여러번 저장을 해도 같은 키값을 가진 다른 정보가 저장되는게 아니라, 객체 저장과 마찬가지로 같은 키값이면 정보가 덮어씌워졌다.
해결방안을 모색하다가 다음과 같이 해결하였다.
let reviewArr = []
// 빈 배열을 하나 선언해주고
reviewArr.push([$inputName.value, $inputReview.value, $inputPwd.value]);
//push를 통해서 배열 안에 내가 저장하고자 하는 정보를 집어넣었다.
localStorage.setItem(movieTitle, JSON.stringify(reviewArr));
//그리고 키값(movieTitle이라는 변수에 저장해두었다.)을 고정하고 JSON.stringify를 통해서 문자열화 시킨 값을 저장하였다.이렇게 해결이 되나 싶었지만 reviewArr이 빈 배열로 초기화가 되면서 값이 유지되지 않았다.
그래서 해당 부분을 localStorage에서 불러온 값이 존재할 경우 해당 값을 불러와서 집어넣은 채로 push를 진행하고 값이 없을 경우에만 []로 초기화해주었다.
if(localStorage.getItem(movieTitle){
reviewArr = JSON.parse(localStorage.getItem(movieTitle))
}else{
reviewArr = []
}다시 시도해본 결과 배열안에 배열이 들어간 내가 원하던 형태로 저장에 성공하였고
이후에 for문을 통해서 해당 배열 값들을 조정할 수 있었다.
다른 문제는 https구조에 대해서 정확하게 알지 못해서 발생한 작은.. 실수였는데 원인을 찾지못해서 오히려 시간이 엄청나게 소요되었다.
기존 index.html 파일에서 연동된 app.js에서 작업을 하다가 카드를 클릭하면 새로운 movieinfo.html파일을 기반으로 페이지를 노출시키고 뒤에 해당 카드의 영화 id값을 쿼리 스트링으로 포함시키는 작업을 하고자 했다.
window.location.href = `movieinfo.html/?id=${target.parentNode.id}`;이런 식으로도 해보고... 혹시나 앞 부분이 잘못되었을 까 location.assign도 써보고 갖은 방법을 다 시도하였으나 페이지를 찾지 못한다는 오류만 반복되었다.
검색 도중에 다른 방식도 존재한다는 걸 알았고
매우 편리하긴 하지만 특정 환경에서는 작동하지 않을 수 있어서 크게 권장되지는 않는다는 경고를 듣긴 했지만 URLSearchParams이라도 사용을 해보자해서 해당 방식으로 시도를 하였다.
그러다가 결국 성공을 했는데 주소 구조를 천천히 살펴보니 movieinfo.html/?id=id 이 아니라
movieinfo.html?id=id의 구조를 띈 것을 확인하였다.
정말... 혹시나 하여 기존 코드를
window.location.href = `movieinfo.html?id=${target.parentNode.id}`;다음과 같이 슬래시로 구분되어있던걸 풀어주자 기가막히게 작동하였다...
해결한 기쁨도 컸지만
검색하고 확인하다보니 거의 한 두 시간을 소모했는데 너무 작은 부분이 문제였어서 허탈하기도 했다.
