본문 바로가기
반응형

전체 글

 (115)
[팀 프로젝트] 방콕 스타일 팀 프로젝트 소개 📖방콕 스타일방콕 스타일은 재택근무, 원격 수업 등 집에서 나가지 않고도 스타일리시한 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..
[팀 프로젝트] 방콕스타일 - 더보기 기능 구현 더보기 기능 추가 이유 ✨사용자 경험 개선모든 게시물을 한 번에 보여주는 것으로 진행을 했었는데 한 화면에 많은 데이터를 보여주게 되면 사용자가 부담을 느낄 것 같다는 생각을 했습니다. 그래서 `더보기`버튼을 추가해 사용자가 원할 때 더 많은 게시물을 볼 수 있게 하여 가독성을 높였습니다. 구현 📖 화면에 보여주는 데이터보다 전체 데이터가 더 많으면 `더보기`버튼 활성화 하는 방식으로 구현했습니다.// 더보기 클릭 const handleLoadMore = () => { const postDisplay = debounceValue ? filteredSearchTermData(LIMIT_NUMBER, filteredPosts, displayedPosts) : filteredDisp..
useSyncExternalStore 훅 알아보기 useSyncExternalStore 📖`useSyncExternalStore`는 외부 상태 store를 React 컴포넌트와 동기화해 concurrent reading(동시 읽기)를 지원할 수 있도록 하는 React Hook입니다. ❗쉽게 설명하면react가 아닌 외부 저장소 (ex. 바닐라 자바스크립트) 값을 읽어드려 외부 저장소 값의 변화를 추적하고, 동시성 상태 변화에 대응할 수 있습니다. 기본 사용법useSyncExternalStore은 세 가지 인자를 받아서 사용합니다.import { useSyncExternalStore } from 'react';import { todosStore } from './todoStore.js';function TodosApp() { const todos = ..
라이브러리 없이 라우터(Router) 만들기 오늘은 `react-router-dom` 라이브러리 없이 라우터를 만들어보면서 라우팅 시스템에 대해 공부해보려고 합니다. 라우팅 시스템 📖라이브러리 없이 라우팅 시스템을 개발하기 위한 2가지 방법이 있습니다. 첫 번째 Fragment 해시(해시 라우터)를 이용하는 방법과두 번째 history API(브라우저 라우터)를 이용하는 방법이 있습니다. history API는 `pushState``popState`메서드가 지원되면서 Fragment 해시를 쓰지 않고도 라우팅 시스템을 개발할 수 있지만 모든 브라우저에서 지원되는 라우터를 개발하기 위해선 아직까지 Fragment 해시 라우터를 사용해야 합니다. 이 포스팅에선 Fragment 해시를 이용해 라우터 구현 방법에 대해 소개하겠습니다. Fragment 해..

티스토리툴바