본문 바로가기
반응형

전체 글

 (118)
TanStack Query 알아보기 1 (기본 사용법) TanStack Query 📖서버 상태를 관리하기 위한 라이브러리로 서버 상태를 페칭, 캐싱, 동기화, 업데이트하는 작업을 아주 쉽게 해 줍니다.주요 기능`데이터 캐싱`: 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상합니다.`자동 리페칭`: 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지합니다.`쿼리 무효화`: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있습니다. 사용 방법 📖설치yarn add @tanstack/react-query 적용할 범위에 Provider를 이용해 적용합니다.// main.jsximport ReactDOM from "react-dom/client";import App from "./App.jsx";import "./ind..
axios 알아보기 axios 📖axios란 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트입니다. 설치yarn 사용하기yarn add axios 요청 방법 📖GET`get`은 데이터를 조회할 때 사용합니다.axios.get(url[, config])const { data } = await axios.get("http://localhost:4000/todos"); url은 요청에 사용될 서버 url입니다. config는 여러 가지 옵션을 넣을 수 있습니다.  요청 Config | Axios Docs요청 Config 다음은 요청을 만드는 데 사용할 수 있는 config 옵션들 입니다. 오직 url만 필수입니다. method를 지정하지 않으면 GET방식이 기본값 입니다. { url: '/user', ..
[팀 프로젝트] 방콕 스타일 회고 Keep (현재 만족하는 부분) 😁새로운 시도기능 구현을 다 했더라도 어떻게 하면 더 좋은 코드가 될 수 있을까 고민하고 시도를 해보면서 발전하려고 하는 모습이 좋았습니다! 서로의 장점서로의 코드를 보면서 잘 작성한 코드는 보고 배울 수 있다는 점에서 좋았습니다! 의견 공유PR과정에서 서로의 의견을 공유하고 개선점이 있다면 반영해 좋은 PR을 작성하려고 노력했습니다! Problem (불편하게 느꼈던 부분) 😥마이크 음량마이크 음량이 작아서 소통하는 데 다소 어려웠던 부분이 살짝 아쉬웠습니다. 소극적질문, 의견 제시 과정에서 다소 소극적이었던 부분이 살짝 아쉬웠습니다.  Try (해결책, 실행 가능한 것) 😊질문을 두려워하지 않기이해를 못 했을 때 주저하지 말고 적극적으로 질문하기!  회고 🧐다음 ..
[팀 프로젝트] 방콕 스타일 팀 프로젝트 소개 📖방콕 스타일방콕 스타일은 재택근무, 원격 수업 등 집에서 나가지 않고도 스타일리시한 OOTD를 완성할 수 있는 패션 뉴스피드 서비스입니다. 배포 링크 : https://bangkok-style.vercel.app/깃허브 링크 : https://github.com/smu06030/bangkok-style파일 구조 🗂️📦src┣ 📂assets┃ ┣ 📂fonts┃ ┗ 📂images┣ 📂components┃ ┣ 📂Layout┃ ┣ 📂MyPage┃ ┗ 📂UI┣ 📂constant┣ 📂Context┣ 📂hooks┣ 📂modules┣ 📂pages┃ ┣ 📂private┃ ┣ 📂public┣ 📂routes┣ 📂services┣ 📂styles┣ 📂utils┣ 📜Ap..
[트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다.발생한 오류 🔥방콕 스타일 뉴스피드 프로젝트에서 게시물 목록을 렌더링 하던 중 페이지를 새로고침했을 때, `좋아요`가 랜덤으로 활성화된 상태로 표시되는 오류가 발생했습니다. 좋아요가 랜덤으로 표시되는 건 아주 큰 문제였기 때문에 해결이 시급했습니다.  해결 과정 🔎useOnAuthStateChange supabase에서 auth 관련 event가 발생할 때마다 알림을 받는 메서드입니다. 그래서 session이 있으면 컨텍스트에 `session.user`정보를 보내서 컨텍스트에서 유저 정보를 저장하게 됩니다.// 유저정보를 context에 저장하는 함수const useOnAuthStateChange = () => { const { signI..
[트러블 슈팅] 방콕 스타일 (supabase RLS 오류) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다. Supabase RLS(행 수준 보안) 상태 업데이트 오류발생한 오류 🔥supabase를 사용하면서 좋아요 테이블 상태 업데이트를 시도할 때 결과가 반영되지 않고 빈 배열만 반환하는 오류가 발생했습니다. 해결 과정 🔎RLS에 대해 인지하지 못하고 있을 때 요청을 보내는 쿼리문이 잘못됐나 여러 번 확인을 거치고 칼럼명과 쿼리문을 확인해 봤는데 아무런 문제가 없었습니다. 그래서 오류를 발견하기까지 오랜시간이 걸렸습니다. 그러다가 빈 배열을 반환하는 이유가 RLS 정책에 관련된 걸 알게 되었고 확인을 진행했습니다. 정책 확인 우선, RLS 정책이 올바르게 설정되었는지 점검했는데 설정이 안되어 있는 것을 확인했습니다. 그래서 해당 정책을 다시 한..
[팀 프로젝트] 방콕스타일 - 검색 기능 구현 (Debounce) Debounce란? 📖 연속적으로 발생한 이벤트를 하나로 처리하는 방식입니다. 마지막으로 실행된 함수만을 실행합니다. 예를 들어 input에 `hello`를 타이핑하려고 할 때 콘솔을 출력해 보면hhehelhellhello이렇게 한 글자씩 출력이 되는 걸 확인할 수 있습니다. 반면, Debounce delay시간을 1초로 설정할 경우 1초 동안 기다렸다가 화면에 반영하기 때문에 여러 번 출력되지 않습니다.hello 프로젝트 적용 📖useDebounce 커스텀 훅 사용import React, { useEffect, useState } from "react";const useDebounce = (value, delay = 200) => { const [debounceValue, setDebounceVa..
[팀 프로젝트] 방콕스타일 - 좋아요 기능 구현 좋아요 기능 구현 이유 ✨사용자 참여 유도`좋아요` 버튼을 통해 간단한 클릭만으로 콘텐츠에 대한 피드백을 제공할 수 있고 댓글 작성보다 간편해 사용자들이 자주 상호작용할 수 있게 만들기 위해 구현을 하기로 결정했습니다. 구현 📖 `getAllData`메서드를 비동기로 실행해 게시물 데이터를 가져옵니다.const response = await getAllData()  `supabase`에서 데이터를 가져올 때 posts 테이블과 likes 테이블을 조인해 사용자가 좋아요를 누른 게시물에 대한 정보를 함께 가져와 반환합니다.const getAllData = async () => { try{ // 전체 게시글 데이터 가져오기 const response = await supabase .f..

티스토리툴바