📜 진행 내용
- [특강] 파이어베이스 보충 - 류제천 튜터님
- [특강] 파이어베이스를 활용한 JS로 SPA 만들기
- [과제] 팀 _ 기초 프로젝트 진행
- 전체 - UI 컨셉 및 기획안 보완
- 개인 - 프로필 모달 창 구현
💡 배운내용
< 파이어베이스 / 보충 특강 >
- 학습 목표 : 파이어베이스에서 만들어져있는 API를 사용하여, 서버와 통신할 수 있다.
◾ 파이어베이스 레퍼런스 자료
- API 레퍼런스
https://firebase.google.com/docs/reference/js?hl=ko - 웹 및 Firebase에 대해 자세히 알아보기
https://firebase.google.com/docs/web/learn-more?hl=ko#available-libraries - 파이어베이스 - 자바스크립트 시작하기 깃헙
https://github.com/firebase/quickstart-js
◾ 주로 사용할 서비스 3가지
- Authentication (인증) : 회원가입, 로그인, 프로필관리
- CLoud Firestore : CRUD API를 제공 및 NoSQL DB 제공 ( 몽고 DB 같은것 : 데이터베이스를 사용할 수 있다. 접근할 수 있는 모든 CRUD API를 제공한다. )
- Storage : 파일 업로드 및 다운로드 URL
※ 가격 정책 - 인증: 전화인증 10000번까지 무료/ 기타 인증 무료
👉 로직이 어떻게 돌아가는지 먼저 보고, 기획이 어떤식으로 됏는지 기획의도를 파악 후
코드를 볼 것. 그래야 코드에 압도 당하지 않는다!
◾ 기본 세팅시
- VS CODE에서 라이브서버를 이용해서 서버 개발을 할 경우 반드시 ‘index.html’로 파일명을 설정하여 시작해야 된다. (※ 배포할 땐 변경해도 상관없음)
◾ 폴더 구조 및 역할
- index.html - 기본 랜더링 html 파일
- assets - 이미지 폴더 ( 프로필 기본 이미지, 팬명록 배경 화면 이미지 등 )
- pages - 페이지별 마크업 파일
- 404.html - 에러
- auth.html - 로그인, 회원가입
- fanLog.html - 팬명록
- profile.html - 프로필 관리
- css
- style.css - 전체 CSS 스타일
- js
- main.js - 메인 허브 파일
- firebase.js - 파이어 베이스 연결 & API 가져오기
- router.js
- 웹사이트 경로 설정 후, 경로에 따른 페이지별 html(즉 DOM요소) 를 보여줌
- Hash Rounting - 새로 고침 에러 방지
- util.js - 로그인, 회원가입 유효성 체크
- pages - 페이지별 동적 로직
◾ CRUD 기능
- 팬명록 (fanLogs.js)
- C- 댓글 작성
- R- 댓글 불러오기 : 데이터베이스가 변경이 되면(생성, 변경, 삭제 등), 다시 한번 전체 리스트를 받아와 append 해주는 것.
- UD - 댓글 수정 및 삭제
- 본인이 작성한 것만 수정/삭제가 가능해야 함 그래서 로그인/회원가입/로그아웃이 필요함 (+로그인을 하면 프로필 관리는 필수!!)
◾ 프로젝트 관련 지식
-
Window Events
- DOMcontentLoaded : 초기 HTML 문서를 완전히 읽고, DOM 트리가 완성하는 즉시 발생함
-
Hash Router
- URL 주소에 해쉬(#)가 붙는다.
- #뒤의 값은 검색 엔진이 읽지 못한다.
- 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다.
-
SSR & CSR의 큰 특징
- TTV : 화면에 보여지는 시각
- TTI : 상호작용을 할 수 있는 시각
- TTV가 먼저, 그리고 TTI가 가능하면 SSR : SSR은 html을 먼저 다운받았을 때 브라우저 화면에 뭔가를 먼저 보여주지만 클릭해봤자 동작하지 않고, 그 다음 js파일을 다운받고 나서 화면과 연결된 클릭이벤트 등을 동작할 수 있게 한다.
- TTV랑 TTI가 동시에 가능하면 CSR : CSR은 html파일을 다운받았는데 화면에 나타낼 것이 없이 그냥 빈 'div'만 있고 js 파일을 다운받아 동적으로 화면을 띄웠을 때 동시에 클릭이벤트 등의 상호작용을 할 수 있다
🔎 우리가 만든 SPA 프로젝트는 온전히 CSR이라고 봐야할까?
- 웹사이트 접속 시 처음에 불러와진 index.html파일에서 body 내부에 네비게이션 메뉴를 보여주게 된다. 이 부분은 부분적으로 SSR이고 그 후 각 페이지 로딩은 CSR이라고 할 수 있다.
< 과제 _ 팀 기초 프로젝트 >
◾ 진행 내용
- 전체
- 웹사이트 전체 UI 컨셉 확정 : 컬러, 폰트, 레이아웃
- 개인
- 프로필 변경 페이지와 로그아웃 버튼을 하나의 모달창으로 구현함
-
내가 만드는 부분은 마이페이지와 메인페이지의 부분적으로 들어가야 되기 때문에,
이전에 만들었던 팬명록 웹페이지에서 기능 구현 테스트를 진행 했다.
-
모듈화가 안되어있고, API 기능이 없는 모달창 구현은 어렵진 않지만, 이 부분을 모두 신경 쓰면서 하는 게 꽤나 까다로운 작업이었다.
-
별도로 분리되어있던 프로필 html파일의 내용을 팬명록(메인) 페이지에 합치고,
css에서 프로필 변경 영역의 사이즈 및 display값을 none으로 지정한 후, js 에서 프로필 관리 버튼을 누르면 diplay값이 flex가 되도록 이벤트 리스너를 등록했다.
여기까지 진행하고, 버튼을 눌러도 제대로 작동하지 않아서 계속 코드를 살펴보면서 헤매고 있었다.
-
결국
route에서 프로필 페이지로 경로 이동하는 부분을 삭제하는 부분과 등록한 이벤트 리스너를 export, main.js에서 import하여 window 전역 객체로 만들어서 테스트 기능 구현을 완료했다.
앞으로 작업할 파일들에서도 export, import 그리고 window 전역 객체로 만드는 것 잊지말기!!
-
- 프로필 변경 페이지와 로그아웃 버튼을 하나의 모달창으로 구현함
⁉️ 어려웠던 내용
- API 기능이 포함된 모달창 구현하기!
❎ 한 번 더 공부할 내용
- 테스트 아닌 프로젝트 파일에 모달창 적용하기.
🎯 문제와 해결
- 위의 프로젝트 개인 진행 내용..
🔗 출처 및 참고자료
- 스파르타코딩클럽 - 파이어베이스 특강 자료
codesign