파이어베이스를 통한 간단한 일기장 웹앱

1. 개발 배경

---

swift + iOS앱개발 과정을 학원에서 배우면서 firebase를 맛보기로 잠깐 배웠고, 

웹에서도 사용 가능하단 점을 알게되어 전반적인 기능 구현을 해보면서 감을 익히기 위해 예제 프로젝트를 찾기 시작했다.

https://mateeth.tistory.com

 

예제를 통해 회원가입/게시판 기능을 구현하면서  파이어베이스를 통한 전반적인 개발 흐름을 이해하는데 큰 도움이 됐다.

 

2. 개발 환경

---

• html, css, javasrcipt
• bootstrap
• firebase : 리얼타임 베이스, 호스팅
• 소스 코드 관리 : git, vscode 
• 배포 : firebase hosting

3. 주요 기능

---

• 이메일 방식의 회원 가입
• 로그인 
• 로그인시 상단 메뉴바에 유저 닉네임 표시
• 게시글 생성 
• 닉네임 변경 
• UID값을 통해 회원만 글을 작성할 수 있도록 처리

회원 가입 화면 ID, 닉네임, P/W 입력

 

로그인 화면

 

로그인시 상단 메뉴에 유저닉네임 표시

 

게시글 생성 및 화면 표시

 

닉네임 변경 기능

 

4. 결과물 

---

아쉽지만 강좌가 중간에 중단된 것으로 추정되고, 게시글의 수정/삭제 기능은 구현하지 못했다.

수정/삭제 기능은  추후 다른 프로젝트를 진행하면서 연습할 예정

 

• 배포된 웹사이트 : https://thanksnote-a209e.firebaseapp.com/

감사 일기

 

 

ps.

파이어베이스에서 제공하는 클라우드 스토리지 기능을 통해 

사진, 동영상 등의 미디어 자료의 서버 전송도 쉽게 가능한 것 같다. 

공식 문서의 한글화도 잘되어 있는 편이라, 나와 같은 초보 분들에게 적극 추천!

https://firebase.google.com/docs/storage/?authuser=0

Cloud Storage  |  Firebase