소셜 로그인을 구현하던 도중 다른 프론트엔드 개발자분과 next-auth를 사용해보기로 했다. 쉬운 구현 속성으로 할 수 있는 다양한 기능 access token 및 refresh token 생성 가능 소셜 정보 가져오기 가능 여러가지 기능을 지원하고 있어 매우 좋아보였고, next와의 호환도 잘 될것 같아 한번 사용해보기로 했다. 사용하는 과정에서 여러가지 에러들을 만날 수 있었다. Error 1. 앱 관리자 설정 오류(KOE006) redirect 경로를 권장하는 주소와 다르게 해서 나타나는 오류였다. next-auth를 사용할 때에는 꼭 /api/auth/callback/[provider]로 지정해야한다. 왜 그런지는 나중에 알 수 있었다. 에러를 잡고나서 oauth는 redirect url로 au..

구현 시 동영상으로 모션 효과를 넣었는데, 아이폰에서는 동영상을 클릭 하면 컨트롤바가 나타나는 현상이 있었다. IOS 정책 때문에 전체 화면으로 보인다고 하는것 같은데 PC나 갤럭시에서는 확인해볼 수 없던 문제였어서 당황했다. 그래도 검색해보니 해결법은 단순했다. video 태그에 playsInline 한 줄만 더 넣어주면 끝! 이 속성을 안넣어주면 autoplay도 안되는 듯? next에서는 inline의 첫 i를 꼭 대문자로 써야한다. (아마 리액트도 그렇겠지?) 확실히 배포해서 운영을 해보면 몰랐던 문제들이 속출하는 것 같다.

실시간으로 당첨된 내역을 불러오면서 몇시간 전인지 보여주는 뱃지를 구현해야했다. 당첨 내역이 한시간 이내면 n분 전, 이상이면 n시간 전으로 나오게끔 해놓았는데 로컬에서는 문제가 없었으나 배포하고나니 -nnnn분 전 이런 시간으로 출력되었다. 계산을 해보니 얼추 9시간 정도의 오차가 나왔고 아 이게 그 timezone 문제구나를 깨달았다. Timezone이란 동일한 로컬 시간을 따르는 지역을 의미한다. 예를 들어 미국의 경우 다양한 timezone으로 나눠진다. Central Standard Time Mountain Standard Time Pacific Standard Time Eastern Standard Time 등 ... 참고: https://docs.oracle.com/middleware/122..

npm install 에러 react 템플릿을 전달받아 npm install 하는 과정에서 에러가 났다. 의존성 트리를 확인할 수 없다는 에러였다. npm 7버전 부터는 peer Dependencies를 자동으로 설치하는데, 이미 설치되어있는 의존성과 버전이 다르면 충돌이 일어난다고 한다. npm install --legacy-peer-deps npm install --force 나는 --force부터 써보는 편인데 다행히 해결되었다. 두 개의 차이는 예전에 써두었던 링크 참고! 2022.09.25 - [Study/Error] - [error] npm 설치 오류, firebase import 오류 [error] npm 설치 오류, firebase import 오류 npm 설치 오류 firebase설치 시..

세션 스토리지(Session storage)와 로컬 스토리지(Local storage)는 HTML5에서 추가된 저장소로 간단한 키와 값을 저장할 수 있다. 여기에 저장하면 새로고침을 해도 데이터가 날아가지 않는다. 세션 스토리지는 브라우저를 닫으면 데이터가 사라지지만 로컬 스토리지는 브라우저를 닫아도 남아있다. 저장 제한 용량은 모바일은 2.5mb, 데스크탑은 5mb~10mb 정도이며 기기마다 다를 수 있다. Local Storage 로컬 스토리지는 window.localStorage에 위치한다. Origin(도메인, 포트, 프로토콜)이 같다면 url 경로가 달라도 공유된다. 한 창에서 데이터를 설정하면 다른 창에서도 변동 사항을 확인할 수 있다. 메소드 setItem(key, value) - 키-값 쌍..

google-map-react 라이브러리를 세팅하는데 지도가 화면에 나오지 않았다. 콘솔을 켜보니 웬 이상한 에러가 우르르 🤦🏻‍♀️ google-map-react 깃허브에 가서 찾은 결과 해결방법은 index.js파일에 있는 를 비활성화 시키면 됐었는데 해당 방법대로 해보니 확실히 에러 없이 잘 나오긴 했다. 그렇지만 문제를 알려주는 도구인 stcirt mode를 끄는게 과연 제대로 된 해결 방법인지 의문이 들었다. 해당 이슈에서도 다들 임시방편일 뿐이라며 해결해달라고 하고 있었다. 아마 리액트 18버전 문제인것 같은데.. 빨리 해결되길 바라며 나는 리액트 다운그레이드를 하러 간다,,,.. 🥲