fe-sprint-auth-basic - 아윤 엔지니어 버전.zip
로그인 / 로그인 유지를 위해서 쿠키 ( 어드밴스드에서는 세션 )을 사용함
혹시 서버 설치에 문제가 있다면. —force 옵션을 붙여서 설치해보세요.
npm install --force
서버의 index.js 파일을 확인해보면 인증서를 불러오는 코드가 있는데, 해당 폴더에 인증서가 없어서 https 서버가 아닌 그냥 http 서버가 열리게 됩니다.
인증서를 만들어서 https 서버로 바꿔줍시다. (인증서가 쓰던거 있으면 복붙해도 되고, 새로 만들 경우에는 서버 터미널에 다음 코드 입력하기)
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
이제 npm start로 서버를 실행하면 https 서버가 열리는 것을 확인할 수 있습니다!
index.js에서 CORS 설정도 해줘야하죠? 주석 적힌대로 작성해줍시다. (section2 CORS 참고)
const corsOptions = {
origin: "<http://localhost:3000>",
credentials: true,
methods: ['GET', 'POST', 'OPTION']
};
이제 https 서버를 만들어줬으니, 기능을 구현해봅시다!
어떤 순서로 구현하면 좋을까요? 저는 기능이 작동하는 플로우를 따라서 클라이언트, 서버를 왔다갔다하면서 구현해볼거에요.
클라이언트의 Login.js 확인해보세요.
input창에 아이디, 로그인 입력하면 업데이트되는 loginInfo
로그인 유지하기 체크 상태를 의미하는 checkedKeepLogin
에러 발생시 로그인 버튼 밑에 에러 메시지를 표시하는 errorMessage
일단 아이디, 비밀번호 중 하나라도 입력이 안 되면 에러를 띄우게 작성합니다.
if (!loginInfo.userId || !loginInfo.password) {
setErrorMessage('아이디와 비밀번호를 입력하세요')
// 입력 안된 값이 있는거니까 요청 보내볼 필요도 없이 바로 리턴하기!
return;
}
로그인을 처리하는 엔드포인트를 입력해줍니다. - "<https://localhost:4000/login>"
req.body 에서 loginInfo, checkedKeepLogin 확인하는것을 보니 Login.js의 상태를 그대로 실어서 보내줘도 될 것 같네요!
req.body 는 어떻게 보내나요? post 요청을 보낼 때 엔드포인트의 다음 인자로 넣어주면 됩니다.
.post("<https://localhost:4000/login>", {loginInfo, checkedKeepLogin})
서버에서 요청 잘 받는지 확인해봅시다. (서버 열어놓는 것 잊지 마세요! → npm start)
→ 서버 login.js에 console.log(req.body) 를 작성하고 저장한 다음 로그인 버튼을 눌러보세요
서버 터미널로 요청이 잘 들어온다면? 들어온 정보로 요청을 처리해서 응답을 보내주도록 합시다.
