230228 팀프로젝트 16

이셀·2023년 2월 28일
0

오늘은 앰플리튜드를 진행하려고 보내주신 강의와 노션을 보고 공부를 했다!
하지만 앰플리튜드를 사용할 경우 약 2~3시간 정도 의논해야하는데 사실 그런 시간이 없을 정도로 바빠서..ㅠㅠ 이번엔 그랍하게 되었다.
진짜 아쉽지만...ㅜㅜ 어쩔 수 없는 선택이었다ㅜ
하지만 앰플리튜드를 사용하기 위해서 쓴 환경변수(env) 설정은 많은 것들을 할 필요는 없었지만 꼭 필요했다고 생각한다.

쓰는 방식이 모두 다르다보니 react에서 사용하는 방식을 찾아 적용했고...! 앰플리튜드를 나중에 사용할 수 있으니까 적어보려고 한다.

환경변수 사용하기

root 파일에 .env 파일을 생성한다

| 여기서 중요한건 git에 쓰고 있는 api키를 보여주면 안되기 때문에 .gitignore에서 .env파일을 넣어서 안보이게 해준다

코드(앰플리튜드 사용)

import { init, track, setUserId, reset } from '@amplitude/analytics-browser';

const API_KEY = '사용중인 apikey';

export const initAmplitude = () => {
  init(API_KEY);
};

// eventProperties = 객체(버전, 페이지등의 정보)를 같이 보내줌
export const logEvent = (eventName, eventProperties) => {
  track(eventName, eventProperties);
};

// AmplitudeId = 디바이스 id
// 디바이스 id의 맹점을 보완하고자 userId 도입 = setUserId
export const setAmplitudeUserId = (userId) => {
  setUserId(userId);
};

// resetAmplitude = 디바이스 id, userId 모두 초기화
// 로그아웃에 넣기
export const resetAmplitude = () => {
  reset();
};

해당 키를 넣어서 응용하면 된다:)!

profile
프론트엔드 개발 과정을 기록 중입니다:)

0개의 댓글