![]()
회고 첫 배포이기도 하고 내가 마친 프로젝트를 배포하는게 간단한 일이라 생각했지만 왜 인지 모르게 오류의 연속이였다 분명 배포하기 전에는 실행도 잘됐는데 배포하고 나니까 github를 통해 빌드하고 배포했던 주소까지 생기고 나서 경로 문제때문에 배포해도 빈화면만 뜬다거나 오류코드가 떠버리고 말았다.. 분명 로컬에서는 http://localhost:3000 이렇게 했을 때 문제 없이 잘 작동하는데 github 주소까지 더해져서 http://localhost:3000 /react-disneyplus-app 이렇게 실행할 때는 이상하게 오류가 뜨는 것이다. 알고보니까 React Router를 사용하는 경우, BrowserRouter의 basename 속성을 설정하여 앱의 기본 경로를 지정해주니까 바로 해결..
![]()
API KEY 숨기기 후 다시 빌드 및 배포 ● api key 숨기기 배포를 하게 되면 여러 사용자들이 볼 수 있기 때문에 API KEY를 숨김 처리 해주는 것이 좋다. API KEY가 노출되면 다른 사람이 나만의 API KEY를 무한 사용해 요금이 나갈 수 있는 경우도 있으니 숨김 처리를 해주도록 하자. 1. .env 파일을 생성해준다. 2. .env 파일안에 api key를 넣어준다 REACT_APP_API_KEY= apikey입력 3. axios.js 파일 안의 코드를 수정해준다. import axios from 'axios';const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params: { a..
![]()
Github에 배포하기 1. 터미널 창에 입력해준다. npm install gh-pages --save-dev 2. package.json에 들어가보면 "gh-pages" 버전이 적혀있는 것을 확인해주면 된다. 3. package.json 안에 "homepage": "https://깃허브 사용자이름.github.io/{깃허브 파일이름}/", 을 적어주면 된다. 4. 이 과정들을 거쳤다면, 이제 빌드를 해보자 npm run build 5. 빌드 후 배포하기 npm run deploy Published 문자가 뜨면 배포가 완료 된 것이다. ● 빌드 후 오류 다 완성 시켜줬었는데 경로 때문인지 이미지 파일들이 전부 안보이는 것이다 문제를 해결하기 위해 살펴보고 나니 빌드 후에 경로문제 때문..
![]()
Login Page 구현하기 LoginPage / index.js import React from 'react'import styled from 'styled-components'const LoginPage = () => { return ( 지금 가입 영화에 대한 프리미어 액세스를 얻으십시오. 디즈니 플러스 가격은 다음 주부터 1000원 인상됩니다. )}export default LoginPage LoginPage / (new !! ) index.js const BgImage = styled...
![]()
swiper 모듈을 이용한 터치 슬라이드 구현하기 ● Swiper 모듈 설치 npm install swiper --save Row.js import axios from '../api/axios';import React, { useCallback, useEffect, useState } from 'react';import "./Row.css";import MovieModal from './MovieModal';import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';import { Swiper, SwiperSlide } from 'swiper/react';import "swiper/css";import "swiper/css/na..
![]()
모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 모달 창 안을 클릭 했을 때와 바깥에 클릭 했을 때를 구분시켜바깥을 클릭하게 된 경우 창을 종료하게 되도록 만들어주려한다. ● 로직 구조 어디를 클릭하는지 구분 (모달 창 안 or 밖) => useRef라는 것을 이용해서 구분 가능하다 ● useRef란?특정 DOM을 선택할 때 사용하는 React Hooks이다. ● 특정 DOM 선택하기 ● DOM을 직접 선택해야 할 경우들 1. 엘리먼트 크기를 가져와야 할 때 2. 스크롤바 위치를 가져와야 할 때3. 엘리먼트에 포커스 설..
![]()
useParams를 이용한 영화 상세 페이지 구현하기 search페이지에서 검색한 이미지의 사진을 클릭했을 때 DetailPage로 이동해서 상세 이미지가 보이도록 만들어주는 것이 이번 목표이다. 1. 포스터 클릭 시 상세 페이지로 SearchPage/index.js navigate(`/${movie.id}`)}> 2. 상세 페이지에서 영화 상세 정보 가져오기 DetailPage/index.js let {movieId} = useParams(); // let movieId = useParams().movieId; const [movie, setMovie] = useState(..
![]()
UseDebounce Custom Hooks 만들기 Debouce란? 검색 입력에 입력할 때 입력 결과가 나타날 때까지 지연이 있는 것 debounce function은 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup 이벤트의 처리를 지연시킨다. hooks 폴더 및 파일 생성 useDebounce Hooks 생성UseDebounce.js import { useEffect, useState } from "react";export const useDebounce = (value, delay) => { const [debounceValue, setDebounceValue] = useState(value); useEffect(() => { const handler = setTim..
![]()
검색 페이지 UI 구현하기 1. SearchTerm에 해당 영화 데이터가 있을 경우 index.js if(searchResults.length > 0) { return ( {searchResults.map((movie) => { if(movie.backdrop_path !== null && movie.media_type !== "person") { const movieImageUrl = "https://image.tmdb.org/t/p/w500" + movie.backdrop_path; return ( navigate(`/${movie.id}`)}> ..
![]()
1. NavBar에 검색 Input 생성 Nav.js const { pathname } = useLocation(); {pathname === "/" ? (Login) : }const Login = styled.a` background-color: rgba(0,0,0,0.6); padding: 8px 16px; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid #f9f9f9; transition: all 0.2s ease 0s; &:hover { background-color: #f9f9f9; }`; const Input = styled.input` position: ..
