오늘의 TIL은 3주차 마지막 글을 맞이하여 팀원분들의 코드를 공부해 본 내용을 기록해보려고 한다. 특히 내가 맡지 않은 로컬스토리지 댓글 기능 부분을 보도록 하겠다.
로컬스토리지를 활용한 댓글 기능
영화 상세정보 페이지 하단에 붙는 우리조의 댓글 기능!!
<script>
const reviewDiv = document.getElementById("reviewDiv");
const nickname = document.getElementById("nickname");
const password = document.getElementById("password");
const review = document.getElementById("review");
const writeBtn = document.getElementById("writeBtn");
const nothing = document.getElementById("nothing");
// 현재 시간
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const day = today.getDate();
const hour = modifyNumber(today.getHours());
const min = modifyNumber(today.getMinutes());
const sec = modifyNumber(today.getSeconds());
</script>먼저 댓글 기능을 구현하는 데에 필요한 것들을 선언해주는 부분인 것 같다. 스윽 읽어보니 다른 부분은 이해가 가는데, nothing부분은 뭘 위한 변수인건지 html와 js파일을 잘 살펴보았다.
<html>
<p id="nothing">아직 리뷰가 없습니다. 리뷰를 작성해주세요.</p>
</html>
<script>
if (comments.length >= 1) {
nothing.remove();
let revealArr = JSON.parse(comments);
revealArr.forEach((e) => {
let stackReview = document.getElementById("stackReview");
stackReview.innerHTML += `
<ul>
<li>${e.nickname}</li>
<span>${formatDate}</span>
<hr></hr>
<li> ${e.review}</li>
</ul>`;
});
}
</script>조금만 살펴보니 금방 이해할 수 있었다. nothing이 가리키는 것은 리뷰가 없을 때 나타나는 문구 p태그였고, 작성된 게시글이 1개 이상 있는 경우 해당 문구를 삭제하는 것이었다. 또한 nothing.remove() 함수 아래로는 저장된 내용을 Json 형식으로 불러와서 인덱스 처음부터 끝까지 innherHTML의 형태로 요소를 붙이는 부분이다.
<script>
writeBtn.addEventListener("click", mkReview);
function mkReview() {
const id = movieId;
const reviewObj = {
nickname: nickname.value,
password: password.value,
review: review.value
};
</script>작성하기 버튼을 클릭하면 mkReview() 함수를 실행하여 각 입력값을 객체 형태로 저장하는 부분이다. 그 다음으로는 if-else문을 활용해서 데이터 유효성 검증 부분이 있었다.
<script>
const arr = []; //이전에 작성했던 데이터 초기화 및 새로 작성한 데이터 저장
if (JSON.parse(localStorage.getItem(`comments${id}`)) !== null) {
arr.push(...JSON.parse(localStorage.getItem(`comments${id}`)));
arr.push(reviewObj);
localStorage.setItem(`comments${id}`, JSON.stringify(arr));
} else {
arr.push(reviewObj);
localStorage.setItem(`comments${id}`, JSON.stringify(arr));
}
let writeComment = localStorage.getItem(`comments${id}`);
let tempArr = JSON.parse(writeComment);
</script>다음으로 이 부분이 조금 복잡하게 다가왔는데, 팀원분들이 차근차근 설명을 이미 다 해주셨던 부분이라서 어떤 내용인지는 얼추 이해가 간다. 전체적으로는 객체 형태로 받아온 데이터들을 JSON.stringify()를 통해 문자열화하여 setItem 해줬다가, 다시 이걸 활용하는 경우를 위해 객체형으로 바꾸어 tempArr에 저장해두는 내용이다.
이미 작성된 게시글이 1개 이상 있는 경우, 기존 게시글을 arr에 펼쳐 넣고 새로운 댓글을 추가하게 되고, 그렇지 않은 경우(게시글이 아직 없는 경우)에는 새로운 댓글을 arr에 추가하고, 업데이트된 arr를 저장하는 것이다.
<script>
let [commentBox] = document.getElementsByClassName("commentBox");
const addComment = document.createElement("ul");
console.log(commentBox);
tempArr.forEach((e) => {
addComment.innerHTML = `
<li>${e.nickname}</li>
<span>${formatDate}</span>
<hr></hr>
<li> ${e.review}</li>`;
});
nothing.remove();
commentBox.prepend(addComment);
}
</script>마지막으로 작성된 댓글들을 화면에 표시하는 부분이다. 첫번째줄 let [commentBox] = document.getElementsByClassName... 이 부분에서 변수명을 대괄호로 묶은 것을 처음으로 보게 되어서 이 내용에 관해서도 chatGPT선생님께 질문해보았다.
이 때 대괄호는 배열임을 나타낼 때 쓰는 대괄호가 아니라, 배열비구조화할당을 위한 것으로, 코드에서처럼 사용하면 배열의 첫번째 요소를 추출하게 된다고 한다.
예를들어 let myArray = [10, 20, 30] 배열이 있을 때
let [firstElement] = myArray; 이렇게 대괄호를 붙이게 되면
console.log(firstElement); // 항상 첫번째 요소가 할당된다고 한다.
두 번째 요소를 추출하고 싶은 경우에는 쉼표를 이용하여 첫 번째 요소를 건너뛰고 두 번째 요소를 변수에 할당할 수 있다고 한다.
let [, secondElement] = myArray;
console.log(secondElement); // 두 번째 요소인 20이 출력된다.
댓글이 추가되면 commentBox의 첫번째 요소는 계속 바뀌게 된다. 따라서 배열 비구조화 할당을 통해 commentBox의 항상 첫번째인 요소를 간편하게 찾은 다음, prepend() 메서드를 사용하여 새로 생성한 ul요소를 가장 앞에 붙여줄 수 있는 것이다.
로컬스토리지?
로컬스토리지는 작은 양의 데이터를 브라우저에 저장할 때 사용되곤 하는데, 로컬 컴퓨터에 간단한 key-value형식으로 제한된 양을 저장할 수 있다.
일반적으로 5MB 정도의 작은 용량을 갖고 있으며, 문자열 형태로만 데이터를 저장할 수 있다.
사용자(클라이언트) 측에서 직접 제어되기 때문에 보안에 취약하다. 따라서 민감한 정보는 로컬스토리지가 아니라 서버 측에 저장하는 것이 안전하겠다.
따라서 로컬스토리지는 간단한 설정, 쿠키 등 작은 양의 데이터를 저장할 때 유용하지만, 댓글과 같은 동적인 데이터를 저장하고 관리하는 데에는 제한적이다. 따라서 댓글 기능을 만들 때에는 데이터베이스를 사용하여 서버 측에서 안전하게 데이터를 관리할 수 있도록 해야 하겠다.
오늘은 정말 정신없이 하루가 지나간 것 같다! 오전 코드 카타 시간 끝나자마자 어제 미처 다 하지 못한 것들을 달렸다.
과제물을 최종적으로 수정하고 팀원들과 함께 테스트한 뒤 깃허브 메인 브랜치에 푸쉬하고 최최종 테스트를 하고... 특히 나는 조금 더 손볼 부분이 있었던 발표자료와 발표 스크립트를 다듬다보니 시간이 훌쩍 지나갔다.
결과부터 써보자면 무사히 과제 제출도 했고 발표도 잘 했던 것 같아 다행이다🥹✨ 내일부터는 본격적인 리액트 과정이 시작된다!! 잘 따라갈 수 있을지 조금 걱정되긴 하지만 화이팅 가보자고!!
