리액트 (11) 썸네일형 리스트형 넷플릭스 클론 프로젝트 회고 배포 주소🔗 oz-movie-project-zeta.vercel.app1. 프로젝트 개요프로젝트명: OZFLEX (넷플릭스 클론)기술 스택: React, Redux Toolkit, React Query, Supabase, Swiper, TailwindCSS주요 기능:✅ 영화 검색 및 상세 조회✅ 무한 스크롤 기반의 영화 리스트✅ OAuth(구글, 깃허브) 로그인 및 회원가입✅ 다크 모드 지원✅ Swiper를 활용한 슬라이드 카드 UI✅ React Query를 활용한 데이터 캐싱 및 상태 관리2. 어려웠던 점 & 해결 과정1️⃣ 회원 가입 시 프로필 이미지가 반영되지 않는 문제🛠 문제 원인Supabase OAuth 로그인 후 Redux 상태를 업데이트하려 했으나,비동기 요청(dispatch(loadUs.. 넷플릭스 클론 프로젝트 하면서 어려운 점 회고 1️⃣ 회원 가입 시 프로필 이미지가 반영되지 않는 문제🛠 문제 원인Supabase OAuth 로그인 후 Redux 상태를 업데이트하려 했으나,비동기 요청(dispatch(loadUserSession()))이 Redux 상태에 즉시 반영되지 않음.Redux 상태가 업데이트되기 전에 navigate("/")가 실행되어,홈 화면에서 로그인 상태가 UI에 반영되지 않는 문제 발생.✅ 해결 방법헤더 컴포넌트에서 supabase.auth.getSession()을 통해 최신 세션 정보를 가져와 Redux 상태를 강제로 업데이트.await dispatch(loadUserSession());을 추가하여 Redux 상태가 업데이트된 후 홈으로 이동하도록 수정.만약 await 없이 navigate("/")를 먼저 실행하.. 포켓몬 API 활용한 포켓몬 도감 토이 프로젝트에 대한 회고 🏆 포켓몬 도감 (PokeAPI React Project)📌 프로젝트 소개포켓몬 도감을 구현한 React + TypeScript 프로젝트입니다.P- okeAPI를 활용하여 무한 스크롤을 적용하고, React Query로 데이터를 관리합니다.🚀 주요 기능✅ React Query로 API 데이터 관리 ✅ 무한 스크롤 적용 (Infinite Scroll) ✅ TypeScript 적용 (정적 타입 검증) ✅ Styled Components로 UI 스타일링 ✅ Vercel을 통한 자동 배포🛠️ 기술 스택Frontend: React, TypeScript State Management: React Query CSS: Styled Components Deployment: Vercel 📂 프로젝트.. 포켓몬 API 토이 프로젝트를 하면서 문제점 🛠 React Key 문제 해결 및 회고🐞 문제 상황React에서 포켓몬 도감 데이터를 렌더링하는 과정에서 같은 포켓몬이 두 번씩 중복 렌더링되는 문제가 발생.key={index}를 사용했기 때문에 React가 고유성을 인식하지 못해 중복 렌더링을 일으킴.🔍 문제 원인React에서 key는 배열 내 요소를 고유하게 구분하는 데 사용.key={index}는 배열의 순서가 바뀌거나 데이터가 추가/삭제될 경우 예상치 못한 동작을 초래.고유하지 않은 key로 인해 중복 렌더링이 발생.✅ 해결 방법포켓몬 데이터의 name과 페이지 정보를 조합하여 고유한 key 생성: 🚀 요약문제: 고유하지 않은 key로 인해 React가 중복 렌더링을 일으킴. 해결: pokemon.name과 pageIndex를 조합.. 포켓몬 API를 사용하여 포켓몬 도감 만들기 포켓몬 API를 활용하여 도감 만들기API 요청포켓몬 API는 내부에 데이터가 복잡한 것 같다. axsios.all을 사용하여 가져온 150개에 대에터에 병렬요청을 하였다.이 복잡한 데이터를 내가 원하는 것만 가져오기 위해서 map(), find()로 원하는 데이터만 가져왔다.연결데이터를 무한 스크롤을 사용하여 연결을 해주었다.useInfiniteQuery쿼리를 사용하여 무한 스크롤을 쉽게 구현할 수 있다.data에는 모든 불러온 데이터를 담은 객체를fetchNextPage()는 다음 페이지 데이터를 불러오는 함수이다.hasNextPage는 다음 페이지가 있다면 boolean 값으로 리턴 한다. 있다면 true를 반환 isFetching 현재 데이터를 가져오고 있는 중인가? booleanisFetchin.. React React라이브러리와 프레임워크 차이점프레임워크는 모든 것들이 들어 있는 주머니이다. 대신 틀이 있기 떄문에 그 틀에 맞춰어 사용해야 한다.라이브러리는 단 한 가지 문제를 해결하기 위해서 있는 것이다.내가 원하는 것을 골라 쓸 수 있다. 페이스북 에서 UI를 해결하기 위해서 만들었다.리액트가 가지고 있는 철학UI를 표기하고 이벤트에 반응하는 라이브러리다.UI들을 컴포넌트 단위로 보여주고 이벤트로 반응하는 거라고 볼 수 있다.독립적이다.CSR(클라이언트 사이드 렌더링)웹팩이 내가 작성한 코드와 리액트가 동작하기 위한 코드를 압축해서 보여준다.UI를 표기 해준다.리액트 이벤트이벤트 전파 시 함수를 연결해야 해줘야하고 리액트가 한 단계 감싸서 이벤트를 한다.함수는 메모리 셀에 참조 값이기 때문에 함수를 연결을.. React-player 라이브러리 Video를 재생시켜주는 라이브러리 설치 방법npm i react-player사용 방법 동영상을 보여줄 주소 입력하기 물론 css도 설정이 가능하다. loop는 동영상이 끝나면 자동으로 다시 시작하는 옵션 controls는 기본 HTML5 비디오 컨트롤을 사용할지 여부를 설정하는 옵션, controls가 true일 경우, 플레이어에 재생/일시정지, 볼륨 조정 등의 기본 컨트롤이 표시 구현 화면출처: react-player 패키지 React Potal Modal 구현하기 처음 모달을 구현할 떄에 넷플릭스 Modal이 무슨 순간이동 마냥 요소가 생겨났다.삽질처음에 modal을 구현할 때 슬라이드 형태에 ul, li로 넣었는데 여기서 열 때마다 모달이 걸려있어가지고 넷플릭스처럼 크게 구현을 하지 못했다.이걸 구현하는데 포지션, px, 등을 써봤지만 원하는 대로 구현이 불가능했다. 이것 떄문에 3시간을 삽질을 했다....😂 저처럼 삽집을 하지말라고 글을 남겨요..Potal을 사용하면 된다. 게임에 포탈같다.PotalcreatePortal을 사용하면 일부 자식을 DOM의 다른 부분으로 렌더링할 수 있습니다.포탈을 사용하면 다른 DOM 트리에 자식을 렌더링할 수 있습니다.React의 상태나 이벤트 처리는 그대로 유지하면서, 렌더링 위치만 변경하는 것포탈을 사용하는 이유스타일링:.. 이전 1 2 다음
