[모각코][Reactjs]React + Spring Boot + MongoDB 로그인 및 회원가입 페이지 구현

ASOS 사이트의 로그인 & 회원가입 폼을 참고해서 구현해 보았다.

작성한 코드를 부분적으로 올리면 블로그가 좀 더 예쁘겠지만 그것 보다 더 중요한 것은 독자들의 이해라고 생각하여 코드 전체를 올린 것이므로 양해부탁드립니다.

 

Spring Boot와 연동해서 로그인 및 회원가입시 필요한 정보를 주고받기 전에

원래 혼자서 프로젝트를 진행할때는 Spring 서버를 열고 localhost:8080으로 접근할 수 있었겠지만, 프론트엔드 팀과 벡엔드 팀이 원격지에서 작업을 진행할 것이므로 벡엔드 팀에서 서버를 열어주고 프론트엔드 팀이 그 서버url에 접근해서 정보를 주고받을 수 있다. 벡엔드 팀은 ngrok사이트를 통해서 서버를 열어서 url을 제공해주었다. 이 사이트는 포트포워딩없이 외부접속을 가능하게 해줄 수 있다. (무료지만 100분마다 url이 새롭게 바뀌기 때문에 지속적으로 작업중간중간 url을 수동으로 변경해줘야한다는 불편한 점이 있다.)

 

<회원가입 페이지 구현>

간단하게 페이지만 구현하고 주고받는 코드만 구현했다. 서버측에서 열어준 url을 위 코드의 url변수에 assign해주면 될 것이다. 시간 관계상 아직 제대로 정보를 주고받는 연습은 못해보았으니 참고 바랍니다.

alert창으로 오류가 뜨더라도, F12(관리자 도구)를 통해 console로 정보를 확인할 수 있다.

파일실행은 node_modules와 동일선상의 파일위치에서 npm start 명령어를 통해 할 수 있다.

필자의 경우 VS Code에서 C:\Users\kyung\Desktop\kediTalk-project\keditalk > npm start

Register파일의 위치는 keditalk\src\components\Register\Register.js이다.

 

<회원가입 페이지에서 정보입력 후 Join클릭>

원하는 대로 console에 나오는 것을 확인할 수 있다.

 

<로그인 페이지 구현>

로그인 할때

post방식으로 해서 DB내에서 password와 비교하는 과정을 통해 등록된 user가 맞다/아니다 의 결과를 return 받아야하는지

아니면 로그인을 시도한 user의 정보일부(위의 경우 email)를 get방식으로 보내서 DB내에서 email과 일치하는 password를 암호화된 형태로 받아와서 프론트 단에서 비교과정을 거쳐 등록된 user가 맞다/아니다 를 결정해야할지 아직 잘 모르겠다. 

아직 이와 관련해서 공부중이지만 전(前)자의 경우가 보안성이 더 우수할 것이라 예상된다.

혹시 아시는분은 댓글부탁드립니다 : )

 

<로그인 페이지에서 정보입력 후 Login버튼 클릭>

 

<맨처음에 보이는 App.js 페이지>

 

마지막으로 대망의 Login.css파일이 남았다. 웹개발 할때 마다 느끼는 것이지만 css를 적용하는 것이 항상 미숙하다.

notion에 별도로 정리해두는 것이 필요하다.

<Login.css>

중간에 구글이 보일탠대 이는 추후에 구현할 소셜로그인기능에서 꾸며줄때 사용할 것이다.

이 부분은 아직 구현이 덜 되어서 나중에 정리할 예정입니다.

 

미숙하지만 열심히 공부하고 있습니다.

부족한 부분은 지적해주시면 빠르게 수정하겠습니다.

봐주셔서 감사합니다. 열심히 코딩하세요~

Reference

https://hianna.tistory.com/437 // select box 값 출력

https://www.youtube.com/watch?v=7neASrWEFEM // flex box 개념 및 활용