[사전캠프 15일차] _ 배열과 리스트 / 가계부 프로젝트 4일차

1. Java 전공책의 배열과 리스트 관련 내용을 복습했다.
   
   
2. 가계부 프로젝트의 로그인 페이지를 완성했다.

[오늘의 학습 키워드]

#배열과 리스트

---

[학습 내용 정리]

• 배열과 리스트

https://devhippo.tistory.com/43

Java - 배열과 리스트

 

• 프로젝트 4일차

프로필 선택 시, 생성되는 비밀번호 입력창을 구현했다.
숫자만 입력 받기, 한 개씩 따로 입력 받기, 자동으로 포커스 바꾸기 등의 기능을 적용하고자 했다.

비밀번호 입력창

비밀번호 입력 시, 각 자리의 숫자를 입려 받는 input의 포커스

입력창에 포커스가 갈 경우 크기가 조금 커지도록 했다.
네모의 중심점이 같은 선상에 위치한 채, 크기가 커지길 원했는데
윗면이 같은 선상에 위치한 채, 크기가 커지는 결과로 만족해야했다.

4자리를 입력하지 않았을 때의 결과, 비밀번호가 일치하지 않을 때의 결과

비밀번호가 프로필 비밀번호와 일치하면 기존에 구현해 둔 가계부 입력창으로 넘어가고,
그 외의 경우 비밀번호 입력창이 리셋된다.

 

---

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

1. 화면 렌더링
새로고침을 하지 않고도 새로 추가된 프로필을 표시할 수 있는 방법이 있을까 고민하다가 
그냥 심플하게 프로필 추가에 성공 시, 화면을 새로고침하도록 했다.

 window.location.reload();

 

2. 4개의 비밀번호 input 요소 간의 간격 조절
justify-content: space-between(?) space-around(?)를 사용하니, 
4개의 input창이 서로 간격을 두고 떨어졌지만 그 간격이 너무 넓었다.
이를 변경하니 input창들이 딱 붙었다.

gap : px;

gap을 통해 원하는 간격을 설정할 수 있었다.

3. 숫자만 입력받기
JaveScript에서는 어떻게 숫자와 문자를 구분해야하나 고민했다.
검색해보니 문자열에서 특정 문자 조합을 찾기 위한 패턴인 정규 표현식이라는게 있었다.

// 숫자가 아닌 값이 입력되면 초기화
if (!/^\d$/.test(value)) {
  e.target.value = ""; // 숫자가 아니면 삭제
  return;
}

\d는 0-9의 숫자를 의미한다.
test 메소드를 이용해 입력값 value가 한 자리 숫자가 아닐 경우, 입력값을 삭제한다. 

전체적으로 JavaScript를 사용하는데 익숙하지 않고 모르는 요소도 너무 많았다. 
전공책에서 JavaScript 부분만이라도 한 번더 복습해야할 필요성을 느꼈다.   

---

[ 내일 학습 할 것 ]

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

2. 이분 탐색 코딩 문제 풀기(3개 정도)