자바스크립트에서 'this' 키워드를 사용한 게시판 CRUD 처리 방법

18 Sep 2023

javascript

게시판 애플리케이션을 개발하면서 CRUD(Create, Read, Update, Delete) 기능을 구현해야 할 때, 자바스크립트의 ‘this’ 키워드를 활용할 수 있습니다. ‘this’ 키워드를 사용하여 현재 객체에 접근하고 내부의 속성과 메소드를 조작할 수 있습니다. 이번 글에서는 ‘this’ 키워드를 사용하여 게시판의 CRUD 처리를 하는 방법을 알아보겠습니다.

게시판 객체 생성

게시판을 만들기 위해 게시판 객체를 생성해야 합니다. 게시판 객체는 게시물을 담는 배열과 CRUD 기능을 제공하는 메소드들로 구성됩니다. 다음은 게시판 객체의 생성하는 코드입니다.

function Board() {
  this.posts = []; // 게시물을 담는 배열

  this.createPost = function(post) {
    this.posts.push(post); // 게시물 생성 후 배열에 추가
  };

  this.readPost = function(postId) {
    for (var i = 0; i < this.posts.length; i++) {
      if (this.posts[i].id === postId) {
        return this.posts[i]; // postId에 해당하는 게시물 반환
      }
    }
    return null; // 게시물이 없을 경우 null 반환
  };

  this.updatePost = function(postId, updatedPost) {
    for (var i = 0; i < this.posts.length; i++) {
      if (this.posts[i].id === postId) {
        this.posts[i] = updatedPost; // postId에 해당하는 게시물을 업데이트
        return true;
      }
    }
    return false; // 게시물이 없을 경우 false 반환
  };

  this.deletePost = function(postId) {
    for (var i = 0; i < this.posts.length; i++) {
      if (this.posts[i].id === postId) {
        this.posts.splice(i, 1); // postId에 해당하는 게시물을 삭제
        return true;
      }
    }
    return false; // 게시물이 없을 경우 false 반환
  };
}

위의 코드에서 ‘this’ 키워드를 사용하여 게시판 객체 내의 속성인 posts 배열에 접근합니다. 또한, CRUD 메소드 내에서도 ‘this’ 키워드를 사용하여 현재 객체에 접근하여 게시물 배열을 조작합니다.

게시판 객체 사용 예시

게시판 객체를 생성한 후에는 CRUD 메소드를 통해 게시물을 관리할 수 있습니다. 아래는 게시판 객체를 사용하는 예시 코드입니다.

var board = new Board();

var newPost1 = {id: 1, title: "첫 번째 게시물", content: "안녕하세요!"};
var newPost2 = {id: 2, title: "두 번째 게시물", content: "반갑습니다!"};

board.createPost(newPost1);
board.createPost(newPost2);

var retrievedPost = board.readPost(1);
console.log(retrievedPost); // {id: 1, title: "첫 번째 게시물", content: "안녕하세요!"}

var updatedPost = {id: 1, title: "첫 번째 게시물 수정", content: "안녕하세요! 수정된 내용입니다."};
board.updatePost(1, updatedPost);

var updatedPostRetrieved = board.readPost(1);
console.log(updatedPostRetrieved); // {id: 1, title: "첫 번째 게시물 수정", content: "안녕하세요! 수정된 내용입니다."}

board.deletePost(1);
console.log(board.posts); // [{id: 2, title: "두 번째 게시물", content: "반갑습니다!"}]

위의 예시 코드에서는 게시판 객체를 생성한 후 게시물을 생성, 조회, 수정, 삭제하는 과정을 보여줍니다. ‘this’ 키워드를 사용하여 현재 객체에 접근하여 원하는 동작을 수행합니다.

#게시판 #CRUD