FAY STORY

👩🏻‍💻 프론트엔드 개발을 공부중입니다 🔥

• 

  Supabase [supabase] supabase에서 관계 테이블 가져오기 (과정을 기록해보자!) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다.    이 글은 supabase를 사용하여 관계 테이블을 가져오기까지의 과정을 정리하였습니다.결론만 궁금하시다면, 글 가장 하단에 있습니다 😊  supabase에서 관계 테이블을 가져오기까지 과정서버에서 데이터를 가져올 때 관계된 테이블에서 데이터를 함께 가져와야 하는 경우가 몇차례 있었다.프로필을 예로 들자면, 아래와 같은 항목 중 참여한 프로젝트의 항목은 project 테이블에서 해당 유저의 프로젝트를 가지고 오는 방식으로 하고 싶었다. 관계를 형성해야 하는 것이었다. projects 테이블과 profiles 테이블 구성은 아래와 같았다.# projects 테이블 create table public.projec..

• 

  Supabase [supabase] supabase에서 유저 정보를 가져오는 방법 (getSession, getUser) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다.    스무디에서는 로그인한 사용자의 정보를 가져와야 하는 경우가 있었는데, supabase에서 유저 정보를 가져오기 위한 방법을 찾아보니 getSession과 getUser 두 가지 메서드가 있었다. 처음에는 getSession만 알고, getSession만 사용하다가 추후 getUser를 발견했는데 어디에 무엇을 사용해야 하는지, 어떤 점이 다른지 알고싶어 찾아본 내용을 정리하였다. supabase에서 유저 정보를 가져오는 방법💬 아래 getSession, getUser에 대한 설명은 공식문서의 번역본입니다. 1. getSession()🔗 https://supabase.com/docs/reference/java..

• 

  Supabase supabase auth와 나의 public 테이블 연동하기 (회원가입시 auth의 유저 정보를 public 테이블로 가져오는 방법) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다.     "스무디"는 firebase의 강력한 대체제라고 불리는 supabase를 사용하여 백엔드 코드를 작성할 필요 없이 serverless로 구현했다. supabase는 이번에 처음 사용해봤지만, 공식문서가 너무나 친절하게 잘 되어있어 어렵지 않고 빠르게 적용할 수 있었다. (firebase를 찍먹했을 때는 공식문서가 친절하다는 인상은 받지못했었던 것 같다.) 물론 대체적으로 어렵지 않았고, 필요하다 생각된 기능들은 거의 다 구현이 가능했지만 원하는 기능의 적용을 위해 헤맸던 부분도 꽤 있었다. 이번에는 그 중 하나였던 supabase auth와 나의 public 테이블을 연동하는 방법에 대해 기록해보겠다. 🔗 ..

• 

  CSS [Tailwind CSS] Tailwind CSS로 다양한 스타일 작성하기 (3d 애니메이션, bg gradient & image url, 반응형 디자인) ✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다.    "스무디"는 위 프로젝트 이름으로, 작년 여름 부트캠프 팀 프로젝트로 6명이 함께 작업한 사이드 프로젝트였다.이번에 여러가지 이유와 목적으로 개인 사이드 프로젝트로 처음부터 다시 작업을 했다. 기존 프로젝트에서는 CSS module을 사용해서 스타일을 작성했고, 이번 프로젝트에서는 Tailwind CSS를 적용하기로 했다. 기존에 이미 작성했던 CSS 코드도 있었기 때문에, Tailwind에 익숙해지기만 하면 빠르게 적용할 수 있을 줄 알았는데, 생각보다 이런저런 고비가 많았다. 예상보다 시간 또한 오래 걸렸다. 그 중 프로젝트 초창기 마주했던 문제들의 해결 과정을 정리해보려 한다.💅 Tailwind CSS로..

• 

  React 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차원 벡터 그래픽을 ..

• 

  CSS [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..

• 

  Input [원티드 프리온보딩 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 📚 노션에 정리한 스터디 노..

• 

  Input [원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 [원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 🗓️ 2024.02.05 ~ 2024.02.18 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻‍💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • SPA의 원리를 배우고, 사용자 경험을 향상시키는 방법을 탐구합니다. • SSR과 CSR의 차이를 이해하고, 각각의 장단점을 비교합니다. • 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. • 브라우저가 아닌 데스크톱 환경에서 사용되는 애플리케이션을 구현하는 방법을 알아봅시다. 📚 노션에 정리한 스터디 노트 이번 스터디 노트는 비공개합니다. 🫢 제 방식으로 좀 더 정리된다면 공개하겠습니다! ► 챌린지 전, 🔥 목표 ..

• 

  Input [원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 [원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 🗓️ 2024.01.02 ~ 2024.01.15 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻‍💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 전역변수를 설정하는 기준과 방법 • 테스트코드를 활용한 효율적인 리팩토링 • 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 • 실전 리팩토링 📚 노션에 정리한 스터디 노트 1️⃣ 전역변수를 설정하는 기준과 방법 2️⃣ 테스트코드를 활용한 효율적인 리팩토링 3️⃣ 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 4️⃣ 실전 리팩토링 ► 챌린지 전, 🔥 목표 및 다짐 현재 취..

• 

  Output [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (3) [Mini Project] Note-App 👩🏻‍💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) 현재글 : Note-App 구현 과정 정리 (3) 📖 목차 1. 외부 타입정의 파일 만들기 2. 노트 삭제시 비동기 코드 작성하기 (async / await) 3. 반복되던 handleCreateNote 커스텀 훅으로 만들기 4. TypeScript의 Date 타입 5. vercel 배포..

• 

  Output [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (2) [Mini Project] Note-App 👩🏻‍💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) 현재글 : Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. lexical text editor 사용하기 2. 헷갈렸던 부분 1, props type 정의 방법 3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null 4. 생각보다 어려웠던 ..

• 

  Output [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (1) [Mini Project] Note-App 👩🏻‍💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 현재글 : Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. 기술 스택의 선택 (TypeScript, Styled-components를 사용한 이유) 2. 레이아웃 고민하기 3. Vite로 React + TypeScript 조합으로 프로젝트를 생성 후,main.tsx 파일의 docum..