23.06.05) LocalStorage를 이용한 데이터 저장 (1)

👉과제의 방향성

지난 개인과제(영화 검색 사이트)를 이어서 디벨롭하는게 이번 팀협업 프로젝트이다.

JS 문법의 핵심을 적용해서 기존에 개인 과제에서 TMDB를 이용하여 수행했던 과제의 심화 버전인듯.

사이트에서 원하는 영화를 클릭하면 상세페이지로 넘어가 영화에 대한 자세한 정보와

해당 영화에 대한 리뷰를 남길 수 있도록 하는것이 목표다.

똑같이 순수자바스크립트만 이용해서 데이터를 저장해야하기 때문에 별도의 서버 또는 DB, flask 사용없이

서버의 LocalStorage를 이용해서 데이터를 저장하는 방법으로 진행할 것이다.

내가 맡은 부분이 바로 로컬스토리지를 이용한 CRUD구현을 하는것이기 때문에 이번 프로젝트를 통해

한번 도전해보기로 했다.

 

 

🧐CRUD란

대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능

 : Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말

Create	생성	INSERT
Read	조회	SELECT
Update	수정	UPDATE
Delete	삭제	DELETE

즉 Create로 데이터를 생성하고 Read로 데이터를 읽으며

Update로 새로운 데이터를 업데이트하고 Delete로 데이터를 삭제하는 것.

 

💻코드 리뷰하기

🔻html - 댓글 작성 폼 

<div class="my_comment">
      <form onsubmit="saveComment(name.value, comment.value, password.value);">
        <label for="name">이름:</label>
        <input type="text" id="name" required />

        <label for="comment">리뷰:</label>
        <input type="text" id="comment" required />

        <label for="password">비밀번호:</label>
        <input type="password" id="password" required />

        <input type="submit" value="등록" />
      </form>
    </div>
    <div id="comment-container"></div>

1. <onsubmit> 속성을 사용하여 폼이 제출될 때 호출할 JavaScript 코드를 지정하고,

   폼을 작성하고 제출할 때 <saveComment> 를 호출해서 댓글을 저장하는 함수를 실행.

2. <input> 태그의 required 속성을 이용 : 사용자가 반드시 값을 입력해야 함

    (간단한 유효성 검사같은 개념으로 입력칸에 텍스트를 채우지 않으면 댓글 제출 진행이 안된다.)

 

3. <input type = "password"> : 입력한 값이 가려져서 표시된다.

4. <input type="submit" value="등록" /> : type 속성이 "submit"으로 설정 (버튼을 클릭하면 폼 제출)

 

-> 제출되는 순간 <saveComment> 함수가 호출되어 댓글이 저장되고,

    저장된 댓글은 자바스크립트<loadComments> 함수를 통해 페이지가 로드될 때 표시된다.

 

🔻JS - 로컬스토리지에 댓글 저장 : Create(데이터 생성) 

// [댓글 저장]
let saveComment = (name, comment, password) => {
  //JSON.parse : JSON 문자열을 객체로 전개
  let comments = JSON.parse(localStorage.getItem("comments"));

  //새로운 댓글 객체를 생성 (key - value)
  let newComment = {
    name: name,
    comment: comment,
    password: password,
  };

  //댓글을 배열에 추가
  comments.push(newComment);

  //배열을 다시 localStorage에 저장(객체를 JSON문자열로 변환)
  localStorage.setItem("comments", JSON.stringify(comments));
};

 

1. <saveComment> 함수: 댓글을 저장하는 역할
   - 매개변수로 name (이름), comment (댓글 내용), password (비밀번호)를 받는다

 

2. JSON.parse()메서드 : JSON 문자열을 JavaScript 객체로 변환

 

3. 로컬 스토리지에서 사용가능한 getItem 메서드 사용

   - localStorage.getItem("comments")를 사용하여 이전에 저장된 댓글 데이터를 불러온다  

 

4. 새로운 댓글 객체(newComment)를 생성

   - name, comment, password 속성에 각각 매개변수 값을 할당한다.

 

5. push 메서드를 사용해 comments 배열에 newComment 객체를 추가

 

6. JSON.stringify()메서드 : 자바스크립트 객체를 JSON문자열로 변환 후 localStorage에 저장

 

🔻JS - 로컬스토리지에 댓글 불러오기 : Read  (데이터 조회)

// [댓글 불러오기]
let loadComments = () => {
  //이전에 저장된 댓글 데이터를 불러오기
  let comments = JSON.parse(localStorage.getItem("comments"));

  // 댓글을 표시할 HTML 요소를 선택
  let commentContainer = document.getElementById("comment-container");

  // 댓글을 HTML에 추가
  comments.forEach(function (comment) {
    let commentElement = document.createElement("div"); // 각 댓글 요소를 생성
    commentElement.innerHTML =
      "<b>" + comment.name + "</b> : " + comment.comment;
    commentContainer.appendChild(commentElement); // 댓글 요소를 댓글 컨테이너에 추가
  });
};

// 페이지가 로드될 때 댓글을 불러오기
window.onload = function () {
  loadComments();
};

 

1. <loadComments> 함수: 이전에 저장된 댓글 데이터를 불러와서 화면에 표시

2. localStorage.getItem("comments")를 사용하여 이전에 저장된 댓글 데이터를 불러오기

 

3. commentContainer 변수를 사용하여 HTML에서 댓글을 표시할 요소를 선택

    - html에서 작성한 comment-container라는 id를 가진 요소를 선택

 

4. forEach 메소드를 사용 :  comments 배열의 각 댓글을 순회하면서 HTML에 추가
 

5. createElement() 메서드 사용 : 각 댓글의 <div> 요소를 생성해서 commentElement 변수에 할당

    =>각 댓글을 감싸는 컨테이너 역할

  : document.createElement()는 javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용함

   이 메소드는 element의 이름을 매개변수로 받아서 해당 노드를 생성한다

   element를 생성한 후에는 appendChild() 메소드를 사용하여 commentElement를 commentContainer에 삽입

 

6. <b> 태그 : 글자를 굵게 표시하는 태그 (bold의 약자)

 

7. window.onload 이벤트 핸들러: 페이지가 로드될 때 실행 
   - loadComments 함수를 호출하여 댓글을 불러와서 화면에 표시

 

📌참고자료

*태그의 required 속성 : http://www.tcpschool.com/html-tag-attrs/input-required

*CRUD란? : https://idkim97.github.io/2022-08-17-CRUD%EB%9E%80/

*javascript에서 element를 생성 : https://sisiblog.tistory.com/231

*<b> 태그 : https://ofcourse.kr/html-course/b-%ED%83%9C%EA%B7%B8

 

 

✍회고

이번 내배캠 캠프를 통해 코딩을 처음 접하게 되면서 프로젝트를 진행할 수록 조금씩 코딩에 대해

더 흥미를 갖게 되고 코드로직에 대해 이해하려고 엄청 노력중에 있다. 오늘은 로컬스토리지에

데이터를 저장하고 불러오는 것까지 겨우 해냈고 내일은 수정 삭제까지 해낼 수 있도록

열심히 공부해야겠다.