자바 스크립트로 CRUD구현하기

자바 스크립트를 사용해서 CRUD를 간단하게 구현할수 있다는걸 알고 제대로 이해하기 위해 정리했습니다.

 

 

첫번째로 파이어 베이스에 연동을 해야합니다. 

파이어 베이스를 사용할것인데 파이어 베이스 연동하기 힘드신 분은 아래 링크 보고 오시면 이해하기 쉽습니다.

미니 프로젝트 배포하기[파이어 베이스(Firebase)](1)

미니 프로젝트 배포하기[파이어 베이스(Firebase)](1)

 

위 내용의 설정을 다 했다면 일단 가장먼저 데이터 입력을 해서 파이어 베이스에 데이터가 들어가는지 확인해야합니다.

 

 

Create (삽입)

    <h5>입력창</h5>
    <div id="input_box">
        <div class="input-group mb-3">
            <input id="name" type="text" class="form-control" placeholder="Username" aria-label="Username">
        </div>

        <div class="input-group">
            <span class="input-group-text">내용</span>
            <textarea id="content" class="form-control" aria-label="With textarea"></textarea>
        </div>
        <div class="d-md-flex justify-content-md-end">
            <button id="input_btn" type="button" class="btn btn-dark">입력</button>
        </div>
    </div>

간단한 입력창을 만들어 입력을 해봅니다.

 

당연히 지금은 입력해도 아무런 작업을 하지 않았으니 들어가지 않습니다.

 

작동 순서를 생각해 보았을 때

1. 이름과 내용을 작성합니다.

2. 입력 버튼을 누릅니다.

3. 이름과 내용이 전달됩니다.

가장먼저 내용을 추가 할수 있게 해달 라이브러리를 추가 해주어야 합니다. 

// 문서 추가 하기 위한 import / 아이디 지정해주어야함.
import { doc, setDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// 마찬 가지로 문서 추가 할수 있는 import / id자동 생성.
// import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// 추가 하기 위해 사용하는 메서드
await setDoc(doc(db, "userinfo", name), data);

setDoc , addDoc모두 문서를 추가 해줄수 있지만 사용하려는 목적에 따라 다릅니다.

 

setDoc은 아이디를 직접 지정해주어야 합니다.

절대 겹치지 않는 id라면 괜찮지만 만약 이름 즉, 문서가 중복되는 경우에는 가장 최근에 추가한 내용으로 바뀌게 됩니다.

 

addDoc은 문서를 직접 지정해 주지 않더라도 알아서 생성해줍니다.

중복되는일은 전혀 생기지 않지만 문서를 알아보기 어렵다는 단점이 있습니다.

저는 이번엔 간단하게 구현해보기 위해서 setDoc메서드를 사용하였습니다.

 

이제 첫번째로 해야 할 일은 입력버튼을 누르면 작동이 되어야 하고

두번째로 할일은 input의 value값과 textarea의 value값을 가져와야합니다.

        // Create 삽입.
        $('#input_btn').click(async function () {
            let name = $('#name').val();
            let content = $('#content').val();
            console.log(name + ' = 이름,' + content + ' = 내용');

            let data = {
                name: name,
                content: content
            }

            // setDoc사용시 문서userinfo의 이름을 내가 지정할수 있음. 다만 중복되면 제일 마지막 내용으로 바뀜.
            await setDoc(doc(db, "userinfo", name), data);
            alert('입력완료!')
            window.location.reload();

        });

input과 textarea 각각 id를 붙여주었고 console로 나오는지 확인해 보았습니다.

데이터 베이스에 넣을 내용을 정리하여 변수에 넣어 주었고 

Firestore의 문서에 접근하기위해 await setDoc()함수를 사용하였습니다.

 

각각 설명해 보자면

await : 비동기 함수안에서 사용됩니다. 또한 setDoc()함수가 완료될 때 까지 기다린후 다음코드를 실행 하기 때문에 데이터 베이스 작업이 완료 될 때 까지 다음코드로 넘어가지 않도록 합니다.

db : Firestore 데이터베이스 인스턴스를 나타냅니다.

"userinfo" : 컬렉션 이름입니다.

name : 해당 문서의 id입니다.

이렇게 한뒤 데이터가 들어갔는지 확인을 하면

설정을 한 대로 내용이 추가되는걸 볼수가 있습니다.

 

 

Read 읽기

하지만 이렇게만 추가하면 데이터를 추가 할 때 마다 파이어스토어에 들어가서 확인해야합니다.

사용자들은 데이터 베이스에 들어가서 보는것이 아니라 화면에 띄어 지는것을 보기 때문에 데이터 베이스에 있는 데이터들을 가지고 와야 합니다.

 

데이터를 가져오기 위한 라이브러리

// 문서를 읽기 위한 import
import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// 데이터를 가져오기위한 함수
await getDocs(collection(db, "userinfo"));

데이터를 가져올때 생각해야 할것은

데이터의 문서 이름과 collection이름이 맞는지 확인 해야 합니다.

해당 데이터들을 잘 가지고 왔다면 body부분에 뜰수 있도록 내용을 추가 해 줍니다.

        // Read 읽기.
        // 데이터베이스 안의 내용을 불러오기 위한 내용없애기
        // $('#content_list').empty();
        let docs = await getDocs(collection(db, "userinfo"));
        docs.forEach((doc) => {
            // .은 메서드이므로 .있는 메서드에는 ()필수
            let row = doc.data();
            // doc의 id는 문서이름을 뜻함.
            let userId = doc.id;
            let content = row['content']
            console.log("데이터베이스의 내용 : " + content);

            let inner_html = `
            <a href="#" style="width: 400px;"  class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
                <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32"
                    class="rounded-circle flex-shrink-0">
                <div class="d-flex gap-2 w-100 justify-content-between">
                    <div>                   
                        <input class="userId" type="text" class="form-control" placeholder="Username" aria-label="Username" value="${userId}" disabled>
                        <span class="">내용</span>
                        <textarea class="user_content" class="form-control" aria-label="With textarea" >${content}</textarea>
                    </div>
                </div>
                <div>
                    <button type="button" class="btn btn-primary modify_btn">수정하기</button>
                    <button type="button" class="btn btn-danger deletebtn">삭제하기</button>
                </div>
            </a>            
            `;
            $('#content_list').append(inner_html);
        });

 

1. db에서 해당하는 collection에 맞는 모든 데이터를 가져 옵니다.

2. forEach로 모든 문서를 돌아봅니다.

3. doc.data로 해당 문서의 데이터를 가져옵니다. 문서의 데이터는 JSON형식으로 저장됩니다.

4. doc.id로 해당 문서의 id를 반환합니다.

5. row["content"]해당 문서의 데이터에 있는 content라는 field의 값을 반환합니다.

6. 그 후 원하는 형태에 가져온 데이터를 넣어줍니다. forEach문으로 모든 데이터를 가져 와서 표시할수 있습니다.

 

 

Update 수정하기

id는 고정시키고 내용만 수정해 보겠습니다.

수정하기 위해 필요한 라이브러리

// 문서를 수정하기 위한 import
import { updateDoc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// 수정하기 위한 updateDoc함수
await updateDoc(doc(db, "userinfo", userId), { content: user_content });

 

수정하기 전에 생각해야 할 것들

1. 수정하기 버튼을 클릭하면 수정하고자 하는 content를 지정해야합니다. 

2. 또한 해당하는 데이터베이스 문서 id를 알아야합니다. 

        // Update 수정하기.
        $('.modify_btn').click(async function () {
            let modify_btn_parent = $(this).closest('.list-group-item')
            let userId = modify_btn_parent.find('.userId').val();
            let user_content = modify_btn_parent.find('.user_content').val();
            console.log("userId = " + userId);
            console.log("user_content = " + user_content);

            await updateDoc(doc(db, "userinfo", userId), { content: user_content });
            alert("수정 완료")
            window.location.reload();

        });

간단하게 구현을 할수가 있습니다.

1. this를 사용하여 버튼을 누른 그 곳에서의 부모 클래스를 찾을수 있었고 그로인해 해당하는 id와 content를 지정할 수 있습니다.

2. 마찬가지로 db에 접근하여 해당 collection과 문서 id로 접근해서 내용을 바꿔 주면 업데이트가 되어 있습니다.

 

 

 

delete 삭제

삭제도 문서 id만 있으면 쉽게 삭제기능을 구현할수 있습니다.

 

삭제하기 위한 라이브러리 및 함수

// 문서를 삭제하기 위한 import
import { deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
	
    // 삭제하기 위한 함수
	await deleteDoc(doc(db, "userinfo", userId));

워낙 같은 방법을 반복하여 기능을 구현하기 때문에 설명을 하지 않아도 알수 있습니다.

위 함수만 봐도 userinfo라는 collection으로 id를 넣으면 삭제가 되는것을 알수 있습니다. 

그러면 해야 할것은 id만 구하면 된다라는 것도 알수가 있게 됩니다.

        // Delete 삭제하기.
        $('.deletebtn').click(async function () {
            let modify_btn_parent = $(this).closest('.list-group-item')
            let userId = modify_btn_parent.find('.userId').val();
            console.log("userId = " + userId);

            await deleteDoc(doc(db, "userinfo", userId));
            alert("삭제 완료")
            window.location.reload();
        });

이렇게 id를 구하여 삭제 기능 까지 구현을 완료 하였습니다.

 

 

워낙 두서 없이 작성하여 알아보기 힘들 수 있지만 최대한 쉽게 이해할수 있도록 작성을 하였습니다.

조금이나마 firebase의 firestore 데이터베이스 사용하시는 저와같은 코린이 분들께 도움이 되었으면 합니다.

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊