JAEJAE imojeomo

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를 연동해 실시간 영화 데이터를 가져오고 화면에 렌더링하는 과정을 배웁니다.배포 경험실제 서비스를 배포해보고 사용자 입장..

1. 완성 🎉https://seungjaelee00.github.io React App seungjaelee00.github.io 2.회고한 10일..에 걸쳐 대충 포트폴리오가 완성되었다. 사실 완성도가 아주 높은 편은 아니지만, 내가 하나부터 열까지 다 직접 만들어서 자유롭게 수정할 수 있으니 이 정도에 만족하려 한다. 수정할 거 생기면 하면 되지.. 마인드로..그나저나 역시 css 만지기는 어렵다...기능? 구현 코드는 금방금방 짜는 것 같은데, css를 만지려다 보니 생각보다 시간이 오래 지체되었다. 화면 크기 360px 이하로는 계속 에러가 나서 반응형으로 만드는 공부를 계속해야 할 것 같다그리고 무엇보다 계획 없이 우다다 만들다 보니 티스토리를 계속 업로드해야지 했는데 하지 못했다. 역시 계획..

1. 프로젝트 슬라이더- 내가 참여했던 프로젝트들을 원래는 a태그만 달아서 해당 페이지로 넘기려고 했는데, 간략한 소개가 있으면 좋을 것 같아서 프로젝트 슬라이더를 만들기로 결정!1) 프로젝트 내용 파일 생성- 우선, 프로젝트 내용들을 객체 배열 형태로 정리해서 projectItems라는 이름으로 저장함.projectItems.jsexport const projectItems = [ { title: "🛒물품대여서비스", category: "개인 프로젝트", imageUrl: ``, githubLink: "", description: "", features: "", techStack: "", }, { title: "💁‍♀️나만의 포트폴리..