분류 전체보기 (34) 썸네일형 리스트형 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를 조합.. 포켓몬 API를 사용하여 포켓몬 도감 만들기 포켓몬 API를 활용하여 도감 만들기API 요청포켓몬 API는 내부에 데이터가 복잡한 것 같다. axsios.all을 사용하여 가져온 150개에 대에터에 병렬요청을 하였다.이 복잡한 데이터를 내가 원하는 것만 가져오기 위해서 map(), find()로 원하는 데이터만 가져왔다.연결데이터를 무한 스크롤을 사용하여 연결을 해주었다.useInfiniteQuery쿼리를 사용하여 무한 스크롤을 쉽게 구현할 수 있다.data에는 모든 불러온 데이터를 담은 객체를fetchNextPage()는 다음 페이지 데이터를 불러오는 함수이다.hasNextPage는 다음 페이지가 있다면 boolean 값으로 리턴 한다. 있다면 true를 반환 isFetching 현재 데이터를 가져오고 있는 중인가? booleanisFetchin.. JS 아코디언 구현하기 오류사항처음에 li에 두 번쨰 요소에 DOM을 가져와야 하는데 두 번째 요소를 가져오지를 못했다.해결currentTarget로 해결을 하였다. 이 녀석은 이벤트가 일어난 부모 요소를 선택을 해준다. 이벤트가 부착된 부모의 위치를 반환 ! nextElementSibling 이는 현재 요소의 바로 다음 형제 요소를 반환 같은 부모 요소를 가지고 있는 형제 요소 중에서 현재 요소보다 바로 뒤에 있는 요소를 선택하는 데 사용된다고 한다. currentTarget 로 이벤트가 일어난 부모를 요소를 가져오고, nextElementSibling로 다음 요소를 가져온다.구현화면 이전 1 2 3 4 5 다음 목록 더보기
