Frontend Dev (147) 썸네일형 리스트형 [supabase] supabase에서 관계 테이블 가져오기 (과정을 기록해보자!) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다. 이 글은 supabase를 사용하여 관계 테이블을 가져오기까지의 과정을 정리하였습니다.결론만 궁금하시다면, 글 가장 하단에 있습니다 😊 supabase에서 관계 테이블을 가져오기까지 과정서버에서 데이터를 가져올 때 관계된 테이블에서 데이터를 함께 가져와야 하는 경우가 몇차례 있었다.프로필을 예로 들자면, 아래와 같은 항목 중 참여한 프로젝트의 항목은 project 테이블에서 해당 유저의 프로젝트를 가지고 오는 방식으로 하고 싶었다. 관계를 형성해야 하는 것이었다. projects 테이블과 profiles 테이블 구성은 아래와 같았다.# projects 테이블 create table public.projec.. [supabase] supabase에서 유저 정보를 가져오는 방법 (getSession, getUser) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다. 스무디에서는 로그인한 사용자의 정보를 가져와야 하는 경우가 있었는데, supabase에서 유저 정보를 가져오기 위한 방법을 찾아보니 getSession과 getUser 두 가지 메서드가 있었다. 처음에는 getSession만 알고, getSession만 사용하다가 추후 getUser를 발견했는데 어디에 무엇을 사용해야 하는지, 어떤 점이 다른지 알고싶어 찾아본 내용을 정리하였다. supabase에서 유저 정보를 가져오는 방법💬 아래 getSession, getUser에 대한 설명은 공식문서의 번역본입니다. 1. getSession()🔗 https://supabase.com/docs/reference/java.. supabase auth와 나의 public 테이블 연동하기 (회원가입시 auth의 유저 정보를 public 테이블로 가져오는 방법) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다. "스무디"는 firebase의 강력한 대체제라고 불리는 supabase를 사용하여 백엔드 코드를 작성할 필요 없이 serverless로 구현했다. supabase는 이번에 처음 사용해봤지만, 공식문서가 너무나 친절하게 잘 되어있어 어렵지 않고 빠르게 적용할 수 있었다. (firebase를 찍먹했을 때는 공식문서가 친절하다는 인상은 받지못했었던 것 같다.) 물론 대체적으로 어렵지 않았고, 필요하다 생각된 기능들은 거의 다 구현이 가능했지만 원하는 기능의 적용을 위해 헤맸던 부분도 꽤 있었다. 이번에는 그 중 하나였던 supabase auth와 나의 public 테이블을 연동하는 방법에 대해 기록해보겠다. 🔗 .. [Tailwind CSS] Tailwind CSS로 다양한 스타일 작성하기 (3d 애니메이션, bg gradient & image url, 반응형 디자인) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다. "스무디"는 위 프로젝트 이름으로, 작년 여름 부트캠프 팀 프로젝트로 6명이 함께 작업한 사이드 프로젝트였다.이번에 여러가지 이유와 목적으로 개인 사이드 프로젝트로 처음부터 다시 작업을 했다. 기존 프로젝트에서는 CSS module을 사용해서 스타일을 작성했고, 이번 프로젝트에서는 Tailwind CSS를 적용하기로 했다. 기존에 이미 작성했던 CSS 코드도 있었기 때문에, Tailwind에 익숙해지기만 하면 빠르게 적용할 수 있을 줄 알았는데, 생각보다 이런저런 고비가 많았다. 예상보다 시간 또한 오래 걸렸다. 그 중 프로젝트 초창기 마주했던 문제들의 해결 과정을 정리해보려 한다.💅 Tailwind CSS로.. React에서 SVG 컴포넌트로 불러오기 (Vite + TS 환경에서 SVG 파일 가져오기 feat. vite-plugin-svgr) ✏️ 사이드 프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다. 팀 프로젝트와 개인 프로젝트를 하며 SVG를 사용할 일이 있었는데, SVG 파일의 장점을 살려 활용하기 위해 컴포넌트로 불러와 사용하고자 하였다.그 과정을 정리해보았다. 🔖 목차1. SVG (Scalable Vector Graphics) 가 무엇인가요?2. SVG 이미지를 사용하는 방법 2가지 ① img 태그의 src에 직접 넣어 사용하기 ② SVG 파일을 컴포넌트로 불러와 사용하기 ⭐ Vite + TypeScript 환경에서 SVG를 컴포넌트로 불러오는 방법3. React에서 컴포넌트로 불러온 SVG 활용하기 1. SVG (Scalable Vector Graphics) 가 무엇인가요?SVG는 2차원 벡터 그래픽을 .. [Tailwind CSS] Tailwind CSS의 지시어, @tailwind @layer @apply에 대해 이해해보자 ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 배운 점을 정리하여 기록한 글입니다. 개인 프로젝트에서 Tailwind CSS를 처음 사용해보았고, 신세계를 맛보았다.누군가는 선호하지 않는다했던 Tailwind. 나 또한 클래스명의 나열으로 지저분해지는 코드가 싫어 사용해보기도 전에 불호를 택했었다.하지만 생각을 바꾸어 사용해보니 생각보다 편리하고 빠른(물론 시간이 필요했다..) CSS 작성에 이것이 신세계구나 싶었다. 학습의 시간은 필요하지만, 배워두면 잘 사용할 Tailwind CSS.이번 글에서는 Tailwind CSS에서 사용되는 지시어, @tailwind @layer @apply에 대해 정리해보려 한다. https://tailwindcss.com/docs/functions-and-dire.. 비공개 임시글 보호되어 있는 글입니다. [원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술 [원티드 프리온보딩 FE 챌린지 3월] React 실전 가이드: 면접 및 실무 기술 🗓️ 2024.03.04 ~ 2024.03.17 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 1차 • web의 역사 (browser 렌더링, AJAX, DOM, Virtual DOM) • react 기본 기념 (render(), jsx, hooks) • 이력서 관련 팁 • 2차 redux-toolkit 상태관리 • 3차 현업 프로젝트에 적용하는 패턴 (project structure, error handling) • 4차 coding convention, 이력서 feedback 📚 노션에 정리한 스터디 노.. 이전 1 2 3 4 ··· 19 다음
