8월 11일

현재 상황

오늘부터 과제 수행 일지를 작성하려 한다..!

지난 8일부터 현재까지 템플릿과 간단한 자바 스크립트 기능들을 구현하는것에 집중했으며,

• 웰컴페이지 (index.html)
• 관리자 본인인증 페이지 (pwCheck.html)
• 관리메뉴 홈 (myAlba.html)
• 알바생 등록 페이지 (albaRegister.html)
• 알바생 조회 페이지 (albaSelect.html)

위의 다섯가지 템플릿의 틀을 잡았다.

추후 각 페이지별로 스타일을 다듬을 예정이며,

추가로 필요한 템플릿은

• 프로필 페이지 (알바생 데이터 조회)
• 수정 페이지 (알바생 데이터 수정)

두가지가 추가로 제작되어야 한다!

---

추가적으로 Firebase 설치를 완료하였다. 연동에 꽤나 애를 먹었는데, Firebase를 설치했다가 지웠다가를 대략 20번이나 반복하였다...

(똥개훈련)

아래는 이번 Firebase를 설치 및 삭제를 반복하며 알게된 몇가지의 유용한 명령어들이다. 추후에 다른 프로젝트를 진행하면서 요긴하게 쓸 수도 있을 것 같아 남겨놓도록 하겠다.

💥Firebase 관련 명령어

/* ------------- 삭제 관련 ------------- */

// 기존 firebase 버전 삭제하기
$ npm uninstall firebase  
$ npm uninstall firebase-tools

// 기존 firebase 버전 삭제하기 (global로 설치시)
$ npm uninstall -g firebase
$ npm uninstall -g firebase-tools

// 어떤걸로 설치했는지 기억나지 않는다면,
// 네가지 명령어 모두 사용해서 깨끗하게 지우고 시작해도 좋다.

/* ------------- 설치 및 연동관련 ------------- */

// Firebase 설치 
$ npm install firebase

// Firebase 명령줄 도구(CLI Tools) 설치 (global)
$ npm install -g firebase-tools

/* 여기서 Firebase 페이지에서 프로젝트를 미리 생성해준다! */

// 로컬 프로젝트 Firebase 연동 명령어
$ firebase init

// 기존 연동계정 로그아웃 후 새로 로그인하기
$ firebase login --reauth

// Hosting 연동 및 배포하기
$ firebase deploy



/* ------------- 그 외 ------------- */

// 로컬서버 구동하기
$ firebase serve
/* 서버 구동 종료는 [Ctrl + C] 키를 눌러서 종료. */

firebase init를 통해 firebase와 연동을 하는 도중에 github와 자동 연동을 설정하는 도중에 다음 설정으로 넘어가지 않는 버그가 발생했는데,

도무지 이유를 알 수 없어서 현재 프로젝트는 github 연동을 하지 않고 firebase 프로젝트를 생성했다.

구현한 기능

현재 구현한 간단한 기능들은 다음과 같다.

• 비밀번호 유효성 검사 기능 (pwCheck.html)
• 이미지파일 미리보기 기능 (albaRegister.html)
• 로딩화면 추가

앞으로 추가해야하는 기능

• 알바생 데이터 추가, 수정 및 삭제
• firebase 데이터 리스트로 불러오기
• jquery 추가, 데이터 받아오는 즉시 html 태그 추가하여 페이지에 스타일 적용되도록 설정해야 함.
• 리스트 선택시 개별 프로필화면 이동하는 기능 추가. (모달창 or 페이지 이동. 개인적으로 모달창 구현해보고싶음. 사원증 모양으로다가.)
• 리스트 검색 시 해당하는 데이터만 보여주는 기능