1. 패키지 설치yarn add @supabase/supabase-js 2. supabaseClient.js 생성import { createClient } from "@supabase/supabase-js";const SUPABASE_PROJECT_URL = "SUPABASE_PROJECT_URL";const SUPABASE_ANON_KEY = "SUPABASE_API_KEY";const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);export default supabase;`url`과 `key`를 `createClient`에 주입반환 받은 `supabase` export다른 곳에서 import해서 사용🚨 주의url, key는 절..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.상세페이지에서 뒤로가기가 무한 증식되는 걸 변경했다. 위에 보이는 사진에서 사진을 누르면 포켓몬 상세페이지로 이동한다. 상세페이지는 이렇게 생겼다. (css 아직 하기 전인데 사진 올리기 창피하네요)사진에서 보이는 이전, 다음 포켓몬 버튼을 누르면 다음 넘버를 가진 포켓몬의 상세페이지로 이동된다. 기존 구현은 `Router` 를 사용해서 `/Detail/:id`와 같은 경로로 이동하도록 구현했다. 이렇게 구현하니 포켓몬 몇 개 구경하면 상세페이지에서 갇혀버린다... 따라서 너무 귀찮았지만 `Router` 설정부터 `navigate` 등등...정말 귀찮았지만 변경하기로 큰 결심을 했다..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.이번 리팩토링은 컴포넌트에서 작업할때 훅 관련 로직이 자꾸 눈에 밟혀 훅 전용 수납장으로 치우기로 했다. 새로 만든 커스텀 훅을 어딘가에서 재사용될까 싶긴 하지만 그냥 해봤다는 것에 의미를 두기로 했다. 커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. . . (블로그 홍보하기) 그래서 무슨 훅을 만들었냐면 저기 위에 포켓볼 사진 있는 곳이 대시보드 영역인데 `overflow-scroll` 속성을 줘서 안보이는 부분까지 가로로 요소들이 꽉 들어가 있다. 그리고 마우스 휠로 가로 스크롤을 구현하고자 `useRef` , `useEffect` 를 사용했는데 별 기능..