API KEY 설정하는 방법 - ssseok/wedding.invitation GitHub Wiki

총 API를 3개 사용합니다. (Naver, Kakao, Supabase)

최상위 루트에 .env를 만들어줍니다.

VITE_NAVER_MAP_CLIENT_ID= Naver MAP CLIENT ID 입력
VITE_SUPABASE_URL= Supabase URL 입력
VITE_SUPABASE_API_KEY= Supabase API KEY 입력
VITE_KAKAO_API_KEY = Kakao API KEY 입력
  • Naver => 지도
  • Supabase => 방명록
  • Kakao => 공유하기

Naver

https://www.ncloud.com/product/applicationService/maps 으로 로그인하여 이용신청에 들어가줍니다. (CLIENT ID)

  • 하고 싶은 애플리케이션 이름을 설정하고 서비스 환경 등록에 로컬에서 작업할 url, 배포한 url을 넣어줍니다.

Kakao

https://developers.kakao.com/ 으로 로그인하시고 내 애플리케이션에 들어가줍니다. (API KEY) https://developers.kakao.com/docs/latest/ko/javascript/download (SDK) https://developers.kakao.com/docs/latest/ko/javascript/getting-started (SDK)

  • JavaScript 키를 넣어줍니다.
  • SDK도 필요하기에 문서로 들어가서 JavaScript 다운로드에 들어가서 버전에 맞게 코드를 복사합니다.
  • 최상위 루트 index.html에 복사한 script를 넣어줍니다.
  • SDK 설정

Supabase

https://supabase.com/dashboard/projects 들어가서 New project를 눌러줍니다.(URL, API KEY)

  • 테이블을 만들어줍니다. 기본적으로 우리가 만들어야할게 ID, 이름, 패스워드, 코멘트, 날짜 입니다.
  • id bigint generated by default as identity primary key
    • id: 이 컬럼은 각 방명록 항목의 고유 식별자입니다.
    • bigint: 이 데이터 타입은 8바이트 정수를 저장할 수 있습니다. 매우 큰 숫자를 다룰 수 있습니다.
    • generated by default as identity: 이 옵션은 이 컬럼이 자동으로 증가하는 값을 가질 수 있도록 설정합니다. 새로운 행이 삽입될 때마다 자동으로 고유한 값을 생성합니다. (예시: 1, 2, 3, 4, 5)
    • primary key: 이 컬럼은 테이블의 기본 키로 설정됩니다. 기본 키는 각 행을 고유하게 식별하는 데 사용됩니다.
  • name text default '익명’
    • name: 방명록 작성자의 이름을 저장하는 컬럼입니다.
    • text: 이 데이터 타입은 가변 길이의 문자열을 저장할 수 있습니다.
    • default '익명': 이 옵션은 사용자가 이름을 입력하지 않을 경우 기본값으로 '익명'을 설정합니다.
  • password text not null
    • password: 방명록 항목을 삭제할 때 사용할 비밀번호를 저장하는 컬럼입니다.
    • text: 비밀번호를 가변 길이의 문자열로 저장합니다.
    • not null: 이 옵션은 이 컬럼이 NULL 값을 가질 수 없음을 의미합니다. 즉, 비밀번호는 반드시 입력해야 합니다.
  • comment text not null
    • password 와 비슷
  • created_at timestamp with time zone default timezone('utc'::text, now()) not null
    • created_at: 방명록 항목이 생성된 날짜와 시간을 저장하는 컬럼입니다.
    • timestamp with time zone: 이 데이터 타입은 날짜와 시간 정보를 저장하며, 타임존 정보를 포함합니다.
    • default timezone('utc'::text, now()): 이 옵션은 기본값으로 현재 UTC 시간을 설정합니다. now() 함수는 현재 시간을 반환하며, timezone('utc', now())는 이를 UTC로 변환합니다.
    • not null: 이 옵션은 이 컬럼이 NULL 값을 가질 수 없음을 의미합니다. 즉, 생성 시간은 반드시 기록되어야 합니다.

run 버튼을 누르면 guestbook 테이블이 생성된다.

  • 실시간 업데이트 처리하기 위해서는 사진과 같이 켜주셔야한다.