문제점 1:
서버에서 원하는 데이터는 string이었으나 req를 분석한 결과 프론트에서 배열로 주는 것을 발견하고 수정
문제점 2:
처음에는 사용 예제를 보면서 우리의 프로젝트대로 적용시키려는 방향으로 여러 변수들을 수정하였음. 하지만 passport의 serializeUser() 메소드의 매개변수가 무엇을 의미하는지 파악하지 못해 serializeUser() 메서드의 done() 메소드에서 우리의 프로젝트에서 사용하지 않는 객체의 property를 사용하였음
→ serializeUser() 메서드의 공식문서를 보면서 serializeUser() 메소드의 매개변수는 req.login 메소드의 첫번째 매개변수임을 파악
→ 해당 객체는 passport의 전략에서 꺼내온 유저의 정보였다는 사실을 파악
→ 사용 예제에서는 유저의 아이디를 id로 사용하였지만 우리의 프로젝트에서는 ID라는 변수이름으로 사용하고 있다는 사실을 파악
→ 수정 후 문제 해결
문제점3:
서버와 클라이언트의 도메인이 다른 경우 Acess-Control-Allow-Origin이라는 헤더가 없다는 에러가 발생
→ 이 현상은 브라우저에서 서버로 요청을 보낼때만 발생하고 서버에서 서버로 요청을 보낼 때는 발생하지 않음
→ 이 문제를 CORS라고 부름
→ npm으로 cors라는 모듈 혹은 직접 헤더를 res.set메서드에 넣으면 해결
→ cors에 대한 내용은 추후 정리하여 다시 적을 예정
문제점 4:
fetch 함수는 기본적으로 쿠키를 주고 받지 않기 때문에 로그인이 성공하였다고 와도 유지를 할 수가 없다.
→ fetch 함수에서 credentials : "include"라는 옵션을 설정해주고
→ 서버에서는 credentials : "include"라는 옵션의 fetch를 받기 위해서는 cors 옵션에 해당 url로부터만 요청을 받는 로직을 세워주어야 한다
→ axios는 쿠키를 주고 받을 수 있어서 그냥 해결된다.
