리액트 (12) 썸네일형 리스트형 eslint airbnb 8 설치 기존 설치 된거 삭제하기npm uninstall eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks typescript-eslint @eslint/js기존에 vite로 설치하면 기본적으로 깔려있는 것들이 있는데 혹시 몰르니 깔끔하게 다 삭제해준다.✨ ESLint + Airbnb + TypeScript + Prettier + Vite 설정 가이드 (Windows 기준)프론트엔드 개발 시 코드 품질과 일관된 스타일 유지를 위해 사용하는 ESLint.. 넷플릭스 클론 프로젝트 회고 배포 주소🔗 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 패키지 이전 1 2 다음
