🍾 React + TS 환경에 Supabase 연결하기
스터디에서 추천을 받고 사용해 보자!! 냅다 도전해본 supabase
아직 리액트, 타입스크립트 환경에 익숙치 않고 영어... 의 장벽으로 연결하는 것부터 애를 먹었다 🤪
언젠가 또 연결할 ... 미래를 위해 기록해 둔다.
supabase 페이지
new project 생성
로그인을 하고 들어가면 dashboard(대시보드) 페이지로 이동
New project를 클릭 후 프로젝트를 생성한다.
알잘딱깔센으로 작성 후 Create new project !!
Table 생성
프로젝트 페이지로 들어가면 여러 가지 메뉴를 확인할 수 있다.
그중에서 Table editor로 들어가서 Table을 생성한다.
id, created_at 은 수정하지 않는다.
원하는 칼럼을 추가한다.
잘 보면 Type이나 Default Value 등도 있으므로 원하는 칼럼을 만들어보자!
성공적으로 생성했다면 이런 식으로 내가 만든 table을 확인할 수 있다.
나의 경우 folder 이름을 저장하는 테이블을 하나 만들었다.
API KEY, URL 확인하기
프로젝트 메뉴들 중 가장 밑에 setting 메뉴로 들어간다.
들어가면 이렇게 API, URL을 확인할 수 있다.
당연히 공개하지 않는다!!
연결할 때 사용해야 하므로 이 페이지를 확인(혹은 저장) 해두자.
React + TS 환경 (VSCode)
supabase 설치
npm i @supabase/supabase-js
프로젝트의 Root 디렉토리에 .env.local 파일 생성
프로젝트의 Root 디렉터리란?
React 프로젝트의 최상위 폴더를 일컫는다.
.env.local 파일을 생성한 이유는 이 파일 안에 바로 위에서 확인했던 API KEY, URL을 저장하기 위해서다.
이 두 값은 보안상의 이유로 공개되면 안되므로 .gitignore 파일에 .env.local 파일이 추가되어 있는지 확인한다.
.env.local 파일에는 이렇게 저장해 두자.
컴포넌트 파일에 연결하기
처음에는 interface를 사용하지 않아서 타입 오류가 생겼었다.
각 변수에 타입을 명시하고, interface를 사용하여 오류를 고쳤다.
다른 컴포넌트들은 무시하자...
fetch 와 실제로 데이터 값을 출력하는 부분! 을 확인하자.
나의 경우 .env.local 파일에서 설정한 이름과 다르게 사용해서 에러가 났었다 ㅠ_ㅠ..
도대체 어디야~!!~! 하고 고함지르다가 겨우 발견했다. 그러니까 주의주의주의 하자.
결과
이렇게 하면 놀랍게도!!
supabase에서 만든 table에 테스트용으로 넣어둔 데이터가 잘 출력되는 걸 확인할 수 있다!