[React] API Key 숨기기
2022. 8. 5. 16:54
공부/JavaScript
이번 포스팅은 API를 사용하는 프로젝트를 Github에 올릴 때 api key를 숨기는 방법이다. 나는 CRA로 프로젝트를 만들었기 때문에 이 경우에는 따로 dotenv를 설치할 필요는 없다. 최상위 경로(root)에 .env 파일 생성 가장 먼저 최상위 경로에 .env 파일을 생성해서 환경변수를 지정해주어야 한다. 그 뒤에 .env 파일 안에 아래와 같이 작성한다. //.env REACT_APP_API_KEY=내API키 React에선 무조건 REACT_APP_~으로 시작하는 이름으로 작성해야 한다. Node.js 에서는 굳이 이럴 필요는 없지만 React에선 필수이다. API Key 불러오기 그 뒤에 불러올 컴포넌트에서 아래와 같이 선언한 뒤 사용하면 된다. const API_KEY = process..
[React] React-Query
2022. 6. 2. 22:27
공부/JavaScript
React-query는 fetcher 함수를 만들수 있게 해준다. export function fetchCoins(){ return fetch(`${BASE_URL}/coins`).then(response=>response.json()) } 기본적으로 fetcher 함수와 연결시켜서 isLoading과 같은 함수가 불렸는지 아닌지를 알려준다. 그리고 함수가 끝났을 때는 결과 값을 data에 넣어준다. const { isLoading, data }=useQuery("allCoins", fetchCoins) 그리고 여러개의 query를 사용하게 되어 key값을 겹치지 않게 하고 싶고, argument가 필요한 경우에는 아래와 같이 작성한다. const {isLoading: infoLoading, data:i..
[React] YTS API로 영화 소개 페이지 만들기(3) - React Slick (slide)
2022. 5. 31. 02:37
공부/JavaScript
React Slick install 저번 포스팅에서 작성했지만 다시 한 번 제대로 정리해야겠다! npm i react-slick import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 설치 후 css까지 import 했다. 사용법 우선 가이드에 따르면 아래와 같이 적용한다. export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScro..
[React] YTS API로 영화 소개 페이지 만들기(2)
2022. 5. 31. 02:14
공부/JavaScript
상세 페이지 만들기 function MovieDetail( { title, genres, description, rating, runtime, bgImg, coverImg, }){ return( {title} Rating: {rating} / 10 {genres.map(item=>`${item}`).join(`/`)} Runtime: {runtime} minute {description} ) } 상세 페이지에 쓸 커버 이미지와 rating, genres, runtime을 넣어주고 하단에 줄거리를 출력하기 위해 description을 사용했다. 로딩 페이지 만들기 내가 만든 로딩 페이지는 사실상 로딩 gif를 화면에 출력하는 것 밖에 없다... import React from "react"; import ..
[React] YTS API로 영화 소개 페이지 만들기(1)
2022. 5. 31. 02:01
공부/JavaScript
YTS Movie api로 영화 소개 페이지를 만들었다. 복습할겸 다시 정리해보려고 한다. React 프로젝트 생성 CRA를 이용하여 프로젝트를 생성했다. npx create-react-app yts-movie Install React-router-dom, Import npm i react-router-dom import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' react-router-dom 설치 후 import 해주었다. 노마드코더 강의에서는 react-router-dom V5 로 진행하여 Switch를 사용하는데, V6 로 업데이트 되면서 Switch 대신 Routes로 바뀌었다. 3. 컴포넌트 생성 홈 페이지에서 상세 페..