React - 로그인

아직 해결 못 함.

API : 서버에서 jwt 를 주면, 인증이 필요할 때 헤더에 담아서 보내면 된다.

여기서는 jwt 를 사용했지만 다른 방식은 세션 방식이 있다. jwt 는 서버에서 관리할 게 줄어들어 편하지만, 세션과는 다르게 한 번 발급한 jwt 는 다시 주워 담을 수 없다. 유효 기간이 긴 refresh token 과 유효 기간이 짧은 access token 두 개를 발급하여 관리할 수도 있지만 완전한 해결책은 아니다. 대신 jwt 방식의 장점이 세션 방식의 단점. 참고 자료 : https://youtu.be/1QiOXWEbqYQ 

첫 번째 접근 : 서버에서 받은 jwt 를 전역 변수에 저장 후 (axios)요청시 헤더에 jwt 를 담아서 보낸다.
문제점 : React 는 새로고침하면 전역 변수가 초기화 된다.

두 번재 접근 : 서버에서 받은 jwt 를 cookie 에 저장하여 요청시 헤더에 jwt 를 담아서 보낸다.
문제점 : 서버에 요청할 때 쿠키에 있는 값은 자동으로 헤더에 담긴다. 헤더에는 jwt 를 담는 필드와 cookie 에 담겨져서 보내진다. 쿠키 특성상 요청할 때 자동으로 담기기 때문에 이 방식의 경우 웹 스토리지에 저장하는 것이 더 낫다. 하지만 서버에서도 쿠키를 설정할 수 있고 서버에서 처리하는 것도 쿠키를 읽어서 처리하면, 프론트에서 요청시마다 jwt 를 넣지 않아도 되어 이게 가장 깔끔한 방법일 것 같다.

다음 문제 해결 진행 중...

---

로그인 말고 다른 문제

 지금 React 서버는 aws(Linux) + nginx 를 통해 배포 중이다. nginx 기본 설정으로 배포하면, 주소를 치고 들어갔을 때 홈("/")페이지를 제외하고 404 error 가 뜬다. /etc/nginx/sites-available/*.config 에 있는 파일을 수정하면 된다. 기본 설정으로는 설정되어 있는 경로에서 사용자가 접근한 경로를 못 찾으면 404 가 뜨는데, 404 대신 index.html 을 띄워주면 해결된다. 예를 들어 내가 설정한 경로가 react-root/build 이고, 사용자가 domain.com/login 에 접근하면 /build 에서 login.html 을 찾아보고 없으면 404 를 띄우는 게 기본 설정이다. (React-Router-Dom 을 사용한 React 프로젝트는 Single Page Application 이기 때문에 html 파일이 index.html 뿐이다.) /etc/nginx/sites-enable/*.config 에는 /etc/nginx/sites-available/*.config 에 있는 파일을 심볼 링크로 참조하고 있는데, 무슨 관계인지는 잘 모르겠다.