[졸업작품] - 제작 1주차

드디어 이번주에 제작을 시작했다!!

졸업작품에 대한 기대가 크기 때문에 최대한 완성도 있게 만들 생각이다.

아직 실력이 그정도 될지 모르겠지만 졸업작품을 하면서 많이 배우고 이렇게 기록도 남길 예정이다. 1년 후에는 많이 성장해 있는 개발자가 되길 바라면서 이번주 설계 목표에 대해 설명 하겠다.

로그인&회원가입 페이지

우리팀이 대략적으로 디자인한 로그인 및 회원가입 페이지다. 이것을 바탕으로 설계를 시작했다. 먼저 프론트엔드인 나와 다른 조원은 하나씩 맡아서 만들기로 했다.

로그인 페이지

 

내가 만든 로그인 페이지다. 비록 초안이지만 최대한 기능을 많이 넣으려고 노력했다. 

-기능-

1. 각각의 input 태그에서 받은 value값을 로그인 버튼을 누르면 localstorage에 submit되게 하였다. 각각의 value들은 변수에 저장해서 따로 저장되게 하였다. 

2. id와 password 둘다 입력이 완료 되었을때 로그인을 누르면 저장되게 하였다. 

3. input태그에 값이 넣어지면 x박스가 나와서 해당 input태그의 값을 모두 지울수 있는 기능을 추가하였다. 

4. 회원가입,아이디 찾기, 비밀번호 찾기에 href태그를 넣어서 해당 페이지도 이동할 수 있게 하였다. 아직 해당 페이지는 제작하지 않아서 누를수 있게만 하였다.

 

-깨달은 점-

1. 하나의 form태그 안에 input태그 여러개와 submit태그를 넣으면 input태그 여러개가 한번에 전송된다. 

2. input태그에 써지는 값들은 value속성에 저장된다.

3. javascript에서 css속성을 바꾸고 싶을때에는 Element.style.css속성 = "바꾸고 싶은것" 하면 된다.

4. 로컬 저장소에 값을 저장하고 싶다면 Localstorage.setItem()을 해주면 된다.

 

-개선해야 할 점-

1. 기능 3 부분에서 설정을 keyup기능을 넣었기 때문에 아무 키나 넣었을때 x박스가 활성화가 된다. 예를 들어 Caps Lock이나 Backspace같은 키를 눌러도 활성화가 된다. 이 점을 수정해서 문자나 숫자를 넣었을때 활성화가 되도록 만들 예정이다.