221220 TIL 미니프로젝트 5

오늘의 한일

1. 로그인기능 구현

2. 회원가입 유효성 검사 기능 수정

3. token 값 헤더 전송 

4. 오늘 만난 에러

 

1. 로그인 기능 구현

(1) responst header에서 token값을 불러오지 못하는 문제

   1) 문제 파악 

• network 탭에서는 request header에 token 값이 보인다.
• 그런데 console을 찍거나 token을 실제로 불러오려고 하면 되지 않는다.
• 블로그를 찾아보니 headers에서 token 값을 불러오려면 백엔드 측에서 무언가 조치를 해주어야 하는 것 같다.

   2) 문제 해결

• CORS 이슈로 발생한 문제였다.
• CORS 란, Cross Origin Resource Sharing의 약자로서 서로 출처가 다른 클라이언트와 서버에서 데이터를 주고 받을 때 보안상의 이유로 권한을 부여하도록 하는 체제라고 한다.
• 즉, 서로 출처가 다른 서버와 클라이언트가 통신을 하게 되면 그러한 요청을 중간에서 가로 막는것이다.
• 여기서 서로 출처가 다르다는 것은 클라이언트와 서버의 포트가 다른 것을 의미한다.
• 이러한 문제는 보통 로컬개발환경에서 일어난다. 왜냐하면 로컬 개발환경과 배포된 서버와의 출처가 다르기 때문이다.
• 해결방법으로는 총 네가지가 있다.
  1. 프록시 서버 이용
     • 프록시 서버란? 클라이언트 대신에 인터넷상의 다른 서버에 접속하여 우회하는 서버를 말한다.
     • 따라서 클라이언트가 다른 네트워크 서비스에 간접적으로 접속할수 있게 해주는 프록시 서버를 이용하면 cors 이슈를 피할 수 있다.
     • CORS는 브라우저에 관련된 정책이기 때문에 브라우저를 통하지 않고 서버간 통신을 할때는 적용되지 않는다.
  2. 클라이언트에서 http-proxy-middleware 사용하기
     • 이 해결 방법은 로컬 환경일 경우에 한정해서 해결할 수 있다.
     • middleware를 사용하면 로컬환경에서 api 통신시에 변경된 포트로 프록싱을 해준다.
  3. 서버에 Access Cntrol Allow Origin 헤더 세팅하기
     • 가장 기본적인 방법으로 클라이언트가 아닌 서버에서 헤더를 세팅해주는 것이다

► Bearer란? 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스

 

2. 회원가입 유효성 검사 기능 수정

(1) 비밀번호 확인 입력시에 비밀번호와 같은 값이 입력되었는데도 통과메세지가 출력되지 않는 문제

  1) 문제 파악

• 비밀번호와 비밀번호 확인을 같은 값을 입력하여도 통과메세지가 출력되지 않는다.
• 비밀번호 이전 입력값을 비밀번호 확인에 입력해주면 통과메세지가 출력된다.
• 변경된 state값이 제대로 반영되지 않아 생기는 문제로 파악된다.

   2) 문제 해결

• 해결은 생각보다 쉬웠다.
• 쓰고있던 useCallback을 지워주니 적용이 바로 되었다. 어떤 차이가 있는 걸까?

►useCallback 이란? 성능 최적화를 위하여 특정한 함수를 재사용하는 hook이다.

3. token 값 헤더 전송 

 

4. 오늘 만난 에러

(1) http://localhost:3000/undefined/post 404 (Not Found)

   1) 문제 파악

• 로컬 개발환경에서 클라이언트를 띄웠을 경우에 에러가 발생하였다.
• 환경변수를 사용하여 서버주소값을 입력했을 때 발생한다.
• 환경 변수는 .env 파일에  "REACT_APP_URL=http://0.00.00.0000" 이런 식으로 주소를 입력하고 이 값을 가져다가 쓰면서 git에 url 주소가 올라가서 해킹 등과 같은 보안 문제를 피하기 위해 사용하는 방법이다

    2) 해결 방법

• .env 파일이 클라이언트를 실행하는 폴더내에 있어야 하는데 다른폴더에 있어서 생긴일이었다.
• 같은 폴더에 넣어주니 잘 작동하였다

 (2) 403 에러