[항해 14기] 개발일지31 (미니 프로젝트 - 리팩토링, 배포, FE연결)

미니프로젝트 주차

 

1. 진행사항

1) 리프레쉬토큰 리팩토링

2) 배포 및 FE와 연결(CORS)

 

 

 

2. 새로 시도한 것

1) FE와 연결

2) 배포환경에 .env 업로드

- vim .env //파일이 없으면 생성, 있으면 수정 또는 추가
- vim에서는 입력모드와 명령모드 두가지로 나눠짐
- esc버튼을 누르면 입력모드/명령모드 전환
- 명령모드 :
i ##입력모드로 전환
:q ## 종료한다
:q! ##저장하지 않고 강제로 종료
:wq ##저장하고 종료한다.
이후 ls -a ## (숨김 파일도 볼 수 있는 명령어)로 .env파일 확인

 

 

 

3. 고찰

1) 리프레쉬토큰

- 처음 적용 하였던 부분이라 로직에 대한 이해가 완벽하지 않았던 상태여서 완벽한 이해를 진행한 후, 작성한코드들에 대한 리팩토링 진행

- 리프레쉬 토큰의 의의를 잘못 이해하고 있었음(탈취 되었을 때 리프레쉬토큰 만료의 의미 - 이미 토큰이 탈취되어 정보가 빠져나갔고, 해당 정보를 이용하여 로그인을 하면 새롭게 토큰을 지급해 주는데 무슨 의미가 있는가? - 토큰에 로그인에 성공할 수 있을정도의 민감한 정보를 담아두면 안됨)

 

2) FE와 연결

- 프론트에서 프록시 설정, 크리덴셜 설정

- CORS 이슈(https://jujiprogram.tistory.com/61)

- Node.js CORS 미들웨어 설정

app.use(

  cors({

    origin: "*",

    credentials: "true",

    // cors options

  })

);

 

 

 

4. 트러블 슈팅

1) 배포 후 FE와 연결 - 개요

- CORS가 익숙하지 않아 모든 도메인의 origin에 대해 열여줬는데, 다음 프로젝트에선 FE 도메인만 허용하여 연결 시도할 예정

 

2) FE와 연결 - 토큰 관련

- 문제점 : 개발환경에서 잘 작동되던 액세스/리프레쉬 토큰이 배포후 프론트에서 작동이 되지 않았음
- 원인1 : 쿠키에 대소문자 구분이 없어서 카멜 방식으로 보내준 변수들을 FE에서 소문자로 오해하여 인증 미들웨어의 req에 잘못 할당 하여줌, 이로 인해 변수명 매칭이 되지않아 인증 미들웨어의 동작이 진행되지 않았음

- 해결방식1 : 소통을 통하여 대/소문자 구분이 필요한 name값들을 통일

 

- 원인2 : 백엔드에서 테스트할 땐 로그인 컨트롤러에서 res에 쿠키를 담아 보내줬었고 인증미들웨어에서 req를 쿠키로 받아와서 진행되는 로직 이었는데, 프론트에서는 컨트롤러에서 받아온 쿠키를 헤더에담아서 인증미들웨어로 보내주고 있었음

- 해결방식2 : 인증 미들웨어의 req.cookies를 req.headers로 변경하여 해결

 

- 번외 : 위의 방식으로 인하여 배포환경에서는 req.headers로 진행되었고, 백엔드 테스트 환경에서는 req.cookies로 진행되고 있어 매번 코드를 스위칭 해주어야하는 상황

- 해결 :  코드의 변경없이 프론트환경과 백엔드환경에서 둘다 동작 시켜주기 위해 3항연산자를 이용하여 header로 값을 받아올때(프론트)와 cookies로 받아와야할때(백엔드)를 구분해 줌