React와 NEXT.js & Firebase를 활용한 CRUD 만들기

 

 

서론

 해당 지식에대한 소개 

React와 Next.js 그리고 Firebase를 활용하여 간단한 CRUD를 만들어보았다.

 

*해당 프로젝트에 사용된 version

firebase: v9.9.2, next: v12.2.4, react: v18.2.0

---

 

본론

1. CRUD란?

우리가 어떤 소프트웨어를 만들 때 기본적인 데이터 처리 기능인

생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)의 앞글자를 따서 약어로 지칭하는 말이다. 

사용자 인터페이스는 해당 기본요소의 기능으로부터 시작된다. 

 

2. Firebase 설정하기 

Next에서 Firebase를 만들기 위해서는 먼저 Firebase상에서 프로젝트를 만들어주고 
React의 터미널에서 npm install firebase을 입력하여 SDK 설치후 

firebaseConfig.js 파일을 생성하여 

 

해당 프로젝트에서 만들어진 Firebase Key 값을 넣어주면 이제 Firebase를 활용할 페이지들에서 필요시 마다 Firebase의 요소들을 import 하여 활용할 수 있게된다. 

 

 

3. 회원가입

Firebase 회원가입은 

import { getAuth, createUserWithEmailAndPassword} from 'firebase/auth'

이메일&패스워드 가입 인증을 import하여 

 const signUp = () => {
        createUserWithEmailAndPassword(auth, email, password)
            .then(( res ) => {
                console.log(res);
                sessionStorage.setItem('Token', res.user.accessToken);
                router.push('/home');
            }
        )
    }

사용자로부터 입력받은 이메일과 패스워드 그리고 auth (Firebase에서 제공하는 함수)를 받아서 회원가입 성공시 return 해주는 토큰값을 세션스토리지에 저장하고 next의 router를 활용하여 가입이 완료되었으면 보여줄 페이지 (해당 코드에서는 home)로 이동 한다.

 

4. 본격 CRUD 만들기 

학생의 닉네임과 성적을 입력하여 DB에 등록(C), 읽기(R), 수정(U), 삭제(D)를 만들어 보았다.

3번 에서 가입된 특정 유저의 세션이 살아있는지 해당페이지 접근시 가장먼저 확인하기 위해

useEffect를 활용하여 토큰값이 존재하는지 확인하고 데이터를 불러올지 말지를 판단하는 코드를 생성한다.

토큰값이 존재하는 경우는 getData를 호출하여 데이터를 디비로부터 읽어서 사용자에게 표시하고 아니라면 

등록페이지로 이동시켰다. 

 

useEffect(() => {
        if(sessionStorage.getItem('Token')){
            getData();
        }

        if(!(sessionStorage.getItem('Token'))){
            router.push('/register');
        }
    } , [])

 

 

---

#Create

// CREATE 
    const addData = () => {
        addDoc(databaseRef, {
            nickname: nickname,
            grade: Number(grade)
        })
        .then(() => {
            console.log('데이터 전송 성공', nickname, grade);
            setNickname('');
            setGrade('');
            getData();
        }).catch(err => {
            console.log(err);
        }
        )
    }

 

사용자의 성적과 닉네임을 input 태그안에서 사용자의 값을 입력받고 해당 등록버튼 클릭시 addData 함수가 호출되고 

파라미터로 넘겨준 이름과 성적을 전달하여 DB에 저장하는 과정이다. 데이터 저장이 성공된다면 

해당 데이터를 다시 불러서 사용자에게 최신데이터로 보여줘여하기 때문에 getData() 함수를 호출하여
읽기를 통하여 최신데이터를 표시해주었다. 

 

 

 

 

#Read

// READ 
    const getData = async () => {
        console.log('getData 데이터 불러오기 시도');
        await getDocs(databaseRef)
        .then((res) => {
            setFireData(res.docs.map((data) => {
                return {...data.data(), id: data.id}
            }))
        }).catch(err => {
            console.log(err);
        })
    }

 

databaseRef는 컬렉션의 id를 담고있는 값이다. 

읽기는 해당 컬렉션의 ID에서 담고있는 값을 확인하고 해당 값이 있다면 setFireData를 통해 배열에 DB로 부터 읽어드린 값을 가져와 담는다. 그리고 담겨진 값을 불러와 map()을 통해 반복하여 사용자에게 보여준다. 

 

 

 

#Update

// UPDATE
    const updateData = () => {
        console.log('데이터 업데이트 시도')
        let filedToEdit = doc(database, 'CRUD', ID);

        updateDoc(filedToEdit, {
            nickname: nickname,
            grade: Number(grade)
        }).then(() => {
            console.log('데이터 업데이트 성공', nickname, grade);
            getData();
        }).catch(err => {
            console.log(err);
        })
    }

수정할 데이터의 id를 확인하고 입력값을 다시한번 받아서 수정을 반영한다.

마찬가지로 데이터 업데이트에 성공한다면 getData()를 호출하여 최신 데이터를 사용자에게 보여준다.

 

 

 

 

#Delete

// DELETE
    const deleteData = (id) => {
        let filedToDelete = doc(database, 'CRUD', id);
        deleteDoc(filedToDelete, id).then(() => {
            console.log('데이터 삭제 성공');
            getData();
        }).catch(err => {
            console.log('데이터 삭제 실패',err);
        })
    }

삭제할 데이터의 id값을 불러와 삭제를 진행한다

삭제 처리가 완료되면 반영된 데이터를 보여주기 위하여 getData()를 한번 더 호출한다. 

 

 

 

 

 

---

 

 

 

결론

Firebase와 Next 조합을 활용한 CRUD 만들기는 상당히 쉽고 이를 활용하여 간단한 페이지를 만드는데 있어서 추천한다. 

 

---

 

 

 

 

◇ 요약 ◇

① CRUD 란 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)의 앞글자를 따서 약어로 지칭하는 말

② Firebase 설정을 통해 공식문서를 활용하여 회원가입의 다양한 방식들을 활용 가능

③ Firebase에서 제공하는 공식문서를 참고하여 문서 데이터에비의 저장방식의 이해하여 활용하면 심플하게 CRUD를 쳐낼 수 있다. 

 

 

 

 

 

참고자료
https://firebase.google.com/docs/web/setup