💡 .env`.env` 파일은 환경 변수를 설정하기 위해 사용된다. 쉽게 말해 프로젝트 전역에서 참조할 수 있는 값들을 모아놓은 파일이라고 생각하면 된다. 여러가지 목적이 있겠지만 가장 큰 2가지 이유는 다음과 같다. 1. 민감한 데이터를 보관한다.작업자이외의 사람들은 `.env`의 값들을 확인할 수 없다. (`.gitignore`필수 설정) 2. 프로젝트 환경에 맞게 데이터 설정 가능개발환경, 로컬환경, 테스트, 배포.. 등의 환경마다 값을 다르게 사용할 수 있게 된다.예를 들어 개발 환경에서는 어떤 데이터들을 불러올 때 더미데이터를 불러오는 api를 사용하고, 배포할 때는 실제 데이터의 api를 사용한다고 가정. 원래라면 api 주소값을 할당한 모든 부분을 수정해야 하지만 `.env`를 잘 사용하..
회원가입할 때 Provider메뉴의 Email - Confirm email 이 활성화 되어 있으면 발생한다. 이게 켜져 있으면 회원가입할 때 실제 이메일로 인증 메일을 보내고, 수락을 해야 회원가입이 완료 된다. 좋아 보이지만 무료 요금제는 하루에 제한이 있으며(시간당 3건인가?) 초과된 경우 발생한다. 🚨 끄는 방법1. Authentication -> Providers메뉴 이동2. Email 선택3. Confirm email 끄기4. save
💡 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..