# 6/24 금

- Same Site(Domain) 으로 배포환경 테스트를 할 수있는 방법이 없을까에 대한 아쉬움

### 피어세션

https://ui.toast.com/weekly-pick/ko_20210630

https://testing-library.com/docs/queries/about/#priority

https://parang.tech/react/2022-react-01/

### PR

- [x] 파크 - 작성 완료되면 체크할게요 (mp4 추가하면 되는데 여기는 안되네요 PR 올리시면 제가 올릴게요~)
- [x] 앨런

[Team-22][FE] 앨런 & 파크 2주차 금요일 PR

### Ref 에 직접적인 조작 vs State 를 통한 Re-rendering 으로 변경
- Label 이나 `띄어쓰기 ~자` 처럼 실시간(?) 으로 change 마다 변경해줘야 하는 요구사항이 있었는데, `띄어쓰기 ~자` 같은 경우는 Ref.current.textContent 를 변경해주는 식으로 조작해서 re-rendering 없이 dom 요소를 조작하는 방식을 사용했었습니다.

- Label 을 변경할 때에는 만들어 놓은 Label 에 props 를 전달하는 식으로 Label 의 Style 을 만들어야 하다 보니 state 를 사용했는데 change 마다 리렌더링이 주기적으로 일어나니 ref 를 사용하는게 바람직하지 않을까 생각했는데 그렇게되면 Label 을 prop 로 전달하는 방식으로 재사용하기가 어려울 것 같다는 생각이 들었습니다. 이와 같은 고민을 해보신적이 있을까요?

### Cookie

- Oauth 로그인시 서버가 refresh token을 set-cookie 응답 헤더에 담아서 보내주는데 SameSite라는 cors 이슈 때문에 쿠키 저장이 정상적으로 되지 않았습니다. 로컬 환경에서 테스트해서 생긴 문제고 같은 도메인에 배포하면 해결될 것 같아 일단은 임시로 access-token처럼 refresh-token이라는 응답헤더를 받아 client단에서 직접 쿠키에 저장해주었습니다.

- 문제는 access-token 만료시 재발급을 위한 API 호출시 저희(client)d에서 요청 헤더에 refresh-token이 저장되어 있는 쿠키를 담아 보내야한다는데, Authorization 헤더에 access-token을 담아 보낼때와 같은 방식으로 했는데도 제대로 쿠키가 담기질 않습니다....



- 구글링해보니 axios의 withCredentials 옵션을 true로 해주라는 말이 대부분인데, 이미 켜놨던 옵션이라 해결하진 못했습니다. 저희끼리 추측해본 것은 크롬 브라우저에서 set-cookie의 SameSite=None 옵션을 secure, 즉 https를 사용한 통신에서만 허용해주는 것으로 보아 이 경우도 뭔가 비슷한 이슈가 아닐까 합니다.
- 혹시 이와 비슷한 상황을 겪으신 적 있는지 궁금합니다.. 글로 작성해 상황 전달이 잘 안된것 같아 걱정이군요.. 😂