분류 전체보기 (36) 썸네일형 리스트형 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.. 주스텐드 스토어란?스토어(Store)는 중앙에서 애플리케이션의 상태(State)를 한 곳에서 관리하는 공간이다.마치 제일 최상위 부모 컴포넌트가 데이터를 가지고 자식 컴포넌트들에게 필요한 값을 props로 전달하거나, 특정 방식으로 접근하도록 하는 구조라고 볼 수 있다.비유: 로그인 비밀번호 시스템로그인을 예로 들면:사용자가 비밀번호를 입력한다 → 스토어에 상태가 저장된다.사용자가 비밀번호를 변경한다 → 스토어의 상태가 업데이트된다.이 변경된 상태는 앱 전체에서 동기화되어 반영된다.왜 스토어가 필요한가?컴포넌트 간에 상태를 공유해야 하는 상황에서, prop drilling을 줄이고 복잡한 데이터 흐름을 단순화하기 위해 사용한다.예를 들어, 로그인 상태, 사용자 정보, 테마, 언어 설정 같은 전역 상태를 다룰 때 .. AWS 클라우드 프론트로 배포하기 CloudFrontAWS에서 제공하는 서비스이다. 이 서비스는 S3로만 배포를 하면 HTTP이다. 이는 보안에 취약하다.HTTP는 사용자가 회원가입, 로그인을 한다고 가정을 하면 이에 대한 데이터가 가는 순간에 해커가 중간에서 가로채어 해킹이 가능하다.클라우드프론트 서비스를 써야 HTPPS로 보안을 향상 시킬 수 있다. 또한 HTTPS는 SEO에 대한 가산점이 있다.이 서비스는 만약에 한국에서 서버가 있다고 가정을 한다면 한국에 있는 사용자들은 웹 사이트를 들어오는데 빠르겠지만 미국이나, 다른 나라에 사람들은 사이트에 들어오는데 오래걸린다. 이를 해결해주는 것이 클라우드프론트다.이는 세계 곳곳에 있는데 S3에 있는 데이터을 복사본을 파일을 받아서 다른나라 사람도 빠르게 접속을 하게 해준다.이제 하는 방법.. ASW 버킷 설정 및 배포하기 AWS 버킷을 설정하기 전에 알아야 할 것들배포란?우리가 개발한 프로젝트들은 로컬호스트로 들어가게 된다. 우리의 로컬 주소를 다른 사용자 또는 친구들에게 주고 들어오라고 한다면 들어올 수 없고 오류가 난다. 배포를 하기 위해서는 서버(컴퓨터)가 필요하다. AWS는 이를 간단하게 버튼 딸칵으로 이용할 수 있다. 이를 AWS에서는 클라우드 서비스 라고 한다.S3S3는 파일을 저장하고 다운로드 하는 하나의 서비스이다. 즉 구글에 드라이브, 네이버에 클라우드처럼 말이다.버킷버킷이란 하나의 저장소 이다. 즉 깃허브에 레포지토리 처럼, 또는 하나의 하드디스크 처럼처음에는 버킷을 만들어줘야 한다. 여기서 버킷을 생성해주고버킷에 대한 설정을 해준다.다른 것을 설정해줄 필요 없다. 버킷을 만들기를 클릭한다. 버킷 이름은.. 넷플릭스 클론 프로젝트 회고 배포 주소🔗 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를 조합.. 이전 1 2 3 4 5 다음
