오늘 한 일

팀프로젝트 시작
프로젝트 기획회의(타 api 사용여부, 파트 나누기 등)
github branch 만들기
리뷰작성 및 보여주기
git 특강

오늘 공부한 내용

<팀프로젝트 과제>
개인프로젝트 업그레이드 시키기!

• 영화정보 상세 페이지 구현
• 상세 페이지 영화 리뷰 작성 기능 구현 (내가 맡은 파트)
• UX를 고려한 validation check

---

✅ 리뷰등록

틀이 될 html 을 만들고 (form) js 파일을 연결해서 시작!

form 이 제출되면
1. 각 입력창에 사용자가 입력한 정보를 모아서 빈 배열에 push
2. localstorage에 저장 (localstorage.setItem('key', 'value'))
3. 입력창 값 비워주기
4. 화면에 그리기

localstorage에 배열은 저장할 수 없으므로 JSON.stringify()로 문자열로 바꿔주기

let storage = [];

// 리뷰 등록
const submitReview = (e) => {
  e.preventDefault();
  const userReview = {
    name: userName.value,
    password: password.value,
    rating: rating.value,
    review: review.value,
  };

  storage.push(userReview);
  localStorage.setItem('reviews', JSON.stringify(storage));

  userName.value = '';
  password.value = '';
  rating.value = '';
  review.value = '';

  getReview();
};

✅ 화면에 그리기

1. localstorage에서 값 꺼내오기 (localStorage.getItem('key'))
2. 꺼내온 값(=배열) map을 돌면서 화면에 그려주기
3. 리뷰들을 담을 group 태그 innerHTML로 넣기

localstorage에서 꺼내온 값을 다시 사용할 수 있는 값으로 바꿔주기 JSON.parse()

// 리뷰 가져오기
const getReview = () => {
  const reviewResult = JSON.parse(localStorage.getItem('reviews'));
  console.log(reviewResult);
  const reviewCard = reviewResult
    .map((review) => {
      return `
        <div>
          <span>${review.name}(${review.rating})</span>
          <button>수정</button>
          <button>삭제</button>
          <p>
            ${review.review}
          </p>
        </div>
  `;
    })
    .join('');
  reviewGroup.innerHTML = reviewCard;
};

어려웠던 내용

✅ 삭제기능 구현

1. 삭제기능을 구현하려고 localStorage.removeItem('key')을 찾아봤으나
   💥 key 하나에 (배열로) 사용자 입력값이 다 저장(value)되기 때문에
   key를 지우면 review가 전부 지워져서 실패
2. delete 함수에 password를 받아와 사용자가 입력한 값(prompt)과 같으면 지우려고 했는데
   지우길 원하는 리뷰목록만 특정해서 잡아내질 못해서 실패했다.. 😥
   💥 queryselector로 하면 제일 처음 찾는 1개만(첫번째 삭제버튼) 찾아지고
   queryselectorAll로 하면 NodeList로 들어와져서 어떻게 해야할지..
   처음부터 코드를 좀 잘못짠 것 같은데 🙄
   내일 다시 도전해봐야지

느낀점

1. 전에 TodoList 만들기로 해본 적 있는 건데도 헤매고 있는 나 자신.. ㅎㅎ
   분명 해본 것 같은데 매번 똑같이 헤매는 것 같아서 겁나 지치넹..
2. 으으 다 어렵다 어려워 💬