[Firebase&Web연동 8] 로그인 한 사용자만 글쓰기 기능구현
● 들어가기 전
이전포스팅에서 firebase 로그아웃 기능을 구현했고, 그에 따라 navbar 메뉴도 변경시켜주는 부분까지 했다. 이번 포스팅에서는 로그인한 유저만 글을 쓸 수 있는 기능을 구현해보겠다. 유저들이 쓴 글은 thanks 라는 ref폴더를 따로 만들어서 그 안에 계층적으로 유저들이 쓴 글을 저장시키도록 하겠다. key 값으로는 유저닉네임, 쓴글, 작성시간, 유저uid를 지정해준다.
▲빨간색 표시는 우리가 ref("thanks") 함수로 생성할 폴더이고 그 밑에 초록색 표시는 push() 함수로 자동 생성되는 글의 고유 pk 값(글 하나하나를 식별하는 식별자)이고 파란색 표시는 user가 가입할때 마다 자동으로 생성되는 user의 pk 값(앞에서 다뤘음)이다. 실습을 통해 자세히 알아보자. 참고로 adflkjlk234~ 이런 문자는 사람이 쓸일이 거의..없기 때문에 아~ firebase에서 자체적으로 만들어 주는 녀석이라고 생각하면 쉽다. ● 실습순서
1.javascript 내장 함수로 현재시간을 구해서 전역 변수에 할당(별도 js 파일작성)
2.로그인 유무 체크 후 로그인 했으면 글 저장하는 함수 호출
3.firebase 저장과 관련된 함수 살펴보기
4.글 저장하는 함수 작성
5.firebase 데이터베이스 대쉬보드 확인
● 자바스크립트 시간 함수
자바스크립트 안에는 시간을 구해주는 함수가 있다. 이것도 이미 만들어 놓았기 때문에 가져다 쓰자. 따로 js 폴더를 만들어서 tiem.js 파일에 작성하고 index.html에 스크립트 부분에서 경로를 설정해준다.
tiem.js
//냘짜 함수
var d = new Date();
var year = d.getFullYear().toString();
var month = (d.getMonth() + 1).toString();
var day = d.getDate().toString();
var hours = d.getHours().toString();
var min = d.getMinutes().toString();
var sec = d.getSeconds().toString();
var currentTime = year + month + day + hours + min + sec;
파일경로
index.html firebase 초기화 하는 스크립트 바로 위에 tiem.js 경로를 지정하는 스크립트를 넣어준다. 아래와 같이. 정확한 위치는 아래 소스코드 파일을 올려놓았다.
<!--현재 시간을 가져오는 js 파일 -->
<script src="./js/time.js"></script>
그리고 console.log()로 시간이 string 값으로 잘 나오는지 확인해보자. 변수이름은 time.js 파일 맨 아래에 작성해 두었다. var currentTime = year + month + day + hours + min + sec;
콘솔 로그를 찍는 곳은 어디든 가능하다. 우리는 index.html에서 바로여기!
//유저가 로그인 했는지 안했는지 확인해주는 함수
function userSessionCheck() {
console.log(currentTime);
이곳에 적어서 확인을 해보겠다. 왜나면 페이지가 로딩되면서 바로 userSessoinCheck()를 호출하게 해놓았기 때문이다. 그리고 터미널을 열고 해당 프로젝트 폴더로 가서 firebase serve 명령어를 실행 시킨다음 구글 개발자 창을 보자. http://localhost:5000/로 접속해야한다.
나이스. 잘나온다.
● 로그인 체크하는 함수
메인화면 글쓰기 창에서 "쓰기" 버튼을 눌러서 이벤트가 작동하게 해야 한다. 이번에는 jquery 선택자를 이용해서 쓰기 엘리먼트를 가져오고 textarea에 적힌 값을 가져오도록 해보자. 아래 함수를 usersessioncheck(); 이부분 아래 놓자. 유저가 로그인 성공을 하면 네비게이션 바 메뉴 부분이 로그아웃으로 바뀐다. 그 점을 이용해서 js dom 방식으로 메뉴 값을 가져왔고, jquery 선택자(#comment)로 textarea의 값을 가져와서 comment라는 전역변수에 담았다. 위에서 전역변수를 꼭 만들어 주자. 그리고 if문으로 값을 체크하고 로그인한 유저면 saveThanks()를 호출해준다.
$(document).ready(function () {
//메인화면 감사일기 쓰기버튼 눌렀을 때
$(document).on('click', '.write', function () {
//네비게이션 메뉴의 text값 가져오기 - 자바스크립트 dom 방식으로 가져왔다.
var seseionCheck = document.getElementById("loginmenu").textContent;
//내가 쓴글 가져오기 - jquery방식으로 가져왔다.
comment = $('#comment').val();
if (seseionCheck == "로그아웃") {
//저장하기
saveThanks();
} else {
alert("로그인이 필요한 서비스 입니다.")
}
});
});
● firebase 저장관련 함수
firebase에서 기본적인 쓰기작업을 할때는 set() 함수를 이용해서 지정된 위치에 데이터를 저장한다. 하지만 고유 키값(pk)을 생성한 후 그 하위에 저장시키려면 push(); 함수로 경로를 먼저 만들어 주고 그 아래 set()을 통해서 json 값을 넣어준다.
- set() : 지정된 위치에 저장
- push() : 고유 key 값(고유한 저장위치)을 만들어줌
● 글 저장하기
글 저장하는 함수는 아래와 같다. firebase 모듈 객체를 통해 ref() 함수를 호출해준다. 인자 값으로 생성할 레퍼런스(테이블,폴더) 이름을 넣어준다. 그리고 push()를 통해 새로운 고유 key 값을 생성해주고 그 아래에 set()을 통해 값을 저장해준다. set() 안에는 json object가 들어간다. 저장 성공을 했으면 textarea 부분을 깨끗이 지워준다.
//쓰기 버튼 눌렀을 때 호출 되는 함수
function saveThanks() {
//thanks 라는 테이블을 만들고 하위 데이터에 유저 아이디를 넣어준다. 그곳에 push로 가상의 키를 넣고, 객체를 넣어준다.!!!!
var thankRef = firebaseDatabase.ref("thanks");
// 해당 객체의 key 값이 자동으로 생성된다.
var thank = thankRef.push(); // 해당 객체의 key 값이 자동으로 생성된다.
//로그인한 유저의 pk값,이름,내용,시간 데이터
var obj = {
userkey: loginUserKey,
name: name,
comment: comment,
createtime: currentTime
};
//위에서 thankRef.push()로 만들어진 key아래 위치에 저장해준다.
thank.set(obj);
alert("또 하나의 행복이 쌓였습니다.");
$('#comment').val("");
}
● 실행 및 대쉬보드 확인
firebase 서버를 실행하고 로그인 한 후에 직접 글을 써보자. 또 하나의 행복이 쌓였습니다. 라는 alert() 창이 뜨고 저장이 되면 쓴글이 초기화 된다. 여기서 유효성 검사라든지, 들어가면 안될 단어처리 등은 스스로 처리해주거나 넘어간다. firebase에 집중해야지.. 그리고 firebase 대쉬 보드로 가서 값이 잘 들어갔는지 확인해보자
▲로그인 한후에 글을쓰고 쓰기 버튼을 클릭
▲alert 창 확인
▲firebase 대쉬보드가서 확인. 성공적으로 값이 들어가 있는 것을 볼 수 있다.
● 마무리
이번포스팅에서 firebase 모듈을 이용해서 레퍼런스 만들기(ref함수) , 고유pk 값위치 만들기(push), json object값을 해당위치에 저장하기(set)를 알아보았다. 다음 포스팅에서는 유저들이 쓴 감사일기 글이 메인화면에서 가져와서 뿌리는 기능을 살펴보자.
● 소스코드
보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다
thanksMemo.zip
댓글