본문 바로가기

전체 글

 (106)
TIL - 맛집 공유 뉴스 피드 사이트 프로젝트 회고 (트러블슈팅 위주) 목차프로젝트 개요트러블 슈팅 및 해결 사례아쉬운 점과 스스로 잘했다고 생각한 점시간 관리와 학습 과정프로젝트 성과와 주요 개선점결론프로젝트 개요이번 주 기간 동안 저는 팀과 함께 맛집 공유 뉴스 피드 사이트 프로젝트를 진행했습니다. 이 프로젝트의 목표는 사용자들이 맛집 리뷰를 작성하고 공유할 수 있는 플랫폼을 만드는 것이었습니다. 프로젝트는 React로 프론트엔드를, Supabase로 백엔드와 데이터베이스를 구축하는 방식으로 진행되었습니다.프로젝트의 주요 기능은 다음과 같습니다:사용자 인증: 회원가입, 로그인, 로그아웃 기능맛집 게시물: 맛집 리뷰 작성, 수정, 삭제 기능리뷰 작성 및 조회: 게시물에 대한 리뷰 작성 및 조회 기능팔로우 기능: 게시물 작성자 팔로우 기능마이 페이지: 사용자 프로필 수정 및..
TIL- Supabase SUPABASE란?SUPABASE는 오픈소스 Firebase 대안으로 2020년에 첫 릴리즈된 백엔드 서비스입니다. Postgres 데이터베이스를 기반으로 하며, 인증, 실시간 기능, 스토리지 등 백엔드 개발에 필요한 다양한 기능을 API 형태로 제공합니다.주요 기능Postgres 데이터베이스: 안정적이고 확장성 높은 오픈소스 관계형 데이터베이스를 사용합니다. SQL을 통해 데이터를 쉽게 조작할 수 있습니다.인증: JWT 기반의 인증 시스템을 제공하여, 사용자 가입, 로그인, 권한 관리 등을 손쉽게 구현할 수 있습니다.스토리지: S3 호환 API를 통해 파일 업로드와 관리 기능을 제공합니다.실시간 기능: 웹소켓을 활용한 실시간 구독 기능을 지원하여, 데이터 변경 사항을 실시간으로 동기화할 수 있습니다.E..
TIL (Today I Learned) - 팀 프로젝트를 하면서 오늘 배운 내용 Supabase에서 Cardlists 연결오늘 Supabase를 사용하여 cardlists를 성공적으로 연결했습니다. 이 과정에서 Supabase의 데이터베이스와 프론트엔드 간의 데이터 연동 방법에 대해 배우게 되었습니다.로그인 상태에 따른 페이지 헤더 조건부 변경Supabase 데이터베이스를 사용하여 사용자 로그인 상태에 따라 페이지 헤더를 조건부로 변경하는 로직을 구현했습니다. 이를 통해 사용자 인증 상태를 확인하고 UI를 동적으로 변경하는 방법을 익혔습니다.Follow API 작성Follow 기능을 위한 API를 작성했습니다. API 설계 및 구현 방법에 대해 더 깊이 이해하게 되었고, 사용자 관계 데이터를 처리하는 방법도 익혔습니다.React에서 Suspense 사용법 학습React의 Suspen..
TIL - 리액트 라우터 연결 방법: 문제와 해결 오늘은 React와 Supabase를 이용하여 맛집 공유 뉴스 피드 사이트를 구현하는 과정에서 겪었던 고민과 해결 방법에 대해 공유하려고 합니다. 라우팅과 상태 관리에 대해 중점적으로 다룰 것입니다. 프로젝트 구조이 프로젝트는 Single Page Application(SPA)으로, React를 사용하여 구현되었습니다. React Router v6을 이용하여 클라이언트 사이드 라우팅을 관리하고 있으며, Supabase를 통해 데이터를 관리합니다.  문제 정의1. 뉴스 피드 페이지(MainPage)에 세 가지 정렬 버튼이 있습니다: 트렌드, 최신, 팔로우. 이 버튼들을 클릭할 때 기준으로 정렬된 게시물이 표시되기를 원했습니다.2. 사용자가 기본 URL(test.com)에 접속했을 때 리다이렉트되어 트렌딩 ..
TIL - useMemo와 useCallback useMemo와 useCallback은 React에서 성능 최적화를 위해 사용되는 훅입니다. 이 둘은 각각 값을 캐싱하거나 함수를 메모이제이션하여 불필요한 재계산을 방지합니다. useMemo: 이 훅은 계산 비용이 높은 값을 캐싱하고, 해당 값이 필요한 경우에만 다시 계산합니다. 이는 렌더링마다 동일한 계산을 반복하지 않고 성능을 향상시킵니다. 주로 렌더링 시마다 변경되지 않는 값이나 연산 결과를 캐싱하는 데 사용됩니다.예를 들어, 복잡한 계산이나 배열의 필터링, 정렬과 같은 작업을 수행한 결과를 재사용하려는 경우에 useMemo를 사용할 수 있습니다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);  useCallbac..
TIL: React, Vite, Redux(RTK), Router를 이용한 SPA 블로그 프로젝트 프로젝트 개요프로젝트 목표:  로그인 기능이 있는 블로그 만들기  로컬 스토리지 활용해 데이터 관리하기  CRUD 기능을 포함한 블로그 시스템 구현하기기술 스택:  React: 프론트엔드 프레임워크  Vite: 빠른 개발 환경 구축  Redux (RTK): 상태 관리  React Router: 클라이언트 사이드 라우팅  Styled-components: 초기 스타일링  Tailwind CSS: 스타일링 연습 (향후 컴포넌트에 적용)  clsx: 조건부 스타일링 (향후 컴포넌트에 적용)구현된 기능로그인 및 회원가입 기능:  로그인 상태에 따라 글쓰기 버튼 및 로그아웃 버튼 표시  모달창을 이용한 회원가입 및 로그인 전환블로그 글쓰기 및 글 목록 표시:  로그인된 상태에서 글 작성 시, 회원 ID와 이름을 ..
TIL - 전역상태관리 (Zustand) 01. 설치하기npm install zustand 02. 사용법import { create } from 'zustand'const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })),}))function Counter() { const { count, inc } = useStore() return ( {count} one up )}스토어는 훅입니다. 여기에는 객체, 함수 등 무엇이든 넣을 수 있습니다. 상태는 불변적으로 업데이트되어야 하며, 설정 함수는 이를 돕기 위해 상태를 병합합니다. 03. 유의할 점Fetching everything vs...
TIL - 각 컴포넌트 폴더에 index.js 파일을 두는 이유 오늘은 React 프로젝트에서 Redux Toolkit을 활용하여 모달 컴포넌트 폴더에 index.js 파일을 두는 것이 얼마나 컴포넌트를 효과적으로 관리하는지 학습했습니다. index.js 파일의 정의와 역할index.js 파일은 해당 폴더 내의 파일들을 한 곳에서 import 및 export할 수 있게 해주는 모듈화된 엔트리 포인트입니다.이를 통해 프로젝트 구조를 더 깔끔하고 조직적으로 유지할 수 있습니다. index.js 활용의 주요 장점편리한 모듈화: 여러 모달 컴포넌트를 각각 import할 필요 없이, index.js를 통해 한 번에 import할 수 있습니다. 이렇게 하면 코드 작성 시 import 구문이 간결해지고, 필요한 모달 컴포넌트를 더 쉽게 사용할 수 있습니다.중앙 집중 관리: 모든 ..

티스토리툴바