교수님이 쉬는날 내주신 과제로 서버 나눠서 작업하는 연습도 할겸 회원가입 페이지를 만듭시다.
서버를 두개 front 와 back으로 나눠줍니다.
front server 셋팅
package.json
서버를 나눠서 작업하니 두 폴더 모두 각각 필요한 라이브러리를 설치해줍니다. ( 프론트 서버 )
server.js ( GET )
back server 셋팅
package.json
서버를 나눠서 작업하니 두 폴더 모두 각각 필요한 라이브러리를 설치해줍니다. ( 백 서버 )
server.js ( POST )
// cookie-parser는 사용하지 않으니 빼주셔도 됩니다.
axios로 다른 서버 요청/응답 받아보기
front 서버
- ID 중복확인 버튼을 만들고 요청을 보내서 result로 값을 잘 받나 중간확인을 했습니다. 전에 XMLHttpRequest로 연습할때는 같은 서버여서 편했는데 다른 서버에다 보내고 받으려니 번거롭습니다.. ㅠ
back 서버
1-1. 요청이 왔을때 우리가 중복체크하는데 필요한 userid값이 잘왔나 중간점검 해줍시다.
userid.value값은 잘 오네요 ^^
브라우저에서 응답도 잘 받는것을 확인해줍시다. 잘되네요 ^^
- 이제 가져온 userid가 db에 이미 있는 userid인지 확인해야 하니 sql구문으로 내 db에 userid가 중복된게 있는지 확인해봅시다.
이아이디있음? 이라는 userid를 중복체크해보니 빈배열이 나왔고 길이도 0인것을 보니 제 db에 userid는 이런 id가 없는것 같습니다. 아마 userid가 이미 제 db에 있는 userid면 값이 있으니 배열에 값이 들어가있고 배열 길이는 1로 나왔을겁니다.
- ID가 DB에 있나없나 확인은 했으니 있을경우와 없을경우 각각 값을 다르게 보내주면 됩니다. try catch문을 사용해서 작업을 하였습니다.
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
근데 이런 에러가 떠서 뭐지..? 이러고 있는데 res.send를 1 or 0으로 이미 보내는데 얼른 끝내자로 또 보내서 뜨는 에러인것을 확인했습니다. 즉 두개 이상의 응답을 보내서 나오는 에러였습니다 .. 바보
- id가 중복될 경우 2를 보내주고 중복이 안될 경우 1을 보내주는것을 확인해줍시다. 이미 제 db에 있는 userid와 없는 userid로 중복체크를 클릭하니 각각 다른값이 왔습니다.
- 다시 front 서버
- result.data의 값으로 받은 1 or 2로 각각 다른 값들을 id_span에 넣어주었습니다.
결과
- 중복되지 않은 userid일 경우
- 중복된 userid일 경우
ID 중복체크 기능은 많이 연습해보았는데 서버를 두개로 나뉘니 좀 귀찮은 부분이 많았던것 같습니다.
