소셜 로그인을 구현하던 도중 다른 프론트엔드 개발자분과 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설치 시..

에이전시에서 처음으로 맡게된 프로젝트는 정품 시리얼을 등록하는 두 페이지 가량의 사용자 사이트와 어드민 사이트의 데이터 CRUD를 구현하는 것이었다. 1. Mysql DB연동 그 중에서도 나에게 주어진 첫 업무는 svelte로 mysql을 연동하는 것이었다. svelte도 처음인데 mysql 연동까지 해야한다니 서버 페이지도 개발해야하는 줄은 몰랐던터라 당황스러웠지만 그래도 node를 조금 써봤던 덕에 쉽게 적응할 수 있었다. 스벨트는 다행히 리액트보다 훨씬 다루기 편했다. JS만 알면 누구든 쉽게 적응할 수 있는 프레임워크였다. 변수에 할당만 하면 state가 변경되고 양방향 바인딩이 가능하여 input값도 다루기 쉬웠다. 문제는 생태계가 좁아 참고할 수 있는 자료가 적다는 것 😐 mysql 연동은 라..

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