[딸기마켓] 로그인, 회원가입 페이지 추가

추가

로그인 페이지와 회원가입 페이지

 

---

 

 

회원가입 페이지

• 이메일을 작성하지 않거나, 이메일 잘못입력할 경우 경고 메시지가 나타납니다.
• 비밀번호를 작성하지 않으면 경고 메시지가 나타납니다.
• 비밀번호 확인과 비밀번호가 일치하지 않으면 경고 메시지가 나타납니다.
• 닉네임은 작성하지 않을 경우 기본으로 'ㅇㅇ'이 됩니다.
• 회원가입이 완료되면 로그인 페이지로 돌아갑니다.

 

 

---

 

 

로그인 페이지

• 이메일을 작성하지 않으면 경고 메시지가 나타납니다.
• 비밀번호를 작성하지 않으면 경고 메시지가 나타납니다.
• 로그인이 완료되면 메인 페이지로 돌아갑니다.
• 로그인이 된 상태라면 헤더에 로그인 버튼은 사라지고, 프로필 이미지가 생깁니다.
• 프로필 이미지를 클릭하면 프로필 정보를 볼 수 있는 간이 메뉴가 나타납니다.

 

 

---

 

 

로그아웃

• 로그아웃 버튼을 클릭하면 로컬 스토리지에 저장된 accessToken을 삭제합니다.
• 프론트엔드 서버에 존재하는 공용 state인 accessToken 변수도 빈 문자열로 초기화시킵니다.

 

 

수정

로그인한 상태에서 게시글 작성

• 게시글 작성 시 로그인한 상태라면 작성자는 유저 닉네임으로 고정되도록 수정했습니다.

 

 

---

 

 

로그인한 상태에서 댓글 작성

• 댓글 작성 시 로그인한 상태라면 작성자는 유저 닉네임으로 고정되도록 수정했습니다.

 

 

어려웠던 점

로그인, 회원가입 페이지 제작은 게시글 작성 컴포넌트를 제작할 때와 거의 비슷해서 크게 어려움을 느끼지 않았습니다.

대신 로그인을 한 상태에서 게시글 작성이나, 댓글 작성처럼 여러가지 신경써야 할 부분을 생각해 내는게 어려웠습니다.

 

이번에 로그인 기능 구현을 할 때는 브라우저의 로컬 스토리지를 활용했는데, 보안 문제 때문에 되도록 사용하지 말아야 한다고 알고 있습니다. 추후에 로컬 스토리지를 활용하지 않는 형태로 수정할 계획입니다.

 

로그아웃의 경우에 프론트엔드 서버에서만 데이터를 삭제하고 있고, 백엔드 서버에는 관여하고 있지 않습니다. 제가 사용하고 있는 백엔드 서버에 로그아웃을 위한 뮤테이션이 존재하지만, 현재 지식으로 사용하기가 어려워서 우선 위와 같이 동작하도록 했습니다. 이후에 수정할 계획입니다.

 

마지막으로 현재 제 웹사이트에서는 로그인 여부, 등록할 때의 유저 정보와 관계 없이 게시글을 수정, 삭제할 수 있습니다. 이 부분도 이후에 수정할 계획입니다.

 

---

 

모든 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/Cheolyong-Kim/Ddalgi