-
Notifications
You must be signed in to change notification settings - Fork 0
마주한 문제
Chan-Joo Kim edited this page Dec 15, 2023
·
2 revisions
- JSON.stringify로 HTMLElement가 string으로 변환되기 때문에 특정 정보 외의 property가 사라진다. 따라서 서버에서 데이터로 받게되면 setAttribute와 innerHTML을 통해 정보를 채워넣고 HTMLElement로 변경해주어야 한다.
- MSW 스펙이 업데이트되서 body가 req에 있는 경우 ReadableStream 형태로 넘겨지고 await req.json()으로 읽어와야된다
- isTapHold라는 변수를 taphold 이벤트 발생시 true로 변경한 후 tap 이벤트가 발생했을때 taphold 이벤트가 true인 경우 taphold 이벤트를 false값으로 변경하고 tap 이벤트 로직을 건너뛰도록 해주었다.
- require로 라이브러리를 불러와 사용하거나 declare module <library 이름> 을 넣어 d.ts 타입 파일을 만들어 tsconfig에 path를 추가하면 타입에러가 해결된다. 하지만 이렇게하는 것이 올바른지는 아직 잘 모르겠다.
- RLS라는 CRUD와 관련된 정책이 이미 적용이 되어 있어 에러가 발생하였다. 처음 테스트 할때는 RLS 옵션을 끈 후에 나중에 서비스에 맞게 policy를 설정해주면 된다.
- setInterval을 사용해 특정 시간마다 데이터가 자동저장하도록 시도해보았지만 내용이 수정되지 않았을때도 자동저장 request가 보내지기 때문에 서버에 부하를 줄것이라 판단되었다.
- 따라서 유저가 정보를 변경했을때 필수인 tap, taphold 이벤트 발생시 서버에 저장되도록 변경해주었다. 이때 연속적으로 불필요한 이벤트가 발생할 수 있기 때문에 throttle로 이벤트 처리를 제한했다.
- throttle을 구현할때 requestAnimationFrame을 사용해 각 사용자에 맞게 정밀하게 throttle하는 방법이 있어서 시도해봤지만 detail하게 throttle 시간을 조절할 수 없어 lodash-es의 throttle로 처리해주었다.
- 처음에는 자동으로 main page로 이동하도록해 편리하게 해주려고 했지만 막상 테스트해보고 나니 웹사이트가 문제가 있는 것처럼 느껴져 UX 관점에서 매우 좋지 않다고 판단되었다. 따라서 일반적인 NotFoundComponent를 보여주는 방식으로 변경했다.
- MSW -> express api 서버를 만들어 db와 통신하는 로직을 테스트하고 구현했었다. 이로인해 OAuth 인증 로직을 클라이언트에 적용한 후 서버에 token을 보내거나 redirect 하는 방법으로 따로 통신 후 데이터를 서버에 요청하는 방식으로 동작해야 한다고 생각해 많은 시행착오를 겪어야 했다.
- 하지만 Supabase 사용시 커스텀 서버 필요없이 client에서 OAuth 인증 이 후 localStorage에 token이 포함된 session 정보가 자동 저장이 되고 db에 요청시 이정보를 자동으로 넣어서 보내주고 expired 된 경우 자동으로 refresh 되어 처리하는 방식으로 동작한다.
- upsert 메소드를 사용해 db에 넣으려는 데이터와 동일한 데이터를 가진 테이블 필드가 존재하는 경우 해당 데이터를 업데이트하고 없는 경우 insert하려고 했다. 하지만 onconflict는 unique한 필드에만 적용할 수 있어서 기존의 테이블 구조를 변경해야 했다.
- 처음에는 upsert로직을 분리해 데이터가 존재하는지 먼저 체크한 후 없으면 추가하고 있으면 수정하는 방법으로 수정했지만 데이터가 커지는 경우 비효율적인 시간 복잡도를 가지게 되는것 같아 identifier 필드를 추가해 date와 uid 정보로 unique한 값을 넣어주는 것으로 해결하였다.
- vercel 배포 후 OAuth 로그인 로그아웃 후 서버 session 상태를 받아오는 딜레이를 고려하지 못해 Not Found Error가 발생하거나 navigate가 잘 동작하지 않았다.
- Signin과 관련해서는 ProtectedRouter에서 localStorage 값을 읽어 드리지 않고 session 값과 supabase에서 session 상태변화를 감지하는 onAuthStateChange 메소드를 사용해 처리해주었다.
- Signout과 관련해서는 유저 정보를 비동기적으로 받아온 후 해당 정보를 useState 훅으로 관리하고 useEffect로 변화를 감지해 처리해주었다. 나중에 이것도 onAuthStateChange 메소드로 변경하는 것이 좋을 것 같다.