내가 만드는 앱의 "사용자 흔적"을 자동화하기

"사용자 흔적"

이번에는 "사용자의 흔적"을 남겨서 프로그램에서 어떤 어려움들이 있는지 알아볼 수 있는 "로그"라는 기능을 자동화하려고 한다.

나는 주로 무료로 많은 양을 제공해 주는 Mixpanel을 사용하기 때문에 이에 맞는 코드를 만들 예정이다.

---

파일경로: /src/shared/mixpanel/index.ts

---

import {Mixpanel} from 'mixpanel-react-native';

import MixpanelEventProperties from './MixpanelEventProperties';

import MixpanelEvents from './MixpanelEvents';

const trackAutomaticEvents = false;

const mixpanel = new Mixpanel(

'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

trackAutomaticEvents,

);

mixpanel.init();

export const trackMixpanelEvent = async <T extends MixpanelEvents>(

eventName: T,

properties: MixpanelEventProperties [T],

) => {

console.debug(`trackMixpanelEvent/${eventName}`);

try {

mixpanel.track(eventName, properties);

mixpanel.flush();

} catch (error) {

console.log('ERROR');

}

};

export default mixpanel;

---

이어서 앱 내에서 사용할 이벤트와 그 속성들을 정의해 주는 파일을 추가한다.

---

파일경로: /src/shared/mixpanel/MixpanelEvents.ts

---

enum MixpanelEvents {

screen_view = 'screen_view',

...

}

export default MixpanelEvents;

---

파일경로: /src/shared/mixpanel/MixpanelEventProperties.ts

---

import MixpanelEvents from './MixpanelEvents';

type MixpanelEventProperties = {

[MixpanelEvents.screen_view]: {

screen: string;

};

...

};

export default MixpanelEventProperties;

---

이제 hbs 템플릿 파일들을 원하는 경로에 추가하고, 파일들을 생성해 보았다.

---

잘 생성되었다!

이제 사용자의 흔적을 기록하는 로그 파일들도 고민 없이 사용할 수 있겠지...