구글 파이어베이스 CRUD(3) Update 기능

지난 포스팅에서 Delete기능을 넣고, 이제 CRUD기능 중에서 Update가 남았다. Update는 전반적으로 Create와 비슷한 작업을 거친다. UI를 추가하고, 해당 이벤트 함수를 만든 뒤에 firebase DB의 API를 사용하여 사용자의 정보를 갱신하는 방법이다. 

1 'Edit'아이콘 넣기 

index.js파일에서 Delete와 같은 방식으로 'edit'아이콘을 materialize에서 찾아서 넣어준다. 

2 update 폼 제작

index.html에 있는 create폼을 그대로 복사해서, create라는 단어만 update로 수정한다. 어차피 폼 양식은 똑같다.

3 update 이벤트함수

다시 index.js로 돌아와서 setupPosts()함수로 간다. setupPosts()함수는 유저가 로그인 or 시작하면 자동으로 data가 들어오는 함수다. 해당 함수에 deleteIcons 이벤트 함수를 연결했고, 이번에는 editIcons이벤트를 연결해준다.

클래스명 'edit' 아이콘을 클릭하면 아래와 같이 Update Blog Post라는 폼이 담긴 Modal이 생성된다.

이제 본격적으로 이벤트 함수를 만들어보자. updatePost변수에 DOM지시자를 담아두고, submit이벤트를 연결한다. update의 핵심은 fs.collection(컬렉션 이름).doc(id).set({내용})부분이다. then()프로미스 구문은 Modal을 reset하는 부분으로 signUp과 같다.

4 edit,delete아이콘 숨기기

관리자 권한이 있어야 '수정', '삭제'가 가능하기 때문에 해당 아이콘은 일반 유저들에게 필요없다. 즉, 보여서는 안 된다.(보이더라도 클릭 시 DB는 묵묵부답) 이를 해결하기 위해서 index.js의 loginCheck()함수를 아래와 같이 설정한다. 'adminControls'클래스는 delete와 edit아이콘의 상위 선택자이다. 해당 클래스를 'none'으로 설정하면 아이콘이 사라지게 된다. 그리고 loginCheck()함수 밖에 있던 선택자 변수들은 모두 loginCheck()함수 안에 넣어서 정리를 한다.