코딩하는라민

[Vite] tsconfig.json 외에 tsconfig.app.json, tsconfig.node.json 파일이 생성되는 이유  Vite 프로젝트 생성 시  `tsconfig.json` 파일 외에도 `tsconfig.node.json` 과  `tsconfig.app.json` 파일이 생성된다.이번 포스팅에서는 왜 세 개의 파일이 생성되며, 각각의 역할은 무엇인지 그리고 서로 어떤 관계가 있는지 알아보도록 할 것이다. 각 파일의 역할📄 tsconfig.json`tsconfig.json` 파일은 공통적인 설정을 정의하는 파일이다. 주로 빌드 설정, 전역 옵션, 참조 파일 목록 등을 포함한다. 📄tsconfig.app.json`tsconfig.app.json` 는 주로 브라우저와 관련된 옵션을 포함한..

[Supabase] 사용자의 계정 소유 확인 및 로그인 성공 여부 파악은 어떻게 이루어지는가? 개인 프로젝트에서 Supabase 를 이용해 로그인/회원가입 기능을 구현했었다. 이와 관련된 질문을 받았을 때"Supabase 에서는 로그인 시 사용자가 해당 계정의 주인임을 어떻게 확인하며, 로그인이 성공했음을 어떻게 확인하는 가"라는 질문을 받았다. 당시에는 이 부분에 대해 잘 모르겠다고 대답했지만, 다시 생각해보니 내가 전혀 모르는 부분이 아니었다. 🥲그때 당시 소유 확인은 모른다고 대답했고 로그인 성공 시에 Supabase 에서 반환하는 값들에서 uuid 를 통해 사용자를 구분하여 사용한다고 대답했었다. 질문자의 의도를 파악하지 못한 대답이었던 것이다. 그래서 본 포스팅에서는 Supabase의 Auth..

[빅분기/비전공자] 24년 8회차 빅데이터 분석기사 합격 후기 🎉 정보처리기사 합격 후 또 다른 IT 자격증인 빅데이터 분석기사 자격증에 도전했다.정보처리기사보다 합격을 간절히 바란 건 아니었지만, 이것으로 기사 자격증 2개 취득에 성공해서 기분이 좋아졌다.😋  📌 실기 합격!6월 22일에 치러진 빅분기 실기 시험!높은 점수로 합격한 것은 아니지만(턱걸이) 그래도 합격은 합격이니 뿌듯하다.마지막에 시간이 많이 남아서 점검을 많이 했지만 어이없게 1과목에서 실수하는 바람에 70점밖에 못 맞아 버렸다.😭빅데이터 자격증은 정말 문제 해석이 중요한 것 같다.  물론 이번에는 지난 회차보다는 문제가 해석하기 용이하게 나왔지만..시험장에서 바로 옆에 다른 수험생이 붙어있어서 신경이 많이 쓰였는지.. 긴장하고..

[React, Supabase] 사용자별 데이터 접근 및 제어하기 (RLS Policy)  가계부 캘린더를 예를 들어보자.사용자는 캘린더에 가계부 내역을 등록하고, 본인의 내역만 조회, 수정, 삭제가 가능해야 한다. 서비스에 여러 사용자가 있다면 각 사용자가 동시에 Ledger 테이블에 접근하게 된다. 이 경우 게시판과 같이 공개된 데이터가 아닌 이상 자신의 데이터만 접근할 수 있어야 한다.이를 위해 Supabase 에서 RLS 정책을 지원한다.  RLS(Row-Level Security) 정책이란?`RLS` 는 데이터베이스의 보안 기능 중의 하나이다.각 사용자가 자신의 데이터(row)만 접근할 수 있도록 제한하는 정책이다.예를 들면, user1 이라는 사용자는 user_name 의 user1 데이터 행..

[React, Supabase] 이메일 회원가입 및 로그인 기능 구현 & 트리거 설정  Supabase 로 회원가입을 진행하면 회원가입을 한 유저의 정보는 기본적으로 Authentication 탭의 `Users` 테이블에 저장된다. Users 테이블에는 이메일과 패스워드, 사용자의 UUID 등이 저장되는데 우리는 이 외에도 회원 정보를 추가적으로 저장하고 관리해줘야 할 것이다. 예를 들면 이름, 닉네임, 프로필 이미지, 주소 등이 있을 것이다. 그러기 위해서는 별도로 테이블을 추가해줘야 한다. 또한, Users 테이블의 UUID 를 userinfo 테이블의 id 로 가져와야한다. 즉, 테이블과 테이블 사이에 `관계`를 만들어줘야 한다.그래야 추가적인 유저 정보를 회원가입과 동시에 추가해줄 수 있기 때문이..

IOS 웹뷰 화면 button (or a) 태그 텍스트 색상 파란색으로 나오는 문제 해결  window 환경에서 프로젝트를 진행하다보니 ios 웹뷰에서 어떻게 보이는지 신경쓰지 않았었다.프로젝트가 어느 정도 기본 기능이 완성되고, vercel 을 통해 배포를 진행했다. 배포하면서 아이폰 or 아이패드로 확인하는 과정에서 특정 텍스트 색상이 파란색으로 보였다.프로젝트를 하면서 발견할 수 없었던 문제였는데 배포하면서 뒤늦게 문제를 발견했고 구글링을 통해 문제를 해결했다. 발견한 이슈 위는 react 로 만든 캘린더 컴포넌트의 일부인데, 캘린더 헤더가 푸른색으로 보인다.프로젝트의 테마 색상 목록에도 없던 색상이었다. 문제가 발생한 부분window 환경으로 돌아와서 문제의 부분에 태그를 확인해보았다. 문제가 발..

[Supabase] JWTs(JSON Web Tokens) 공식문서 읽기  `JSON Web Tokens` 은 string 으로 표현되는 데이터 구조의 한 종류이다.보통 사용자에 대한 아이덴티티, 권한 정보를 포함한다.JWT 는 라이프타임에 대한 정보를 인코딩하고, 암호화된 키로 서명하여 변조에 강하게 만든다. Supabase 의 액세스 토큰은 JWTs 이다. `JWT`는 서비스로 모든 요청과 함께 전송되는데, 토큰을 확인하고 포함된 요청을 검사함으로써 리소스에 대한 액세스를 허용하거나 거부할 수 있다.RLS(Row Level Security) 정책은 JWTs 의 정보를 기반한다. JWT 인코딩 및 서명 JWT 는 아래와 같이 인코딩된다.{ "sub": "0002", "name": "Věra Hrab..

[책 리뷰] 빅데이터 분석기사 실기 with Python 8회차 빅데이터분석기사 필기 합격 후 데이터에듀 책으로 공부를 시작하게 되었습니다. 빅데이터분석기사 필기 공부할 당시 교재 때문에 방황했던 경험이 있었습니다. 처음 구매했던 교재가 너무 별로여서 밀리의 서재를 통해 다른 교재를 추가로 공부했었습니다. 모든 필기 교재가 비슷하게 오탈자가 너무 많다는 평에 실기는 이대로 괜찮을까 많이 고민했습니다. 자격증 취득을 위해 가입한 카페에서 사람들이 많이 보는 데이터에듀의 교재로 실기 공부를 시작하게 되었습니다. 교재로만 공부하는 것은 아니고, 강의도 병행하고 있습니다. 귀로는 강의를 들은 후 내용을 눈으로 한번 더 확인하고, 더 꼼꼼하게 정리된 내용을 통해 빈틈을 채우고자 합니다. 저자와 책의 구성 저자저자..

Vite import.meta TS Error : ImportMeta 형식에 env 속성이 없습니다.  supabase 의 KEY 를 사용하던 중 env 타입 에러가 발생했다.ImportMeta 형식에 env 속성이 없다는 에러였다.찾아보니 이 문제를 해결하는 다양한 방법이 있었다. 하지만 내 프로젝트에서의 문제는 단순한 파일 경로 문제였다.  다양한 해결 방법들vite-env.d.ts`vite-env.d.ts` 파일에 ImportMeta 인터페이스를 정의한다./// interface ImportMetaEnv { readonly VITE_SUPABASE_KEY: string; readonly VITE_API_KEY: string;}interface ImportMeta { readonly env: I..

[React] 컴포넌트 최적화를 위한 React.memoReact.memo 란?`React.memo` 는 고차컴포넌트(HOC)로 컴포넌트 자체를 `메모이제이션`한다.컴포넌트의 props 가 바뀌지 않은 경우, 리렌더링을 방지해 컴포넌트의 성능을 향상시킬 수 있다. 컴포넌트의 props 가 변한다면 다시 리렌더링된다. 사용방법사용 방법은 간단하다. 리렌더링을 막고자 하는 컴포넌트를 `memo` 로 감싸주면 된다.props 가 없는 컴포넌트도 사용이 가능하다.import { memo } from 'react'function MyComponent(props) { return ( {props.title} {props.content} )}export default memo(My..