문제 발생사내 프로젝트 진행 중, react-hook-form의watch로 email 값을 감지하는 부분에서 문제가 발생했습니다. 이메일로 전달받은 인증코드와 이메일 주소를 API를 통해 전달 후다음 화면으로 넘어가려던 타이밍이었는데요. 'Enter'키로 통신 함수를 호출하면통신을 마친 뒤 Chrome에서는 watch로 감지하던 email 값이 유지되는 반면,Safari에서는 값이 유지되지 않고 undefined로 초기화가 이뤄지는 오류가 발생했습니다. 드디어 크로스 브라우징 이슈를 경험하게 되었네요ㅎㅎㅎ원인 파악여기저기 console로 확인하며 체크해본 결과,특정 useEffect가 동작 후 email 값도 초기화가 이뤄지는 것을 확인했는데요.문제가 발생하는 곳으로 추정되는 useEffect 부분에 집..

1. 문제 발생development 환경에서 작업을 완료 후 vercel을 활용해 production 환경으로 배포 후API 통신 동작을 체크했을 때, https통신이 중간에서 http로 변경되어져요청이 들어가는 문제를 경험했습니다.2. 해결하기 위한  시도Api 엔드 포인트를 변경하거나, 백엔드에 변경 사항이 있는지 질문도 해보고vercel 환경 변수도 재설정해줬지만 계속 http로 요청이 이뤄졌는데요.3. 해결 방법next.js의 src > app > layout.tsx에 meta tag를 설정해주는 것으로 해결할 수 있었습니다. 위의 meta tag를 적용하면 http 콘텐츠를 자동으로 https로 변환이 이뤄집니다.