💡 auth.usersSupabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, auth.users에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다. 📍 커스텀 유저 테이블 (직접 만든 유저 테이블)supabase에 기본으로 존재하는 `auth.users`테이블에 데이터가 추가될 때 직접 생성한 회원 테이블(이하 `public.userInfo`)의 정보도 같이 추가할 수 있다. 굳이 또 다른 사용자 테이블을 생성하는 이유는 사용자의 추가적인 데이터를 관리하기 위함이다. 예를 들어 `auth.users` 에서 기본적..
💡 auth.usersSupabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, auth.users에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다. [Supabase & React 회원가입 구현 #1]📍 로그인/* 기타 코드 생략 */const signinFunction = async (email, password) => { const { data, error } = await supabase.auth.signInWithPassword({ email: "example@email.com", passwo..
💡 auth.usersSupabase로 회원가입을 할 때 일반 테이블에 데이터를 바로 저장하지 않고, `auth.users`에 저장을 할 수가 있다. 회원 정보에 대한 보안 처리가 되어있는 테이블이다. 기본적으로 email, password, phone... 등의 정보를 저장할 수 있으며 password 컬럼은 보안처리가 기본으로 되어있다. 📍 회원가입방법은 매우 간단하다. 아래 함수만 실행 하면 가입이 완료 된다.const signupFunction = async () => { const { user, session, error } = await supabase.auth.signUp({ email: "example@email.com", password: "example-password"..
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` 를 사용했는데 별 기능..
💡 Custom Hook커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. 보통은 `use어쩌구.js` 같은 js파일을 생성하고 그 안에 필요한 로직같은걸 작성한 다음 컴포넌트에서 필요한 데이터만 반환해주는 식이다. 📍 왜 씀?여러 컴포넌트에서 같은 데이터, 같은 로직이 필요할 때 쓴다. 하나의 파일에서 정의만 해두면 여러 컴포넌트에서 재사용할 수 있다. 그리고 코드가 깔끔해진다(라는 느낌을 받을 수 있다.) 왜 깔끔해지는 느낌을 받냐면 분리해둔 `use어쩌구.js`파일은 한 번 정의해두면 다시 열어 볼 일이 별로 없다. 다시 말해 눈에 안보인다는 뜻이다. 눈에만 안보이면 어쨋든 깔끔해 보일 수 있다. 약간 서랍같은 친구인데 서랍이 닫혀있으면 안의 상태가 어찌 되었건 편안하지 않..
tailwind.conifng.js에서 추가적인 클래스를 정의할 때 꼭 `theme.extend` 안에 정의해야 한다. 그렇지 않으면 기존 tailwind 클래스들이 `덮어쓰기` 된다. 🚨 예시 theme: { colors: { 'main-color': '#48CFCB', 'sub-color': '#229799', 'light-color': '#F5F5F5', /* 생략 */만약 위의 코드처럼 작성했다면 색상과 관련된 tailwind 클래스는 위에서 커스텀한 3가지를 제외하고는 사용할 수 없다. 즉, 기존의 `colors` 를 덮어쓰게 되는 것이다. 하지만 `extend` 를 사용하게 되면 기존의 속성들은 그대로 두고 확장 하는 개념으로 사용할 수 잇다.
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 사진이 잘 안보여서 버튼이 잘 안보일 수도 있는데 사진 아래 빨간색으로 보이는게 버튼이다. 이번 프로젝트에서 버튼 종류라고 해봐야 검은색, 빨간색 2종류가 있다. 근데 고작 2개의 조건처리를 하는데도 묘한 불편함을 느꼈다(가독성이 특히). 그러다 찾은게 styled-components의 {css} 라이브러리인데 내가 느끼던 불편함을 딱 알맞게 해소해줄 수 있는 녀석이었다. 💡 기존 styled-components의 조건 처리일단 기존의 `styled-components` 로 조건에 따른 스타일을 변화하려면 다음과 같이 작성해야한다. `styled` 내부에서 삼항연산자를 사용..
styled-components로 조건에 맞게 스타일링을 하면 개인적으로 가독성이 많이 떨어진다고 생각한다. 항상 불편함을 느꼈지만 모른채하고 그냥 쓰고 있었는데 어쩌다보니 알게된 {css} 라이브러리를 써보고 마음이 편안해져버렸다.. 💡 일단 코드부터 바로import styled, { css } from 'styled-components';const COLORS = { warn: css` background-color: red; color: white; `, default: css` background-color: black; color: white; `,};const StBtn = styled.button` ${(props) => props.colorStyle} b..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다. 💡 prop drilling컴포넌트의 위계가 깊어짐에 따라 props가 불필요하게 많아지는걸 의미한다. 대충 하위 컴포넌트가 생겨남에 따라 어쩔 수없이 props를 전달'만'하는 컴포넌트가 많아지는 경우를 생각하면 편하다. 이번에 진행한 과제에서 context나 redux를 사용하지 않고 구현을 했더니 간단한 프로젝트임에도 꽤나 거슬릴정도로 props를 계속 전달해주어야 했다. 나는 위의 사진으로 보이는 UI를 다음 컴포넌트들과 같이 구성했다.`Dashboard` : 상단에 나만의 포켓몬과 추가한 포켓몬 카드들이 있는 컴포넌트`PokemonList` : 하단에 전체 포켓몬 목록이..
간단한 과제 소개포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 포켓몬 상세 정보를 확인할 수 있다.페이지 레이아웃은 대충 저렇게 생겼다. 하단 포켓몬 카드의 `추가` 버튼을 누르면 상단 대시보드(나만의 포켓몬)영역에 추가된 포켓몬 카드가 나타난다. 대시보드 카드의 개수를 최대 6개로 정했다. 그럼 추가되지 않은 영역에는 포켓볼 사진을 보여주고 추가된 영역에는 포켓몬 카드를 보여주고 싶다. 여러가지 방법이 있겠으나 `fill()` 메서드를 이용해서 구현했다. 💡 동적으로 UI 출력하기6개의 고정된 자리가 있다. 추가된 포켓몬은 카드형식으로 보여주고 남는 자리에는 포켓볼 사진을 채워야한다. 📍 사용된 컴포넌트와 상태값 (fill 사용 관련)`selectedPokemon`추가된 ..