하루 하나씩 작성하는 TIL #4
#3까지는 다양한 라이브러리와 프레임워크를 사용하여 기능을 구상하였다.
총 5일간 진행하는 미니 프로젝트의 일정을 작성해보자면,
4/15(월)
- 주제 작성, 와이어프레임 작성, 룰 정하기, html틀 짜기, 역할 분담하기, 깃허브레포지 파기
4/16(화)
- tailwind css 작성, aos등의 프레임워크와 라이브러리 사용.
- 프레임워크와 라이브러리의 차이
4/17(수)
- firebase 문서 읽기 & 생성, crud 구현을 위한 댓글 창 제작, JS짜기
4/18(목) //현재 작성일자
- 댓글 창 기능 추가 제작(수정, 삭제 버튼), 디자인 다듬기, W3C 검사 돌리기
4/19(금)
-
프로젝트 발표
의 일정을 가지고 진행하였다.
그 중 수, 목에 공부한 내용에 대해 작성해보고자 한다.
Firebase란?
-
구글의 모바일 애플리케이션 개발 플랫폼으로 제공되는 포괄적인 도구 및 서비스 제품으로, 개발자가 모바일 및 웹 애플리케이션을 쉽게 생성, 실행 및 확장할 수 있도록 도와준다. 실시간 데이터베이스, 인증, 스토리지, 호스팅 및 기타 기능을 제공하며 모두 단일 플랫폼에서 관리된다.
-
실시간으로 데이터를 동기화하는 실시간 데이터베이스를 제공하며 개발자가 유연하고 확장 가능한 방식으로 데이터를 저장할 수 있는 NOSQL 문서 지향 데이터 모델을 사용한다.
-
데이터는 JSON 형식으로 저장되며 데이터베이스는 원자 트랜잭션 및 실시간 이벤트 알림을 지원한다.
JSON이란 JS 객체 문법으로 데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반의 데이터 교환 표준이다.
기본적인 형태는
{ key : value }와 같이 키-값 쌍으로 이루어져있다. 데이터의 값으로 숫자, 문자열, 불리언, 객체, 배열, 널 값과 같은 타입을 사용할 수 있다.NOSQL이란 비관계형 데이터베이스를 지칭하며 분산형 구조로 설계되어있다. 고정되어 있지 않은 테이블 스키마를 갖는다.
팀 프로젝트를 진행하면서 CRUD를 구현하기 위해 데이터를 입력하였을 때 저장할 곳이 필요하기 때문에 Firebase를 사용하였다. 필자는 MYSQL만 사용해 본 경험이 있고 Firebase는 처음이었다.
-
Firebase 세팅
이 문서를 참조하여 세팅하면 된다.
npm install firebase를 터미널 창에 입력해 준 뒤,
script에
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc, serverTimestamp, deleteDoc, doc, getDocs, getDoc, updateDoc } from "firebase/firestore";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
위 코드를 작성해주면 끝.
이 부분을 true로 바꿔줘야한다.
firebaseConfig는 제작한 프로젝트- 설정에서
위와 같이확인 가능하다.
컬렉션을 제작하면
위와 같이 제작된 모습을 확인할 수 있다. 값을 input하고 submit하면 필드에 값이 들어온 모습을 확인할 수 있다.
CRUD란?
- 대부분의 컴퓨터가 가지는 Create,Read, UPdate, Delete를 묶어서 일컫는 말로 사용자 인터페이스가 갖추어야 할 기능을 가리키는 용어로도 사용된다.
1. C(댓글 작성)
사용자 닉네임, 비밀번호, 댓글을 입력하고 댓글달기 버튼을 클릭하면 아래 함수가 실행된다. 사용자가 입력한 데이터 베이스를 Firebase에 추가하기 위해 addDoc 함수를 사용하여 데이터에는 닉네임, 비밀번호, 댓글 내용과 함께 현재 시간도 기록되도록 하였다.
$("#postComment").click(async function () { ... })2. R(댓글 조회)
페이지가 로드될 때와 댓글이 추가, 수정, 삭제될 때마다 showComments()라는 함수가 호출되는데, 이 함수는 Firebase에서 댓글 데이터를 가져와서 html형식으로 변환하여 화면에 출력한다.
3. U(댓글 수정)
사용자가 수정 버튼을 클릭하면 .edit-comment 클래스에 대한 클릭 이벤트가 처리된다. 이벤트 핸들러에서 사용자에게 비밀 번호를 입력하고, 입력한 비밀번호가 해당 댓글의 비밀번호와 일치하는지 확인하도록 하는데, 일치하는 경우엔 사용자에게 새로운 댓글을 입력받고 해당 댓글을 Firebase에서 업데이트한다.
4. D(댓글 삭제)
사용자가 삭제 버튼을 클릭하면 .delete-comment 클래스에 대한 이벤트가 처리되도록 하였다. 이벤트 핸들러에서 사용자에게 비밀 번호를 입력하고, 입력한 비밀 번호가 해당 댓글의 비밀 번호와 일치하는지 확인 후 일치한다면 해당 댓글을 Firebase에서 삭제한다.
코드를 다 작성하고 검토, 줄맞춤(Alt+Shift+F)까지 해줬다면 시맨틱 웹인지 검사해주는 과정이 필요하다.
시맨틱 웹
이란 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다. 웹 표준을 준수하면서 개발 중인지 확인할 수 있는 사이트에 한 번 코드를 돌려주면 된다.
만족하신다네요. 된겁니다.
다음 TIL은 코드리뷰 및 미니 팀 프로젝트 후기로 돌아오겠습니다.
