백엔드/node.js공부

[nodejs] 간단한 로그인 & 회원가입 기능 구현(3)

민트초코수장 2021. 1. 12. 21:49

ejs와 연결되는 js 파일

 

public폴더의 home.js

location.href 는 현재 화면을 입력한 페이지 주소로  바꾸는 기능입니다.

location.href 파라미터만 쓰면 현재페이지를 확인할 수 있습니다.

 

public폴더의 success.js

 

public폴더의 login.js

1. text에 입력된 값들을 data 오브젝트에 저장합니다.

 

2. 아래 url로 들어가면 POST프로토콜로 JSON인코딩된 데이터를 보내는 방법이 있습니다.

그 방법을 이용해 body에 데이터를 넣어 보내었습니다.

 

3. then으로 결과값을 받아 값이 존재한다면 빈 오브젝트인 response의 값을 받아 성공인지 아닌지를 판단합니다.

 

4. 맞다면 사용자의 이름을 넣어 알림을 줍니다.

developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95

 

Using Fetch - Web API | MDN

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있

developer.mozilla.org

public폴더의 signup.js

위의 login.js와 똑같이 fetch를 이용해 데이터를 보내줍니다.


 

css파일

main.css
login.css의 일부

css는 비슷하므로 안올리겠습니다.

 

css파일을 최적화하는 방법은 더 공부해봐야될 것 같습니다.

 


최종 실행 영상

 

 

보안문제나 여러 에러는 공부하면서 잡아가도록 하겠습니다!

 

데이터베이스에도 입력된 것을 볼 수 있습니다.

반응형