20240729 TIL

문제 상황

A 화면에서 B 화면으로 이동할 때, B 화면에서는 리스트를 불러옵니다. 리스트에 100개의 아이템이 있다고 가정할 때, A 화면에서 40번째 아이템을 클릭하면 B 화면에서는 30번째부터 50번째까지의 아이템만 가져와서 보여주기를 원했습니다.

하지만 Flutter의 ListView 구조상 새로운 아이템이 추가되면 스크롤 위치가 최상단으로 유지되어 새로운 아이템이 가장 위에 렌더링됩니다. 그 결과, 사용자가 보던 아이템의 한 위에 있는 아이템이 아니라 리스트의 0번 인덱스 아이템이 보이게 됩니다. Positioned Scroll ListView로 새로운 아이템을 추가한 후 원래 보던 아이템의 인덱스로 이동시켜 보았지만, '인덱스 0 > 원래 보던 아이템'으로 이동하는 것이 눈에 보여 사용하기 적절하지 않았습니다.

해결 방법

A 화면에서 B 화면에 필요한 데이터를 미리 응답받도록 했습니다. 따라서 B 화면에서 40번째 아이템을 클릭하면 이전 및 다음 10개씩의 데이터를 받아오는 것이 아니라, A 화면에서 B 화면에 필요한 1~40번째 데이터를 모두 가지고 있기 때문에 B 화면에서는 이를 그대로 보여주기만 하면 되었습니다. 이는 인스타그램의 그리드 뷰와 같은 방식입니다.

배운 점

프론트엔드에서 해결하기 어려운 문제가 있을 때, 백엔드와 논의하여 API 구조를 변경할 수 있다는 점을 배웠습니다.

리워드형 광고 admob 시 광고를 다 봤는지 체크할 수 있는 두가지 방법

1. 콜백 url : 미리 정의해 둔 (혹은 앞으로 구현할) 콜백으로 사용할 서버 URL을 여기서 등록해 두면, 나중에 해당 광고를 유저가 시청 완료했을 때 자동으로 서버에 콜백을 보내 서버 측에서 바로 검증하고 보상을 지급할 수 있다.

2. 프론트에서 광고 다 봤는지 콜백받아서 서버에게 API 쏴주고, 그러면 서버는 API 받아서 유저에게 리워드를 준다. (현재 구현방식)

현재방식 : 광고 시청 완료를 프론트에서 체크해서 백앤드에게 API를 보내면 리워드를 줄 수 있다.
vs
콜백 URL 방식 : 백앤드에서 광고 시청 완료를 체크해서 추가적인 API 없이 바로 리워드를 줄 수 있다.

백앤드에서 광고 시청 완료를 체크하는게 더 정확할것 같다. 혹은 프론트에서 추가작업 없이 바로 광고시청 완료되면 리워드를 주고싶다면 콜백 url방식으로 바꾸는것이 좋다고 생각합니다.