🚩 React

firebase 이용하여 데이터 저장(미완성)

📝 설명

• firebase를 사용하여 내용을 입력받아 출력할 수 있도록 코드 수정 예정

✒️ 사용법

입력

App.js

import React, { useCallback, useEffect, useState } from "react";
import "./App.scss";
import MovieList from "./components/MovieList";
import AddMovie from "./components/AddMovie";

function App() {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null); // 에러 없는 상태

  /*
  // 비동기⭕
  function fetchMovieHandler() {
    fetch("https://swapi.dev/api/films/")
      .then((response) => {
        return response.json(); // json 대신 우리가 사용할 수 있는 자바스크립트 형태로 변환
      })
      .then((data) => {
        const transformedMovies = data.results.map((movieData) => {
          return {
            id: movieData.episode_id,
            title: movieData.title,
            openingText: movieData.opening_crawl,
            releaseDate: movieData.release_date,
            // 필요한 4개만 새로운 객체로 반환
          };
        });

        setMovies(transformedMovies);
      });
  }
  */

  // 비동기❌ (async, await)
  /*
  async function fetchMovieHandler() {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch("https://swapi.dev/api/films/");

      if (!response.ok) {
        throw new Error("에러 발생"); // 뒷부분 코드 진행x
      }

      const data = await response.json();
      const transformedMovies = data.results.map((movieData) => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
          // 필요한 4개만 새로운 객체로 반환
        };
      });
      setMovies(transformedMovies);

    } catch(error) {
      setError(error.message);
    }
    setIsLoading(false);
  }
  */

  // const 형식으로 변경
  const fetchMovieHandler = useCallback(async () => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch(
        "https://movietest-34408-default-rtdb.asia-southeast1.firebasedatabase.app/movie.json"
      );

      if (!response.ok) {
        throw new Error("에러 발생"); // 뒷부분 코드 진행x
      }

      const data = await response.json();
      const transformedMovies = data.results.map((movieData) => {
        return {
          id: movieData.episode_id,
          title: movieData.title,
          openingText: movieData.opening_crawl,
          releaseDate: movieData.release_date,
          // 필요한 4개만 새로운 객체로 반환
        };
      });
      setMovies(transformedMovies);
    } catch (error) {
      setError(error.message);
    }
    setIsLoading(false);
  }, []); // [] - 화면 열릴 때 처음에만 작동됨

  // fetchMovieHandler 함수가 호출될 때도 발생.
  // 함수는 외부에서 바뀔 수 있음(ex. 변수 받아옴) -> 무한루프 가능성 있음
  useEffect(() => {
    fetchMovieHandler();
  }, [fetchMovieHandler]);
  // useCallback(()=>{}, [])

  // 추가하는 함수
  const addMovieHandler = (item) => {
    // console.log(item);
    fetch(
      "https://movietest-34408-default-rtdb.asia-southeast1.firebasedatabase.app/movie.json",
      {
        method: "POST", // firebase에 리소스 만듦
        body: JSON.stringify(item), // js 객체를 json으로 변환
        // headers: { "Content-Type": "application/json" }, // firebase에서는 생략 가능, API에서 어떤 컨텐츠가 전달되는지 알 수 있게 해줌
      }
    );
  };

  let content = <p>NO MOVIES</p>;
  if (isLoading) {
    content = <p>LOADING...</p>;
  }
  if (movies.length !== 0) {
    content = <MovieList movie={movies} />;
  }
  if (error) {
    content = <p>{error}</p>;
  }

  return (
    <main>
      <section>
        <AddMovie onAddMovie={addMovieHandler} />
      </section>

      <section>
        <button onClick={fetchMovieHandler}>Fetch Movie</button>
      </section>

      <section>
        {content}
        {/* isLoading이 false일 때
        {!isLoading && <MovieList movie={movies} />}
        {!isLoading && movies.length === 0 && <p>NO MOVIES</p>}
        {isLoading && <p>LOADING...</p>} */}
      </section>
    </main>
  );
}

export default App;

MovieList.jsx

import React from "react";
import Movie from "./Movie";

const MovieList = (props) => {
  return (
    // map()을 사용하여 화면에 출력
    <ul>
      {props.movie.map((item) => (
        <Movie
          key={item.id}
          id={item.id}
          title={item.title}
          releaseDate={item.releaseDate}
          openingText={item.openingText}
        />
      ))}
    </ul>
  );
};

export default MovieList;

Movie.jsx

import React from "react";

const Movie = (props) => {
  return (
    <li className="movie">
      <h2>{props.title}</h2>
      <h3>{props.releaseDate}</h3>
      <p>{props.openingText}</p>
    </li>
  );
};

export default Movie;

AddMovie.jsx

import React, { useRef } from "react";

const AddMovie = (props) => {
  const titleRef = useRef("");
  const textRef = useRef("");
  const dataRef = useRef("");

  const submitHandler = (e) => {
    e.preventDefault();

    const movie = {
      title: titleRef.current.value,
      openingText: textRef.current.value,
      releaseDate: dataRef.current.value,
    };
    props.onAddMovie(movie);
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="control">
        <label htmlFor="title">title</label>
        <input type="text" id="title" ref={titleRef} />
      </div>

      <div className="control">
        <label htmlFor="text">text</label>
        <textarea id="text" rows="5" ref={textRef}></textarea>
      </div>

      <div className="control">
        <label htmlFor="date">date</label>
        <input type="text" id="date" ref={dataRef} />
      </div>
      <button>Add Movie</button>
    </form>
  );
};

export default AddMovie;

출력

• 이미지로 대체
  
  

🔗 참고 링크 & 도움이 되는 링크

• chrome serviceworker
• firebase

---

🚩 PWA & Service Worker API

Progressive Web Apps

📝 설명

• 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱

Service Worker API

📝 설명

• 웹 서비스에서도 백그라운드 동기화, 푸시 알림 등이 가능하도록 지원해주는 도구
• 브라우저가 백그라운드에서 실행하는 스크립트
• 웹페이지와 별개로 작동
• 자바스크립트 파일의 형태를 가짐
• 캐시 저장
• 이미지는 192, 512px

### ✒️ 사용법 js파일을 만들어서 index에 적용시킨다.

npm으로 설치 된 pwa는 npm run dev로 실행

sw-precache를 사용해서 캐시 저장하기(오프라인에서도 접속 가능)

✒️ 사용법

리소스에 사전 캐시 가능한 모듈을 만들어 주는 라이브러리

1. sw-precache-config.js 파일 생성 or sw-config.js 파일 생성

module.exports = {
  staticFileGlobs: [
    "index.html",
    "css/*.css",
    "img/**.*",
    "js/**/*"
  ],
};

2. 설정 적용
   $ sw-precache --config sw-config.js

-> service-worker.js 파일이 생김

• html 문서에서 스크립트 부분 sw.js 대신 이거로 변경

입력

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- apple -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- title -->
    <title>KAKAO - 로그인</title>
    <!-- css -->
    <link rel="stylesheet" href="./css/style.css" />
    <!-- 파비콘 -->
    <link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon" />
    <!-- manifest -->
    <link rel="manifest" href="manifest.json" />
    <!-- js -->
    <script src="./js/main.js"></script>
    <script>
      if("serviceWorker" in navigator) {
        // 브라우저에 서비스워커가 있을 때 (지원여부)
        navigator.serviceWorker.register("service-worker.js") // 비동기
        .then((success)=>{
          console.log("servieceWorker 설치에 성공했습니다", success);
        })
      }
    </script>
  </head>
  <body>
    <div class="login_container">
      <div class="login">
        <h1 class="login_logo">카카오톡</h1>

        <form action="./chatList.html" class="login_form">
          <input
            type="text"
            class="login_form_id"
            placeholder="카카오계정(이메일 또는 전화번호)"
          />
          <input type="password" class="login_form_pw" placeholder="비밀번호" />
          <input type="submit" class="login_form_btn" value="로그인" />
          <input type="checkbox" class="login_form_check" id="check" />
          <label for="check">자동로그인</label>
        </form>

        <p class="login_account">
          <a href="">카카오 계정 찾기</a>
          <span>|</span>
          <a href="">비밀번호 재설정</a>
        </p>
      </div>
    </div>
  </body>
</html>

sw-config.js

module.exports = {
  staticFileGlobs: [
    "index.html",
    "css/*.css",
    "img/**.*",
    "js/**.*"
  ],
};

출력

• 이미지로 대체

🔗 참고 링크 & 도움이 되는 링크

• MDN PWA
• sw-precache

---

작성중