📖 (155) 썸네일형 리스트형 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 📚 노션에 정리한 스터디 노.. [원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 [원티드 프리온보딩 FE 챌린지 2월] 상황에 맞는 프론트엔드 개발 전략 이해하기 🗓️ 2024.02.05 ~ 2024.02.18 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • SPA의 원리를 배우고, 사용자 경험을 향상시키는 방법을 탐구합니다. • SSR과 CSR의 차이를 이해하고, 각각의 장단점을 비교합니다. • 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. • 브라우저가 아닌 데스크톱 환경에서 사용되는 애플리케이션을 구현하는 방법을 알아봅시다. 📚 노션에 정리한 스터디 노트 이번 스터디 노트는 비공개합니다. 🫢 제 방식으로 좀 더 정리된다면 공개하겠습니다! ► 챌린지 전, 🔥 목표 .. [원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 [원티드 프리온보딩 FE 챌린지 1월] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 🗓️ 2024.01.02 ~ 2024.01.15 원티드에서 진행하는 프리온보딩 FE 챌린지 수강 후 정리한 글입니다. 👩🏻💻 [STUDY NOTE] ⭐️ 코스 둘러보기 - 4번의 코스에서 다루어 볼 이야기 • 전역변수를 설정하는 기준과 방법 • 테스트코드를 활용한 효율적인 리팩토링 • 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 • 실전 리팩토링 📚 노션에 정리한 스터디 노트 1️⃣ 전역변수를 설정하는 기준과 방법 2️⃣ 테스트코드를 활용한 효율적인 리팩토링 3️⃣ 백엔드 코드를 수정할 수 없을때 프론트엔드가 할 수 있는 최적화방법 4️⃣ 실전 리팩토링 ► 챌린지 전, 🔥 목표 및 다짐 현재 취.. 이전 1 2 3 4 ··· 20 다음
