이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
안녕하세요, WebView 기반 미니앱을 개발 중인데 로그인 관련 성능 문제로 문의드립니다.
현재 구조:
@apps-in-toss/web-framework 사용, npx ait build로 번들 빌드
로그인 시 자체 JWT 발급, SDK Storage에 저장
매 요청 시 SDK Storage에서 JWT를 읽어 Authorization 헤더로 전송
문제:
실제 토스앱에서 카드 클릭 시마다 약 2초의 딜레이가 발생합니다. 원인을 분석해보니 SDK Storage 읽기가 느려서 waitForReady() 패턴으로 기다리는 동안 딜레이가 생기는 것으로 파악됩니다.
시도한 해결책:
httpOnly 쿠키 방식을 적용하고 싶습니다. 서버에서 Set-Cookie: httpOnly로 발행하면 SDK Storage 없이도 인증이 가능할 것 같은데, ait 번들 WebView는 로컬 패키징된 파일을 로드하기 때문에 API 서버(https://저희도메인.vercel.app)와 크로스오리진이 되어 쿠키가 전달되지 않습니다.
문의 사항:
- ait 번들에서 WebView가 로컬 파일이 아닌 원격 URL을 직접 로드하도록 설정하는 방법이 있나요?
- 없다면 WebView 미니앱에서 httpOnly 쿠키를 사용할 수 있는 다른 방법이 있나요?
- 혹시 WebView 미니앱에서 매 요청마다 인증을 빠르게 처리하는 권장 방법이 있다면 알려주시면 감사하겠습니다.
감사합니다.
저는 앱 내 토스 로그인은 토스 SDK를 이용하여 appLogin을 실행시키고, 전달 받은 authorizationCode 를 이용하여 API에게 전달 후 로그인 및 DB처리 → 로그인 완료 형태로 진행하는데 있어 무리가 없었습니다.
추가로 토스 미니앱에서는 외부 로그인이 안되는 것으로 나와있습니다.
서비스 오픈 정책 | 로그인
어떤 사용을 위해 자체 JWT를 사용하고 계신가요?
자체 서버 API(/api/auth/me 등) 호출 시 인증/인가 용도로 사용하고 있습니다.
로그인 후 발급한 JWT를 SDK Storage에 저장하고, 이후 API 요청 시 Authorization 헤더에 담아 전송하는 방식입니다.
근데 문제는 카드 클릭 시마다 SDK Storage에서 토큰을 읽으려 하는데 매번 null이 반환되어, 결과적으로 매 클릭마다 appLogin()이 호출되고 300~1300ms의 딜레이가 발생하고 있습니다…
300 ~ 1300ms 는 문제가 있어 보이는군요..
저 또한 환경은 다르지만 React Native 환경에서 import { Storage } from "@apps-in-toss/framework"; 형태로 import 받아 useCallback 을 통해 await Storage.getItem(key); 하여 전달받고 있습니다.
const setObject = useCallback(async <T>(key: string, value: T): Promise<void> => {
try {
await Storage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error(`[Storage] setObject failed for key "${key}":`, error);
throw error;
}
}, []);
const getString = useCallback(async (key: string, fallback = undefined): Promise<string | undefined> => {
try {
const raw = await Storage.getItem(key);
return raw ?? fallback;
} catch (error) {
console.error(`[Storage] getString failed for key "${key}":`, error);
return fallback;
}
}, []);
위처럼 Hooks를 만들어서 사용하고 있는데, Storage 사용 방식 한번 확인 부탁드립니다.
로그인 후 → 카드 클릭 형태라면, 로그인 후 전환된 화면에서 해당 JWT가 Storage SDK로 저장이 되었는지 콘솔 메시지로 확인해 보시고, 만약 확인이 안된다면 저장 관련 부분을 확인해 보시는 게 좋을 것 같습니다.
만약 확인된다면 카드를 누르기 전과 로그인 후 어떤 변화가 있는지 알아야 정확한 원인 파악이 될 것 같습니다.
스토리지에서 토큰을 읽어올 때 메모리에 올려두고, 다음 요청부터는 메모리에 있는 값을 사용하면 해결되지 않을까요? 매번 Storage에서 읽어오지 않는 방법이 있을 것 같습니다.