[사전캠프 14일차] _ 인터페이스 / 가계부 프로젝트 3일차

1. Java 전공책의 인터페이스 관련 내용을 복습했다.
   
   
2. 가계부 프로젝트의 로그인 페이지 디자인을 완성했다.
   
   
3. 밀린 집안일 해결과 로그인 페이지 완성에 집중하기 위해
   코딩 문제는 Solved.ac의 클래스 레벨을 올리기 위한 간단한 문제만 풀어서 따로 정리하지는 않았다.

[오늘의 학습 키워드]

#인터페이스

 

---

[학습 내용 정리]

• 인터페이스

https://devhippo.tistory.com/41

Java - 인터페이스

 

• 프로젝트 3일차
  어제 구상한 디자인을 기반으로 화면을 다시 구상했다.
  프로필 선택 문구와 프로필 표시 영역을 묶어서 합쳐주었고
  프로필 창의 모양을 원형에서 모서리가 둥근 네모로 변경, +의 크기를 키웠다.

프로필 선택창

프로필을 추가하는 팝업창을 다음과 같이 구성했다.
입력창은 플로팅 라벨을 사용했고, 버튼은 커서가 영역 위에 올라가면
왼쪽 이미지에서 오른쪽 이미지와 같이 버튼 색상이 변경되도록 설정했다.

프로필 추가 팝업창 좌) 커서를 안 올렸을 때, 우) 커서를 버튼 위에 올렸을 때

새로 추가할 프로필의 정보를 입력하고 저장을 누르면 firebase의 서버에 데이터가 저장되고 프로필 창이 생성된다.
프로필 창을 누르면 비밀번호를 입력할 수 있다.

새로 추가된 프로필, 데이터 베이스에 저장된 모습, 프로필 선택 시 비밀번호 입력창

---

[학습하며 겪었던 문제점]

1. 플로팅 라벨의 문구가 보이지 않음
    CSS에서 body의 글자를 모두 흰색으로 설정했기 때문에
    흰 바탕 위에 흰색으로 placehold의 문구가 적혀서 보이지 않았던 것이다.
    해당 영역의 글자를 검정색으로 설정해줌으로써 해결했다.

2. JQuery 실행 안 됨
    CSS때와 동일한 이유로 JQuery 실행을 위한 링크를 삽입하지 않았기 때문에 발생한 문제였다.
    bootstrap때의 경험을 기반으로 빠르게 문제를 파악하고 해결할 수 있었다.

3. 렌더링
    새로고침을 눌러야만 새로 추가한 프로필 데이터가 업데이트 되었다.
    이 부분을 해결 중이다.     

---

[ 내일 학습 할 것 ]

1. Java 전공책 리스트, 멀티스레드 내용 복습하기

2. 프로젝트 화면 렌더링 문제 해결,
    비밀번호 입력창 디자인 바꾸기,
    올바른 비밀번호 입력 시 가계부 화면으로 이동하는 이벤트 작성하기