[TIL] Day66 #React Hooks #Naver Movie API

2022.07.29(Fri)

[TIL] Day66
[SEB FE] Day67

☑️ [pair] fe-sprint-react-hooks

📎 json-server 라이브러리 사용

: 직접 DB & 서버 구축할 필요없이 JSON 파일을 이용하여 REST API 서버를 구축해주는 라이브러리
✋ 이 라이브러리는 공부하다가 서버가 필요하다면 사용하기!! (실제 프로젝트시엔 사용 지양)

# json-server 전역 설치
$ npm i -g json-server

# json-server를 localhost:3001으로 열기
$ cd data
$ json-server --watch data.json --port 3001

• App.js

  • react.lazy() & suspense 사용하여 컴포넌트 Refactoring ✨

    const CreateBlog = lazy(() => import("./blogComponent/CreateBlog"));
    ...
    
    return (
    	<BrowserRouter>
    		<Suspense fallback={<Loading />} />
    		<Routes>
    			<Route path="/create" element={<CreateBlog />} />
    			...
    		</Routes>
    	</BrowserRouter>
    )

• BlogDetail.js

  • useParams을 이용하여 개별 id를 받아와 개별 블로그의 내용이 보일 수 있도록 ✨

    import { useNavigate, useParams } from "react-router-dom";
    
    const { id } = useParams(); // params의 id를 구조분해할당으로 가져옴!
    
    // 'useFetch' Custom Hook 사용
    const {
        data: blog, // data를 blog 변수로 바꿔서 사용
        isPending,
        error,
      } = useFetch(`http://localhost:3001/blogs/${id}`);
    
    const navigate = useNavigate(); // url를 조작할 수 있는 메소드
    
    // 글 삭제 event handler
    const handleDeleteClick = () => {
        fetch(`http://localhost:3001/blogs/${blog.id}`, {
          method: "DELETE",
        })
          .then(() => {
            navigate("/"); // home으로 redirect
          })
          .catch((error) => console.error("Error", error));
      };
    
    // 하트 클릭 event handler
    const handleLikeClick = () => {
        setIsLike(!isLike); // 하트 누름의 true/false 상태 변경
        let result = blog.likes;
    
    		/* 하트를 누르면 숫자 +1 */
        if (isLike === true) {
          result = blog.likes + 1;
        } else {
          if (blog.likes > 0) {
            result = blog.likes - 1;
          }
          result = blog.likes;
        }
    
    		// 수정할 데이터 속성
        let putData = {
          id: blog.id,
          title: blog.title,
          body: blog.body,
          author: blog.author,
          likes: result,
        };
    
        fetch(`http://localhost:3001/blogs/${blog.id}`, {
          method: "PUT", // 수정
          headers: { "Content-type": "application/json" },
          body: JSON.stringify(putData),
        })
          .then(() => {
            navigate(`/blogs/${blog.id}`);
          })
          .catch((error) => console.error("Error", error));
      };

• CreateBlog.js

  • 등록 버튼을 누르면 게시물이 등록이 되며 home으로 Redirect되도록 ✨

  • fetch & useNavigate를 이용하여 handleSubmit event 완성하기 ✨

    const [title, setTitle] = useState("");
    const [body, setBody] = useState("");
    const [author, setAuthor] = useState("김코딩");
    
    const handleSubmit = (e) => {
        e.preventDefault();
    
        const blog = { title, body, author, likes: 0 };
    
        fetch("http://localhost:3001/blogs/", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(blog),
        })
          .then(() => {
            navigate("/");
          });
      };

• UseFetch.js

  • GET 메소드를 통해 데이터를 받아오는 useEffect hook를 custom hook으로 만들어 재사용할 수 있도록 ✨

    import { useState, useEffect } from "react";
    
    const useFetch = (url) => {
      const [data, setData] = useState(null);
      const [isPending, setIsPending] = useState(true);
      const [error, setError] = useState(null);
    
      useEffect(() => {
        setTimeout(() => {
          fetch(url)
            .then((res) => {
              if (!res.ok) {
                throw Error("could not fetch the data for that resource");
              }
              return res.json();
            })
            .then((data) => {
              setIsPending(false);
              setData(data);
              setError(null);
            })
            .catch((err) => {
              setIsPending(false);
              setError(err.message);
            });
        }, 1000);
      }, [url]); // url이 변경될 때마다 리렌더링
    
      return { data, isPending, error }; // 객체로 상태 값 반환
    };
    
    export default useFetch;

handleSubmit event handler의 body 내의 데이터 속성에 id를 넣어서 계속 title, body, author 값이 생성이 안 된거였다.. id는 자동으로 생성해주기 때문에 안 넣어도 되고, id를 빼주니까 값이 잘 나왔다! 이걸로 1시간 넘게 삽질함,,,🫠 그리고 headers도 넣어주는거 잊지 말기!!

---

☑️ 종합 Quiz - React Hooks

🤷‍♀️ Q: React가 Class 컴포넌트 → Function 컴포넌트로 점진적으로 넘어가게 된 이유는 상태값을 사용하거나 최적화할 수 있는 기들이 미진했기 때문이다?

🙅‍♀️ A: NO
ㄴwhy? 상태값을 사용하거나 최적화할 수 있는 기능들이 미진한 것은 초기의 함수 컴포넌트! 클래스 컴포넌트는 componentDidMount(), componentDidUpdate() … 렌더링 시점에 따라 어떻게 동작시킬지 설정할 수 있는 메소드 존재!

🤷‍♂️ Q: useMemo를 const result = useMemo(() => calculate(value), [value]); 와 같은 코드로 작성할 때, 배열 안의 value는 옵션이다?

🙅‍♂️ A: NO
ㄴwhy? useMemo의 1️⃣번째 매개변수-어떻게 연산할지 정의하는 함수, 2️⃣번째 매개변수-deps 배열
⇒ 배열 안에 넣은 내용이 변경되면 1번째 매개변수의 함수를 호출하여 값을 연산
👉 2번째 매개변수의 배열은 값 변경의 유무를 감지하는 부분으로 반드시! 인식해야 할 값을 넣어줘야 함.

---

☑️ Naver Movie API 사용하기

7.27(수) 저녁에 React 프로젝트 안에서 네이버 영화 API를 사용해보는 연습을 했다. 미루다가 이제야 기록하는 나의 API 사용기 ٩( ᐛ )و 처음 1시간정도는 API를 어떻게 사용해야 할지 몰라서 우왕좌왕 코드를 짜지도 못하겠어서 구글링해서 사용법 좀 찾아보다가 이것저것 적용해보고 2시간 넘게 끄적이다가 데이터 받아오는 것까지 성공!✨
추후에 시간 있을 때 화면 검색시 영화 포스터랑 영화 정보가 출력되도록 추가 구현해보기 🙌

1. NAVER Developers에서 애플리케이션 등록(API 이용신청)하기

   
   • 등록을 마치면 애플리케이션 정보에서 Client ID와 Client Secret 확인하기!

2. axios를 사용하여 API를 GET 요청하기

   import React, { useEffect, useState } from "react";
   import axios from "axios";
   
   function Home() {
     const [data, setData] = useState([]);
     const clientID = "my unique clientID";
     const clientSecret = "my unique clientSecret";
   
     const apiData = async () => {
       await axios
         .get("/v1/search/movie.json", {
           params: {
             query: "짱구", // 검색하고자 하는 키워드
             display: 10, // 몇 개의 data를 출력할건지
           },
           headers: {
             "X-Naver-Client-Id": clientID,
             "X-Naver-Client-Secret": clientSecret,
           },
         })
         .then((res) => {
           console.log(res.data.items);
           setData(res.data.items);
         })
         .catch((error) => {
           console.log(error);
         });
     };
   
     useEffect(() => {
       apiData();
     }, []);
   
     return (
       <>
         <h1>영화 검색</h1>
       </>
     );
   }
   
   export default Home;

   ✋ 여기까지 과정을 마치고 나니까 CORS 에러가 발생했다. console의 error를 확인해보면 url이 http://localhost:3000/v1/search/movie.json 요기로 GET 요청이 간 것을 확인할 수 있다. 이를 해결하기 위해 따로 proxy 설정을 해줘야 한다.

3. Proxy 설정해주기
   a. package.json에서 proxy 설정

   // package.json
    "proxy": "https://openapi.naver.com"

   처음에 이 방법을 적용해봤는데 여전히 에러가 해결되지 않았음..ㅜ
   그래서 다른 방법 시도..!

   b. http-proxy-middleware 모듈 설치하고 setupProxy.js 파일 생성

   # 먼저 모듈을 설치한다
    $ npm install http-proxy-middleware

   // setupProxy.js
    const { createProxyMiddleware } = require("http-proxy-middleware");
    
    module.exports = function (app) {
      app.use(
        createProxyMiddleware("/api", {
          target: "https://openapi.naver.com",
          changeOrigin: true,
        })
      );
    };

   
   이렇게 하니까 CORS 에러가 사라지고 데이터가 출력됨!!!

   👻 나중에 받아온 데이터를 활용해서 웹 사이트에 출력하고 검색되도록 추가 구현하기