본문 바로가기

전체 글

 (106)
TIL- 시스템 설계와 Many-to-Many 관계 적용 오늘은 복잡한 데이터 구조들을 효율적으로 구현하는데 있어서 올바른 데이터베이스 구조와 관계 설정에 대해 배웠습니다 Many-to-Many 관계 적용 예시1. 트위터 피드트위터와 같은 소셜 미디어 플랫폼에서 Many-to-Many 관계를 활용하는 대표적인 예시로는 사용자와 트윗 간의 관계가 있습니다.테이블 구조: Users, Tweets, FollowersUsers: 사용자 정보를 저장하는 테이블.Tweets: 트윗 정보를 저장하는 테이블.Followers: 사용자 간의 팔로우 관계를 저장하는 테이블.기능: 사용자 A의 피드 조회사용자 A가 팔로우하는 모든 사용자(B, C, D 등)의 트윗을 조회합니다.이를 위해 조인 쿼리를 사용하여 Followers와 Tweets 테이블을 연결합니다.2. 플레이리스트음악..
TIL - 서버 사이드 렌더링으로 화면 깜빡임 제거 문제 설명React 애플리케이션에서 서버 사이드 렌더링(SSR)을 사용하지 않을 때, 즉 next.js를 사용하기 전에는 초기 페이지 로드 시 데이터가 없어서 화면이 깜빡이는 현상이 발생할 수 있습니다. 예를 들어, 로그인된 사용자의 정보를 표시할 때, 초기 렌더링에서 데이터가 없으면 "없습니다"라고 표시되었다가, 데이터가 로드되면 "사용자 이메일"로 변경됩니다. 이러한 화면 깜빡임은 사용자 경험을 저하시킬 수 있습니다. 해결 방법이 문제를 해결하기 위해, 서버 사이드에서 초기 데이터를 가져와 클라이언트로 전달하고, 이를 통해 초기 렌더링 시에 데이터를 사용하여 화면 깜빡임을 방지할 수 있습니다. 이를 위해 Next.js의 서버 사이드 렌더링 기능과 컨텍스트 API를 사용합니다.  구현 단계1. Auth..
TIL - 소셜 로그인 기능 추가 도중 트러블 슈팅 발단 이번 프로젝트에서는 사용자가 Google 및 카카오 계정 등을 사용해 로그인할 수 있도록 소셜 로그인 기능을 추가하려고 했습니다. 하지만 여러 가지 문제를 겪으며 해결 과정을 통해 많은 것을 배울 수 있었습니다.문제 소셜 로그인 버튼을 클릭할 때 리디렉션이 되면서 supabase에 저장되지 않는 오류가 발생했습니다.  원인 분석처음에는 문제가 Google API 콘솔의 리디렉션 URI 설정에 있다고 생각했습니다. 이후, 리디렉션이 발생하는 것을 확인하고 로그인 폼 제출 방지 문제라고 생각해서 테스트해 보았지만, 문제가 지속되었습니다. 로그를 통해 문제를 찾으려고 했지만, 소셜 로그인 시 페이지가 이동하면서 로그를 확인하기가 어려웠습니다. 이 과정에서 소셜 로그인 페이지로 이동하는 것을 보고 연결은 ..
TIL - 리액트 훅과 가상 DOM의 상호작용 1. 가상 DOM (Virtual DOM)리액트에서 사용하는 가상 DOM은 렌더링 효율성을 높이기 위해 실제 DOM의 경량화된 사본을 메모리 내에서 유지합니다. 상태나 props가 변경되면 리액트는 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교(diffing)하여 변경된 부분만 실제 DOM에 반영(patching)합니다. 이는 전체 DOM을 다시 렌더링하지 않고, 변경된 부분만 업데이트함으로써 성능을 최적화하고, UI 업데이트를 예측 가능하게 만듭니다.2. useRefuseRef는 리액트 훅으로, DOM 요소나 변경 가능한 값의 참조를 유지하는 데 사용됩니다. 컴포넌트의 전 생애주기 동안 유지되는 ref 객체를 생성합니다. useRef는 DOM 요소에 접근하거나, 상태 변화 없이 변수 값을 유..
TIL - 무한 스크롤 데이터 요청 중 깜빡임 제거 문제 상황프로젝트에서 포켓몬 리스트를 무한 스크롤로 구현하고, 세대별로 필터링하는 기능을 추가했습니다. 그러나 세대별 데이터를 필터링할 때마다 무한 스크롤 데이터로 초기 데이터만 20개가 있고 필터링된 데이터는 새로 요청을 해서 필터링될  때마다 UI 깜빡임이 발생하는 문제가 있었습니다. 이 깜빡임은 API 요청 중 로딩되는 상태에서 생기는 문제로 리액트의 장점인 SPA을 통한 강력한 사용자 경험(UX)과 거리가 멀어보였습니다. 해결 방법: Skeleton 로딩 사용깜빡임 문제를 해결하기 위해 Skeleton 로딩을 사용했습니다. Skeleton 로딩은 로딩 중에 리스트와 동일한 UI를 유지해 줬습니다.const PokemonSkeletonList = ({ count = 12 }) => ( {A..
TIL - 재사용 가능한 컴포넌트 만들기: class-variance-authority 활용 오늘은 class-variance-authority (CVA)를 사용하여 재사용 가능한 UI 컴포넌트를 만드는 방법을 학습했습니다. CVA는 다양한 스타일 변형을 정의하고 조합할 수 있는 유틸리티 라이브러리로, Tailwind CSS와 같은 스타일링 프레임워크와 잘 어울립니다. 예제 코드import { cva } from "class-variance-authority";const button = cva(["font-semibold", "border", "rounded"], { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:b..
TIL - 북마크된 영화 목록 기능 구현을 위한 고민과 해결 방안 프로젝트에서 북마크된 영화 목록 기능을 구현하는 과정에서 고민하고 최종적으로 결정한 사항을 공유합니다. 아래는 초기 코드와 최종 코드, 그리고 각 코드의 장단점을 비교한 개선된 사항입니다. 고민 이유북마크된 영화 목록 기능:개별 영화의 상세 페이지에서 북마크를 추가하고, 이를 모아 북마크된 영화 목록을 표시하는 기능.북마크된 영화 목록을 표시하기 위해 각 영화의 세부 정보를 요청할 때 서버 과부하 우려.데이터 요청에 대한 고민:인기순, 최신순 등의 영화 목록에서 중복된 영화가 있음.실제로 필요한 데이터보다 많은 데이터를 한 번에 요청하게 되어 불필요한 데이터까지 받아오게 됨.해결 방안한 번에 요청하는 방법:장점:네트워크 효율성: 여러 개의 요청을 하나로 줄여 네트워크 부하를 줄임.응답 속도: 한 번의 요..
TIL - Next.js&supabase에서 createClient Vs. createServerComponentClient 오늘은 Supabase와 Next.js를 함께 사용할 때의 다양한 접근 방식에대한 학습 내용을 정리해보려고 합니다. 각각의 방법에 대한 장단점과 적합한 사용 상황을 공유하겠습니다.기본 Supabase 클라이언트 사용 (createClient)장점:간단하고 직관적인 설정: 설정이 매우 간단하고 직관적이어서 빠르게 프로젝트를 시작할 수 있습니다.클라이언트 사이드에서 완전한 Supabase 기능 사용 가능: 클라이언트 사이드에서 Supabase의 모든 기능을 사용할 수 있습니다.onAuthStateChange를 통한 세밀한 인증 상태 관리: 인증 상태 변화를 실시간으로 관리할 수 있어 편리합니다.단점:서버 사이드 렌더링(SSR)에 최적화되어 있지 않음: 서버 사이드 렌더링에는 적합하지 않습니다.클라이언트 사이..

티스토리툴바