firebase를 이용한 게시판
firebase 공부 목적으로 firebase를 이용한 게시판을 만들기로 했다.
게시판은 1차로 쓰기페이지, 읽기페이지, 보기페이지, 리스트페이지, 게시글 삭제 기능을 목적으로 시작했다.
firebase에 doc를 보며 기본 firebase 설정을 하는데 doc에 나와있는데로 모듈식으로 했다가 어머어마하게 쏟아졌다. 다시 찾아보니 모듈식은 webpack또는 Rollup같은 모듈 번들러와 함께 사용해야하는데 아무 생각없이 모듈식을 사용하여 나오는 에러였다.
모듈 번들러를 사용하지 않을 때에는 꼭 CDN방식으로 사용하자.
firebase의 CDN(Content Delivery Network)이란?
Firebase의 CDN에 저장된 라이브러리를 추가하는 것은 많은 개발자에게 익숙한 간단한 SDK 설정 방법입니다. CDN을 사용하여 SDK를 추가하면 빌드 도구가 필요 없으며 빌드 체인이 모듈 번들러로 작업하는 것에 비해 훨씬 간단하고 쉬울 수 있습니다.
1. list page
아직 게시판이라기에는 기능이 한없이 부족하지만 익명게시판으로 만들고있으며, list는 우선 등록된 날짜기준으로 내림차순 정렬해서 불러오고 아직 검색, 페이징은 개발 전이다.
2. write page
작성 페이지에서 기본적으로 userName은 익명으로 초기화 되어있고, 원하면 다른 이름을 입력하게 되어있다.
해당 게시판은 익명을 기준으로 만들고있으며 추 후에는 회원가입같은 기능을 만들어 익명 또는 로그인이 되어있을때 닉네임이라던가 그런것들을 추가할 생각이다.
그리고 현재는 익명게시판이기에 게시글마다 비밀번호를 받고 이 비밀번호로 삭제 또는 수정을 하게한다. 비밀번호 암호화는 sha256()을 사용하였다.
web text editor는 오픈소스인 TOAST UI Editor를 사용하였고 기본은 Markdown형식으로 작성하게 되어있다.
markdown으로 작성된 데이터는 HTML형식과 markdown형식 둘다 받을 수 있으며 두개 모두 사용처가 있기에 firebase에 다 저장한다.
3. view page
위에 소개한 TOAST UI Editor는 viewer도 지원한다.
view페이지에 viewer를 생성하고, viewer에 들어갈 contents는 글 작성시에 저장했던 HTML형식 문자열을 넣어주면 viewer가 완성된다.
view페이지에서 글수정, 글삭제 버튼이 있어 수정 삭제로 넘어갈 수 있다.
4. update page
view 페이지에서 글 수정 버튼을 누르면 직접 만든 prompt가 화면에 출력되고 비밀번호를 입력하고 확인을 누르면 firebase에 저장된 게시글 비밀번호와 입력된 비밀번호를 암호화된 상태로 비교한다. 비밀번호가 맞으면 update 페이지로 넘어가고 아닐경우 비밀번호를 확인하라는 안내와 비밀번호 필드를 초기화 시켜주었다.
update 페이지는 write 페이지와 비슷하지만 저장했던 내용을 불러 각 필드에 맞게 넣고
비밀번호는 바꿀필요가 없을거같아서 넣지 않았다. 즉, 글 작성할때 입력한 비밀번호는 삭제 전까지는 바꿀 수 없다.
5. 게시글 삭제
게시글 삭제는 view페이지에서 수정 버튼과 비슷하게 삭제버튼을 누르면 비밀번호를 입력하고 비밀번호가 맞으면 게시글은 삭제되고 index.html로 돌아간다.
여기까지가 현재 게시판의 기능 구현이었고 아직 게시판에서 가장 중요한 검색, 페이징이 남아있다. firebase의 쿼리방식을 공부중이라 추가하는데로 다시 포스팅 할 예정이다. 오라클만 쓰다가 nosql을 쓰려니 어색한 상당히 많아서 공부가 필요하다.
github page에 올리고싶지만 아직 apikey 처리를 어떻게 해야될지 몰라서 github에는 올리지 않고있다. 물론 잘 만든 게시판은아니지만 뭔가 남기고 싶은 마음이..
apikey를 어떻게 처리해야할지 더 생각해보고 찾아봐야겠다.
