JAEJAE imojeomo

영화 검색 기능 및 찜 페이지 구현이번 포스팅에서는 찜 페이지와 영화 검색 기능을 구현한 내용을 다뤄보겠습니다. 이를 통해 사용자가 사이트에서 찜 목록을 쉽게 볼 수 있고 영화 검색을 효율적으로 할 수 있도록 만드는 방법을 소개합니다.1. 영화 검색 기능 구현사용자는 영화 검색 기능을 통해 원하는 영화를 빠르게 찾을 수 있습니다. 이 기능은 TMDB API를 활용하여 검색된 영화 목록을 표시하고, 필터링 옵션을 제공하여 사용자가 원하는 영화를 정리할 수 있도록 돕습니다.1.1 검색어 입력 및 API 호출사용자가 검색어를 입력하면 해당 검색어를 바탕으로 TMDB API에서 영화 목록을 받아옵니다. 이를 위해 useState로 검색어 상태를 관리하고, 검색 버튼을 클릭하면 searchMovies 함수를 호출..

로그인 및 회원가입 팝업 구현이 포스팅에서는 사용자가 로그인할 수 있도록 로그인 팝업을 구현했습니다. 팝업 안에서 로그인과 회원가입 기능을 모두 지원하며, 로그인 유지 기능도 추가하여 사용자가 로그인 상태를 유지할 수 있습니다. 또한, 로컬 스토리지를 활용하여 사용자의 인증 정보를 저장하고 관리합니다.1. 주요 기능1.1 로그인로그인 기능은 사용자가 입력한 이메일과 비밀번호를 로컬 스토리지에 저장된 사용자 목록과 비교하여 인증합니다. 인증에 성공하면 isLoggedIn 값을 로컬 스토리지에 저장하여 사용자가 로그인된 상태로 앱을 이용할 수 있게 합니다.1.2 회원가입회원가입은 사용자가 입력한 이메일과 비밀번호를 기반으로 새로운 사용자 정보를 로컬 스토리지에 저장합니다. 또한, 비밀번호 확인 필드를 제공하..

API 호출과 Local Storage를 활용한 영화 데이터 관리이번 단계에서는 TMDB API를 활용한 데이터 호출과 로컬 스토리지를 활용한 사용자 데이터 저장 방법을 살펴봅니다. 아래는 API 호출과 로컬 스토리지 관련 코드의 주요 내용입니다.1. TMDB API 설정TMDB(The Movie Database)는 영화 데이터 API를 제공합니다.이 프로젝트에서는 TMDB API를 사용해 인기 영화, 특정 영화 정보, 영화 검색 등의 데이터를 가져옵니다.API 설정 코드는 다음과 같습니다:import axios from "axios";// TMDB API 기본 설정const BASE_URL = "";const API_KEY = process.env.REACT_APP_TMDB_API_KEY; // 환경 ..

이 글에서는 넷플릭스 클론 프로젝트를 시작하기 위해 필요한 환경 설정과 초기 파일 구조 구성 방법에 대해 다룹니다. 1. React 프로젝트 생성먼저, React 프로젝트를 생성해야 합니다. 아래 명령어를 통해 React 앱을 만들 수 있습니다:npx create-react-app netflix-clonenpx create-react-app 명령어는 React 공식 템플릿을 기반으로 새 프로젝트를 생성합니다.netflix-clone은 프로젝트 폴더 이름입니다. 원하는 이름으로 바꿀 수 있습니다.생성이 완료되면 해당 디렉토리로 이동합니다:cd netflix-clone의존성 설치 확인React 프로젝트를 생성하면 기본적으로 필요한 의존성들이 함께 설치됩니다. package.json 파일을 열어 다음 패키지가..

넷플릭스의 프론트 부분을 클론 코딩해 보자!TMDB API로 영화 데이터 불러오고 로컬스토리지와 세션스토리지로 상태를 관리할 예정넷플릭스 클론코딩 프로젝트이 프로젝트는 넷플릭스의 기본적인 UI와 기능을 클론한 리액트 기반의 웹 애플리케이션입니다. 넷플릭스의 디자인을 참고하여, 영화 목록을 보고 검색하며 즐겨찾기하는 등의 기능을 제공합니다.1. 프로젝트의 목표React 활용 능력 강화React의 컴포넌트 구조, 상태 관리, 라우팅 등을 학습합니다.UI/UX 디자인 이해넷플릭스의 직관적이고 깔끔한 UI를 따라 디자인하며 사용자의 경험을 고려합니다.API 통신 및 데이터 처리 경험외부 API를 연동해 실시간 영화 데이터를 가져오고 화면에 렌더링하는 과정을 배웁니다.배포 경험실제 서비스를 배포해보고 사용자 입장..