05/21

다양한 애니메이션이 있는 apple 홈페이지를 따라 만들어보고 싶었던 생각이 있었는데, 이번 기회에 시도해보았다.

1. 기본 로그인 구현

• 기본 로그인 기능
• 로그인된 유저의 경우 헤더부분이 변경되도록 설정
• 사용자의 입력이 들어올 때만 버튼이 활성화
• 아이디를 입력한 경우에만 패스워드창이 활성화
• 엔터를 쳤을 경우에도 클릭과 동일한 이벤트 발생
• 로그아웃 기능

인풋태그 안에 버튼을 넣기위해 display : absolute 속성을 활용, 인풋 태그로부터의 위치를 계산하여 구현하였습니다.

1-1) 아이디 저장 버튼 구현

• 아이디 저장을 클릭한 경우에 한해서 아이디 , 아이디 저장 버튼 클릭 여부를 저장
• 클릭만하고 로그인 하지 않는 경우에는 작동하지 않도록 설계

  아이디 저장 버튼은 사용자별로 제공되어야 하기 때문에 로컬 스토리지에 변수를 저장해서 체크하는 방식으로 구현하였습니다.

---

2. 회원가입

• 기본 회원가입시 데이터베이스에 저장하는 기능
• 포커스를 얻으면 placeholder가 위로 올라가는 애니메이션 추가
• ID 중복체크 기능
• 우편번호를 직접 입력하지 않고 API를 활용, 검색해서 자동으로 입력되도록 구현
• 간단한 유효성 검사 ( 이름을 입력했는지 , ID/PW 가 4자리 이상인지 )
• 비밀번호 재입력과 동일한지 체크

---

3. 회원정보 수정

• PK인 아이디는 수정하지 못하도록 설정
• 회원정보를 수정하기 위해서는 기존 비밀번호를 입력하도록 설정
• 회원정보를 수정하면 로그아웃시키고 로그인창으로 이동
• 새로운 비밀번호를 입력한 경우에만 비밀번호를 변경하도록 구현

---

4. 회원탈퇴

• 회원 탈퇴기능
• 회원탈퇴시 로그아웃시킴

---

5. 기타 예외 처리

5-1) 로그인이 필요한 기능

• 로그인 하지 않은 상태로 로그인이 필요한 기능에 (마이페이지 , 실거래가 검색) 접근시 로그인페이지로 이동

5-2) 로그인한 상태로 로그인 페이지에 접근

• 차단

5-1 , 5-2 는 router에서 로그인 여부를 확인하여 차단하도록 구현.

5-3) ID 중복체크를 통과하고 아이디를 변경하는 꼼수

• 차단

---

느낀점

컴포넌트를 어느정도 단위까지 쪼개야 하는지 , 프론트랑 백엔드랑 어느쪽에서 처리할지 애매한 기능 ( 페이징 처리 등 ) , css공부 필요
프론트랑 백이 마지막에 어떻게 동작하는지 배웠다. proxy를 통해 vue 8080 포트로 오는 요청을 spring 포트로 쏴주게 해주고 빌드해서 스프링 프로젝트 static 폴더에 넣어주면 끝