[220721] 유튜브 클론코딩 3

1. lib 폴더 > api.js

export const videoUrl = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&chart=mostPopular&maxResults=30&q=css3®ionCode=kr&type=video&key=본인키`

→ 인증키 노출되면 안됨, 나의 고유한 정보라서 해킹되거나 도용될 수 있어서 그 때 생기는 문제는 자기 책임, 따라서 환경 변수로 처리해줘야 함

 

 

 

2. 환경변수 만드는 법

react 공식 문서에 환경변수 설정 부분 있는데 못 찾음 나중에 첨부해주신다고 함

- 어떤 폴더 안에 말고 아예 밖에 .env 파일 만들기

- API_KEY=내 키값 → 노드에서 사용하는 키값

- REACT_APP_API_KEY=내 키값 → 리액트에서 사용하는 키값

- 둘 다 띄어쓰기 안됨, 띄어쓰기 까지 환경 변수로 인식

- api.js 로 가서 const API_KEY=process.env.REACT_APP_API_KEY → import 해줄 필요 없고 이렇게 넣어주면 불러온 거임

- 그리고 위에 videoUrl 변수 지정해줬던 주소에 있는 키값 없애고 ${API_KEY} 이렇게 넣어주면 키 값이 들어가는 거임

- videolist 로 가서 import { videoUrl } from '../../lib/api'; 해주고 dispatch(getVideoList(videoUrl)) 로 넣어주면 쿼리값으로 넘어감

- 환경변수 생성 후에는 꼭 서버 껐다가 다시 동작해야 적용이 됨

 

- searchform 부분의 api 도 가져와서 환경변수 처리해주기 ( url 안에 변수가 있음 )

export function searchUrl(input){

  return `https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=30&q=${input}&regionCode=kr&type=video&key=${API_KEY}`

}

→ api.js 에서 url 안의 변수를 인자로 넣은 함수를 생성

- searchform index 파일로 가서 import { searchUrl } from '../../../lib/api';

const onSearch = (input) =>{

        const url =searchUrl (input)

        dispatch(getVideoList(url))

        navigate('/')

    }

→ app.js 에서 가져온 searchUrl 을 input 을 넣은 변수로 설정한 뒤 쿼리값으로 해당 변수를 인자로 넘겨주도록 수정

 

 

 

3. pages > search.js 생성해서 검색하면 아예 다른 페이지로 이동하도록

- app.js 에서 <Route path="/search" element={<Search />} />

- search.js에 기본 세팅

import React from 'react';

import SideMenu from '../components/SideMenu';

import VideoList from './../components/VideoList/index';

 

const Search = () => {

  return (

    <>

      <SideMenu />

      <section className='main-content'>

        <VideoList />

      </section>

    </>

  );

};

 

export default Search;

→ home.js 와 똑같이 구성

 

1) 레이아웃 관리를 redex 로

- videoSlice 로 가서

- initialState 에 listLayout: 'grid', 추가

 reducers:{

        videoListLayout: (state, action) =>{

            state.listLayout=action.payload

        }

    },

→ 해당 grid 레이아웃 나오도록 만드는 것

- 맨 하단에 export const {videoListLayout} = videoSlice.actions

 

2) grid 라는 값을 reducer 로, url 뿐 아니라 레이아웃도 dispatch

- SearchForm 으로 와서 onSearch 하면 dispatch(videoListLayout('list')) 가 쿼리값 넘어가도록 설정

- videoListLayout 도 import

- list 인지 gird 인지 읽어서 해야 하니까 Search.js 로 와서

- import { useSelector } from 'react-redux';

- const display = useSelector((state)=>state.video.listLayout);

→ display 는 onsearch 해서 Search 페이지로 넘어가면 레이아웃을 list 로 css 를 변경해줄 것임

 

- VideoList 로 와서 display props 받아주고

- <ul className={display==='grid'?'videoList VideoGrid':'videoList VideoRowList'} > 로 수정

→ display 가 gird 일 경우 VideoGrid' 를, 아니면 VideoRowList 를 적용

 

- css 만들기

 

- Home.js 로 가서

import { useEffect } from 'react';

import { useSelector,useDispatch } from 'react-redux';

import { videoListLayout } from '../store/video/videoSlice';

 

const dispatch = useDispatch();

    const display = useSelector((state) => state.video.listLayout)

 

    useEffect(()=>{

        dispatch(videoListLayout('grid'))

    },[])

 

<VideoList display={display} />

 

 

 

!!!! 주의 !!!!

환경 변수 파일 무시하고 올려야 함

ignore 파일 안에 #API_KEY .env 해주기