로컬에서 정상적으로 작동하는 서비스가 vercel 배포시 invelid api key 에러가 발생했다.

❓왜 그럴까?

API KEY를 .env 파일에서 보관하고 gitignore 에 추가했다. 이같은 이유는 보완상의 이유로 github에 공유되는 것을 막기 위해서였다. 그렇다면... github repository와 연결된 vercel 도 .env이 공유되지 않은 것이 아닐까?

🧑‍🚒 해결방법

How do I add environment variables to my Vercel project?

Environment Variables UI

You can add Environment Variables to your site through Project Settings. Values are encrypted at rest and permission to view values can be restricted based on your role. You can also choose a specific Git branch to set Environment Variables for with the Preview environment.

1. Invalid API key 에러 발생 프로젝트 선택
2. 프로젝트 상단, Settings => Environment Variables
3. .env에서 작성한 API KEY 변수와 API KEY를 각각 name과 value에 입력한다.
4. 배포가 된 상태에서 환경변수 설정을 했으므로, 재배포를 해야한다.

배운점

1. gitignore에 추가된 파일은 Github에 올라가지 않는다!!
2. velcel 배포를 기획했다면, 배포 전, 환경변수 설정을 잊지 말자!

기존 라우팅 아키텍처는 라우팅이 실행 중인 앱 외부의 구성에서 처리되었다. 그러나, React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. 쉽게 말해, 웹 앱에서 동적 라우팅을 구현 할 수 있게 해주는 라이브러리 이다.

React Router Dom의 활용: SPA

리액트는 SPA이기 때문에, index.js 템플릿 파일을 가지고 있다. 이 템플릿 파일에 JS를 이용해서 다른 컴포넌트를 템플릿 파일(index.js)에 추가하므로써, 페이지를 변경시키게 된다.

이때, React Router Dom 라이브러리가 새 컴포넌트로 라우팅 및 탐색을 한 뒤 렌더링하도록 도와주게 된다.

React Router 설정하기

템플릿 파일(src > index.js)의 루트 구성 요소(App 구성 요소)를 BrowserRouter로 래핑한다.

BrowserRouter 는 HTML5 History API를 사용하여 UI를 URL과 동기화된 상태로 유지해준다. ex) URL이 localhost:3000/home 일 때, Home 컴포넌트(UI)를 동기화 상태로 유지하고 싶을 때, BrowserRouter 가 이를 유지시켜주는 것이다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  /* <React.StrictMode>
    <App />
  </React.StrictMode> */
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
reportWebVitals();

여러 컴포넌트 생성 및 라우트 정의하기

Routes

앱에서 생성 될 모든 개별 경로에 대한 컨테이너 및 상위 역할을 담당한다. Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 랜더링 한다.

Route

Route는 단일 경로를 만드는 데 사용되며, 두 가지 속성을 가진다.

1. path : 매칭 후 렌더링 할 컴포넌트의 url 경로를 지정한다. 이 경로의 이름은 자유롭게 지정할 수 있다.
2. element : 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.

Link

HTML 의 a요소와 유사하다. Link 컴포넌트의 to 속성은 이동할 컴포넌트의 경로(path)를 지정한다.

function Home() {
    return (
        <div>
            <Link to="about">About 이동</Link>
        </div>
    )
}

Link 컴포넌트 동작 순서

1. About 이동 클릭
2. 기존 localhost:3000/home 에서 localhost:3000/about 으로 경로 변경
3. BrowserRouter 에서 History API를 사용하여 About 컴포넌트(UI)를 about 경로(URL)와 동기화 상태 유지

Rouet와 Link의 차이

Route는 요청된 URL 에 따라 매칭된 컴포넌트를 렌더링 시키는 것이라고 이해하면 된다. 그러나, Link 컴포넌트는 지정된 URL로 이동시키는 역할만 수행한다. 즉, Link 태그의 URL로 페이지 주소로 이동 할 뿐, 해당 주소에 맞는 UI(컴포넌트)를 새로 불러오지 않는다.

Route : URL에 맞게 컴포넌트 렌더링 Link : URL 변경

Row 컴포넌트 내에서 영화를 클릭하면 해당 영화의 상세정보 페이지를 모달로 노출시키고자 한다. 이를 위해, 첫번째로 Row 컴포넌트에서 해야할 작업(state, event handler)과 두번째, Row 컴포넌트에서 props로 전달 받은 영화 정보를 토대로 모달 컴포넌트의 구조를 작성 해야하는지 살펴보겠다.

Row 컴포넌트 사전 작업

• State 생성
  1. 모달 활성화 유무를 나타내는 state를 준비한다.

     const [modalOpen, setModalOpen] = useState(false);

  2. 모달 활성화 state가 변경되면, 모달 컴포넌트에 props로 전달 할 상세 영화 정보 state를 준비한다. 이때, 콘솔로 확인하여 사용할 수 있는 속성들이 무엇이 있는지 확인해야한다.
  • backdrop_path, title, overview, name?, release_date?, first_air_date, vote_average 속성을 사용할 것이다.

    const [movieSelected, setMovieSelected] = useState({});

    
• Click Event Handler
  1. RowPosters 디자인 컴포넌트의 img El에서 movieSelected state에 담을 영화 정보는 가지고 있으므로, handler를 img el에 적용시킨다.
  2. 해당 이벤트 헨들러는 img El 에 클릭 이벤트가 발생하면, 모달 컴포넌트를 활성화 시키고, 클릭 이벤트가 발생한 img el 의 상세 영화 정보를 state로 관리 시키는 기능을 담당한다.

     // src > components > Row.js
     const [modalOpen, setModalOpen] = useState(false);
     const [movieSelected, setMovieSelected] = useState({});
     ...
     const ModalhadleClick = (movie) => {
     setModalOpen(true);
     setMovieSelected(movie);
     console.log("handledMovie", movie);
     };
     ...
     ...
     <RowPosters id={id}>
        {movies.map((movie) => (
          <img
            key={movie.id}
            className="row__poster"
            src={`https://image.tmdb.org/t/p/original/
                 ${movie.backdrop_path}`}
            alt={movie.name}
            onClick={() => ModalhadleClick(movie)}
          />
        ))}
     </RowPosters>

MovieModal 컴포넌트로 Props 전달하기

1. row컴포넌트 내에 img el를 클릭 했을 때, 다음과 같은 과정이 수행된다. 1) onClick 이벤트 발생하면서, movie state를 인자로 전달받은 ModalhadleClick 함수가 호출된다. 2) ModalhadleClick 함수가 호출되면서, 다음 두 개의 state를 변경시킨다.

   • setModalOpen(true);
   • setMovieSelected(movie);

   3) modalOpen state가 true일 때, MovieModal 컴포넌트가 마운팅 되도록 설정한다.

  {modalOpen && ( <MovieModal />)}

4) MovieModal 컴포넌트에 필요한 아래 두가지 props를 전달한다. * 모달을 비활성화 할 것을 감안하여, setModalOpen를 props로 전달한다.
* 모달에서 사용할 movieSelected의 속성을 사용하기 위해, movieSelected의 속성들을 전개연산자를 사용하여 Props로 전달한다. backdrop_path, title, overview, name?, release_date?, first_air_date, vote_average 속성을 사용할 계획인다. tsx {modalOpen && ( <MovieModal setModalOpen={setModalOpen} {...movieSelected} /> )}

MovieModal 컴포넌트 구조

  import React from "react";
  import { ModalContent, ModalWrapper, Presentation } from "./MovieModal.styled";

  const MovieModal = ({
    backdrop_path,
    title,
    overview,
    name,
    release_date,
    first_air_date,
    vote_average,
    setModalOpen,
  }) => {
    return (
      <Presentation role="presentation">
        <ModalWrapper>
          <div className="modal">
            <span className="modal__close" onClick={() => setModalOpen(false)}>
              X
            </span>

            <img
              className="modal__poster-img"
              src={`https://image.tmdb.org/t/p/original/${backdrop_path}`}
              alt="modal-img"
            />

            <ModalContent>
              <p className="modal__details">
                <span className="modal__user_perc">100% for you</span>{" "}
                {/* 개봉일자 혹은 첫 상영일자 */}
                {release_date ? release_date : first_air_date}
              </p>

              <h2 className="modal__title">{title ? title : name}</h2>
              <p className="modal__overview">평점: {vote_average}</p>
              <p className="modal__overview">{overview}</p>
            </ModalContent>
          </div>
        </ModalWrapper>
      </Presentation>
    );
  };

  export default MovieModal;

1. 태마 별로 영화를 나열 하기 위한 Row Component를 설계한다. 1) trending Now 2) Top Rated 3) Action Movies 4) Comedy Movies
2. 모든 Row Component 의 UI는 같으므로, 재사용 하도록 만든다.
3. 각 Row Component에 맞는 데이터를 사용하기 위해, props 객체에 title, id, fetchURL 을 전달한다.

   // src > App.js
   import { Container, GlobalStyle } from "./App.styled.js";
   import Banner from "./components/Banner.js";
   import Nav from "./components/Nav";
   import Category from "./components/Category";
   import Row from "./components/Row";
   import requests from "./api/requests.js";
   function App() {
   return (
    <>
      <GlobalStyle />
      <Container>
        <Nav />
        <Banner />
        <Category />
        <Row 
          title="Trending Now" 
          id="TN" fetchURL={requests.fetchTrending} />
        <Row 
          title="Top Rated" 
          id="TR" fetchURL={requests.fetchTopRated} />
        <Row
          title="Action Movies"
          id="AM"
          fetchURL={requests.fetchActionMovies}
        />
        <Row
          title="Comedy Movies"
          id="CM"
          fetchURL={requests.fetchComedyMovies}
        />
      </Container>
    </>
   );
   }
   

export default App;

### 문제 발생
> React Hook useEffect has a missing dependency: 'fecthMovieData'. Either include it or remove the dependency array.

### 원인 확인
> [useEffect가 하는 일은 무엇일까요? useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. ](https://ko.reactjs.org/docs/hooks-effect.html)

### 1. React에서 컴포넌트 렌더링 시 어떤 일을 수행하는가? 
> **컴포넌트가 랜더링 될 때, 리액트는 컴포넌트 내 함수를 기억하고 DOM 없데이트를 수행 한 이후 호출하게 된다.**

* 컴포넌트 랜더링 과정을 이해하지 못했기 때문에 나타난 경고문이다.
이는 불필요한 함수의 재생성으로써, 필요시에만 재생성 될 수 있도록 메모이제이션을 해주면 해결된다.
### 해결 1.
(dependency)으로 설정한다.

1. 컴포넌트가 랜더링 될 때, fetchMovieData의 불필요한 재생성을 막기 위해, useCallbakc의 콜백함수로 fetchMovieData를 전달한다.
2. useCallbakc 이 새로 생성되는 조건은 fetchUrl 가 변경될 때마다 생성되야 하므로, useCallbakc의 dependency 배열에 fetchUrl 를 전달한다.
3. fetchUrl의 변경에 따라, useCallbakc 이 새로 생성되면,  fetchMovieData의 값도 변경된다.
4. fetchMovieData 의 값이 변경될 때마다, useEffect도 변경되어야 하므로, useEffect도 dependency를 fetchMovieData로 정의한다.


* useCallbakc의
```tsx
import React, { useState, useEffect, useCallback } from "react";
import { axiosInstance } from "../api/axios";
import requests from "../api/requests";
const Row = ({ title, id, fetchUrl }) => {
  const [movies, setMovies] = useState([]);
 // 2) fecthMovieData 변경 -> useEffect 호출
  useEffect(() => {
    fecthMovieData();
  }, [fecthMovieData]); /* 'fecthMovieData' was used before it 
  was defined.eslintno-use-before-define */

 // 1) fetchUrl 변경 -> useCallback() -> fecthMovieData 변경
  const fecthMovieData = useCallback(async () => {
    const axiosReq = await axiosInstance.get(fetchUrl);
    console.log("axiosReq", axiosReq);
    setMovies(axiosReq.data.results);
  }, [fetchUrl]);

  return <div>Row</div>;
};

export default Row;

2. 함수 표현식이 호이스팅되어 함수가 아닌, 변수로 인식 됨

• useEffect는 컴포넌트가 랜더링 될 때, 수행하는 side-effect 라는 것을 기억해야한다.
• 이를 이해했다면, 위 코드에서 "'fecthMovieData' was used before it was defined." 경로를 보내주는지 이해할 수 있다.
• 위 로직은 컴포넌트가 랜더링 되고 fecthMovieData 함수를 호출하고 있다.
• 그러나, 호이스팅의 결과로 fecthMovieData 는 함수가 아닌 변수로 인식되어, fecthMovieData 가 정의되기 전에 사용되었다고 경고하는 것이다.

  해결 2.

• 이를 해결하기 위해, 컴포넌트의 랜더링 과정에 맞게, fecthMovieData 함수를 useEffect 상단에 위치 시켜, side-effect를 가능하게 했다.

import React, { useState, useEffect, useCallback } from "react";
import { axiosInstance } from "../api/axios";
import requests from "../api/requests";
const Row = ({ title, id, fetchUrl }) => {
  const [movies, setMovies] = useState([]);

  const fecthMovieData = useCallback(async () => {
    const axiosReq = await axiosInstance.get(fetchUrl);
    console.log("axiosReq", axiosReq);
    setMovies(axiosReq.data.results);
  }, [fetchUrl]);

  useEffect(() => {
    fecthMovieData();
  }, [fecthMovieData]);

  return <div>Row</div>;
};

export default Row;

1. 배너 컴포넌트와 margin-top: 30px
2. grid로 배치하여, 5개의 컨텐츠가 25px 간격으로 동일한 비율로 공간을 차지하게 한다.
3. 768px 이하로 크기가 줄어들 경우, 1개의 컨텐츠만 공간을 차지하게 한다.

export const Container = styled.div`
  margin-top: 30px;
  padding: 30px 0px 26px;
  display: grid;
  gap: 25px
  grid-template-columns: repeat(5, 1fr);

  @media (max-width: 768px) {
    grid-template-columns: repeat(1, 1fr);
  }
`;

Wrap Styled Component에 스타일링을 해서 크기를 맞춰준다.

Wrap Styled Component

1. Wrap Styled Component는 다음과 같이 구성되어 있다.

      <Wrap>
        <img src="/images/viewers-disney.png" alt="disney" />
        <video autoPlay loop muted>
          <source src="/videos/disney.mp4" type="video/mp4"></source>
        </video>
      </Wrap>

2. 위와 같이 구성된 Wrap Styled Component는 총 5개로 위치한다.

3. 이때, 5개의 Wrap Styled Component는 Container Styled Component 에 의해, 같은 비율로 25px 간격으로 Category Component의 공간을 차지하게 된다.

4. 따라서, img element를

   1. 부모 컴포넌트인 Wrap component 내에서 img element를 옆으로 배치하기 위해 1) display: block, 2) position: absolute 를 설정한다.
   2. height은 Wrap component의 100% 차지하게 한다.
   3. img 소스는 동일한 크기를 가지므로, object-fit 속성을 사용하여, img 소스의 크기에 맞춰 가득 채운다.

5. video element는

   1. img element와 동일하게 Wrap component의 100% 크기를 할당한다.

   2. 부모 컴포넌트인 Wrap component를 기준으로 position 을 잡는다.

   3. img element와 위치를 맞추기 위해 top: 0

   4. 마지막으로, video element의 기본 값은 img element와 겹쳐있되, 투명해야한다.

   5. Wrap component가 hover 되었을 때, video element의 불투명하게 된다.

      

문제 발생과 해결

1. 의도대로 디자인이되었다면 위 영상처럼 정상적으로 움직여야 한다.
2. 그러나, 의도대로 되지 않고, 다음과 같은 문제가 발생했다. 1) img element 가 Wrap Styled Component 내 고정되어 있지 않고, App Component 안에 있는 Container Styled Component 에 위치 하고 있음이 확인됐다. 2) 원인은 img element가 부모 컴포넌트인 Wrap Styled Component 를 기준으로 positions을 잡았으나, 정작, 부모 컴포넌트인 Wrap Styled Component 에 position 을 실수로 잡지 않았기 때문이었다. 3) 그렇기 때문에, img element 의 position은 Category Component의 상위 Component인 Container Styled Component가 기준이 된 것이다. 4) 따라서, Wrap Styled Component의 position: relative를 추가하여, 이 문제를 해결할 수 있었다.

1. the movie DB API로 받아온 영화 데이터 중 비디오 데이터를 배너 컴포넌트에서 재생하려고 한다.
2. 비디오 데이터가 있을 경우, 배너에 Play 버튼이 활성화 된다.
3. 해당 버튼을 클릭하여, 비디오를 재생한다.

방법

1. Play 버튼을 클릭하면, 기존의 배너 React Element 랜더링하지 않고, 비디오 React Element가 랜더링되도록 조건문을 설정한다.
2. 조건문은 Play 버튼에 클릭이벤트가 발생했는지 여부를 파단한다.
3. 따라서, Play 버튼의 클릭 이벤트 활성화 유무를 상태로 관리해야한다.

적용

import React, { useEffect, useState } from "react";
import { fetchData } from "../api/axios";
import {
  HeaderBanner,
  BannerContents,
  BannerTitle,
  BannerButtons,
  BannerButton,
  BannerDescription,
  BannerFadeBottom,
} from "./Banner.styled";

const Banner = () => {
  const [movie, setMovie] = useState([]);
  /* play 버튼 클릭 여부 상태 */
  const [isClicked, setClicked] = useState(false); 
  useEffect(() => {
    fetchData(setMovie);
  }, []);

  // Description 컴포넌트 내
  // 설명글이 100자 이상이면, 100자 이전 까지 자른 후, 100자부터 "..."로 마무리한다.
  const truncatOverview = (str, n) => {
    return str?.length > n ? str.substring(0, n) + "..." : str;
  };

  const playHandle = (e) => setClicked(true);
  /* play 버튼이 클릭되었다면(true) video string react element 랜더링 */
  if (isClicked) {
    console.log(isClicked);
    return <div>video!</div>;
  }

  return (
    <HeaderBanner
      movie={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
    >
      <BannerContents>
        <BannerTitle>
          {movie.title || movie.name || movie.original_name}
        </BannerTitle>
        <BannerButtons>
          {movie?.videos?.results[0]?.key && (
            <BannerButton play onClick={playHandle}>
              Play
            </BannerButton>
          )}
        </BannerButtons>
        <BannerDescription>
          {truncatOverview(movie?.overview, 100)}
        </BannerDescription>
      </BannerContents>
      <BannerFadeBottom />
    </HeaderBanner>
  );
};

export default Banner;

결과1.

원하는 결과를 얻을 수 있었다. 이제 video react element를 만들면 된다.

video react element

1. styled component를 사용한 UI 생성
   • Container
     1. 배치 : 정 가운데로 배치
     2. 쌓임순서 : 수직 방향으로 쌓아서, 비디오 -> X 버튼 순으로 쌓이도록 설정
        3. 크기 : 전체 사용

           export const Container = styled.div`
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           width: 100%; /* App.styled.js 의 Container가 main tag이므로 참고 */
           height: 100vh; /* App.styled.js 의 Container 참고 */
           `;
           
           

* HomContainer 
    1. 크기 : Continer 전체 사용
    ```tsx
    export const HomeContainer = styled.div`
      width: 100%;
      height: 100%;
    `;

* Iframe
  ```tsx
  export const Iframe = styled.iframe`
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.65;
    border: none;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  `;
    `

학습 : Iframe

Iframe : The Inline Frame element The "iframe" HTML element represents a nested browsing context, embedding another HTML page into the current one.

Iframe은 inline frame의 약자이며, 효과적으로 다른 HTML페이지를 현재 페이지에 포함시킬 때 사용할 수 있다. 따라서, Iframe 요소를 사용하면, 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불어와서 삽입 할 수 있다.

Iframe 적용하기

• 랜더링 할 video는 유튜브를 재생하는 것이므로, Iframe 요소를 사용하는 것이 적절하다.

유튜브 embedded

 <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/k_3E2y5l_rw"
    /* src="https://www.youtube.com/embed/{videoID}?option" */
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>;

Iframe 컴포넌트에 유튜브 연결하기

1. axios 인스턴스(src > api > axios.js > fetchData() )를 통해 전달 받은 랜덤한 영화 데이터의 key를 확인한다.
2. movie state에 axios 인스턴스의 리턴 값이 관리 된다.
3. 따라서, 콘솔 확인 결과, key 값은 movie.videos.results[0].key를 통해 확인할 수 있다.

 if (isClicked) {
    console.log(isClicked);
    return (
      <>
        <Container>
          <HomeContainer>
            <Iframe
              src={`https://www.youtube.com/embed/
                ${movie.videos.results[0].key}?
                controls=0&autoplay=1&loop=1&mute=1&playlist=
                ${movie.videos.results[0].key}`}
              width="640"
              height="360"
              frameborder="0"
              allow="autoplay; fullscreen"
            ></Iframe>
          </HomeContainer>
        </Container>
        <button onClick={() => setClicked(false)}>X</button>
      </>
    );
  }

문제 발생

1. styled-component 에서 background-image 에 외부 url을 전달 할 때 다음과 같은 에러가 발생했다.

   import styled from "styled-components";
   export const HeaderBanner = styled.header`
   background-image: ${(props) =>
    URL(`https:/image.tmdb.org/t/p/original/${props.movie.backdrop_path}`)};
   background-position: "top center";
   background-size: cover;
   `;

   TypeError: Failed to construct 'URL': Please use the 'new' operator, this DOM object constructor cannot be called as a function

해결

1. 오류 메세지를 자세하게 읽지 않고, stackoverflow를 참고하여 답을 찾았다.
2. 그러나, 이미 오류 메세지에서 new 키워드를 사용할 것을 제안하고 있었다.
3. 이번에도, 오류 메세지를 잘 봐야 함을 다시 깨달았다.

   import styled from "styled-components";
   export const HeaderBanner = styled.header`
   background-image: ${(props) =>
    new URL(
      `https:/image.tmdb.org/t/p/original/${props.movie.backdrop_path}`)};
   background-position: "top center";
   background-size: cover;
   `;
   

### 해결책이 아니었음!
new URL을 사용하면 URL 객체가 생성되므로, 원하는 외부 이미지 url을 가져와 배경이미지로 사용할 수 없었음

### 해결 방법
styled-component 에 props로 외부 이미지 url을 내려 보냄으로써 해결했다.

```tsx
// src > components > Banner.js 
return (
    <HeaderBanner
   movie={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
    >

// src > components > Banner.styled.js 
import styled from "styled-components";

export const HeaderBanner = styled.header`
  background-image: url(${(props) => props.movie});
  background-position: top center;
  background-size: cover;
`;

1. Banner 컴포넌트에서 배경 이미지를 사용하려고 한다.
2. 사용될 이미지 소스는 The Movie DB API 에서 받은 데이터를 사용할 것이다.
3. API 요청을 위한 Axios 인스턴스를 생성하여 재사용성을 높이려 한다.
4. Banner 컴포넌트가 랜더링 될 때, Axios 인스턴스가 실행되어야 한다.

방법

1. useEffect를 사용하여, 컴포넌트가 랜더링 됨과 동시에 aixos 인스턴스를 실행하도록 구현한다.

   useEffec(() => {
   /*Axios 인스턴스 : */fetchData() }, [])

2. api 폴더 내, axios.js에서 axios 인스턴스를 만들고, 이를 banner 컴포넌트에서 import 하여 사용한다.

   // src > api > axios.js 
   

import axios from "axios"; import requests from "./requests";

export const instance = axios.create({ baseURL: "https://api.themoviedb.org/3/" /* 중복 URL */, params: { api_key: "a38fa376de46b95eb6b7c9eff2b1116c", language: "ko-KR", }, });

export const fetchData = () => { // 현재 상영 중인 영화 정보 가져오기 const request = instance.get(requests.fetchNowPlaying); // request 확인하기 console.log("request :", request); };

3. Banner 컴포넌트를 App 컴포넌트에 import 하여 원하는 데이터가 들어왔는지 확인한다.

### 문제: "다시 확인! 비동기 처리의 필요성"
1. App 컴포넌트를 랜더링 하였으나, 콘솔창에는 다음 과 같은 결과가 나왔다.

request : Promise {}

### 원인 : 동기적 데이터 흐름
1. 의도는 Axios 인스턴스 요청으로 서버에서 Response가 도착한 뒤 결과값을 콘솔로 확인하려 했다.
2. 그러나, 실제로는 Response가 오지 않은 상태에서 결과 값을 콘솔로 확인 했기 때문에, pending 이 된 것이다.
이는 아래 이미지를 통해 이해할 수 있다. ![](https://velog.velcdn.com/images/sg_yksv77/post/9dd99852-448c-477d-a1f4-00157b618a0e/image.png)

### 해결 : 비동기 적용
1. 위 문제는 Axios 요청과 응답을 동기적으로 진행했기 때문에 발생한 사소한 문제이다.
2. 이를 해결하기 위해, 의도대로 Response 가 도착한 뒤 호출할 수 있게 비동기로 전환하면 간단히 해결할 수 있다.
3. 이때, fetch를 사용해도 되지만, then 체이닝이나, 결과값을 JSON으로 전환해야하는 번거로움이 있으므로, Async & Await를 사용하여 간결하게 작성했다.
```tsx
export const fetchData = async () => {
  // 현재 상영 중인 영화 정보 가져오기
  const request = await instance.get(requests.fetchNowPlaying);
  // request 확인하기
  console.log("request :", request);
};

두번째 목적

1. 호출된 영화 정보들 중 랜덤으로 영화 하나의 ID를 가져오려고 한다.
2. 랜덤으로 가져온 영화 ID의 상세 정보(비디오 정보 포함)를 가져온다.

방법

1. 랜덤한 값의 범위는 전달 받은 영화들의 개수 만큼 설정한다.
2. 이를 구현하기 위해, Math.floor와 Math.random() 을 사용한다.

   Math.floor(Math.random() * request.data.results.length)

3. 위와 같이 얻게 될 랜덤 값을 전달받은 영화 데이터의 인덱스로 사용하여, 원하는 영화 ID를 가져온다.

   export const fetchData = async (setState) => {
   // 현재 상영 중인 영화 정보 가져오기
   const requestMovieData = 
        await axiosInstance.get(requests.fetchNowPlaying);
   // request 확인하기
   console.log("requestMovieData :", requestMovieData);
   const movieId =
    requestMovieData.data.results[
      Math.floor(Math.random() * requestMovieData.data.results.length)
    ].id;
   console.log("movieId :", movieId);
   

![](https://velog.velcdn.com/images/sg_yksv77/post/2039708f-7b00-433f-b770-a754114d3c55/image.png)

4. 랜덤 한 영화 ID를 얻었으므로, 이를 사용하여, 해당 영화 ID의 상세 정보를 받아 온다.
5. 이때, 비디오 정보도 포함해서 받아 와야 한다.
이는 [The Movie API Append To Response](https://developers.themoviedb.org/3/getting-started/append-to-response)를 참고해서 진행했다.
![](https://velog.velcdn.com/images/sg_yksv77/post/07f6ddeb-b018-4df8-bbe4-22e906e6e8d1/image.png)
```tsx
export const fetchData = async (setState) => {
  // 현재 상영 중인 영화 정보 가져오기
  const requestMovieData = await axiosInstance.get(requests.fetchNowPlaying);
  // request 확인하기
  console.log("requestMovieData :", requestMovieData);
  const movieId =
    requestMovieData.data.results[
      Math.floor(Math.random() * requestMovieData.data.results.length)
    ].id;
  console.log("movieId :", movieId);

  const { data: movieDetail } = 
        await axiosInstance.get(`movie/${movieId}`, {
    params: { append_to_response: "videos" },
  });
};

문제 발생 : 스코프에 막힌 상태 변경

1. 영화 상세 정보를 가져와 movieDetail 에 담아놓았다.

2. 상세 정보를 가져오는 fetchData 인스턴스를 Banner 컴포넌트에서 사용하여, 영화 정보 상태를 변경하려고 했다.

3. 그러나, 인스턴스 내에서 가져온 영화 상세 정보 데이터는 인스턴스를 import한 Banner 컴포넌트에서 사용하려 할 때, 스코프에 막혀 데이터를 인용할 수 없는 문제가 발생했다.

4. 그런데, 이는 조금만 생각하면 너무 간단하게 풀리는 문제였다.

5. fetchData 인스턴스의 매개변수로 컴포넌트가 사용할 State를 전달받으면 되는 문제였다.

6. 이렇게하면, 필요한 movieDetail가 스코프 내에서 Banner 컴포넌트의 setMovie에 인용될 수 있게 된다.

   // src > api > axios.js
   export const fetchData = async (setState) => {
   // 현재 상영 중인 영화 정보 가져오기
   const requestMovieData = 
        await axiosInstance.get(requests.fetchNowPlaying);
   // request 확인하기
   console.log("requestMovieData :", requestMovieData);
   const movieId =
    requestMovieData.data.results[
      Math.floor(Math.random() * requestMovieData.data.results.length)
    ].id;
   console.log("movieId :", movieId);
   
   const { data: movieDetail } = 
        await axiosInstance.get(`movie/${movieId}`, {
    params: { append_to_response: "videos" },
   });
   setState(movieDetail);
   };

   // src > components > Banner.js
   import React, { useEffect, useState } from "react";
   import { fetchData } from "../api/axios";
   

const Banner = () => { const [movie, setMovie] = useState([]); useEffect(() => { fetchData(setMovie); }, []); return

export default Banner;

```

import { Container } from "./App.styled.js";
import Nav from "./components/Nav";
function App() {
  return (
      <Container>
        <Nav />
      </Container>
  );
}

export default App;

• App Component에 전역 스타일링을 다음 과 같이 하려고 한다.

  body {
    background-color: #040714;
    color: #f9f9f9;
    font-family: Avenir-Roman, sans-serif;
    margin: 0;
    padding: 0;
  }
  a {
    color: #f9f9f9;
    text-decoration: none;
  }

문제 발생

• Styled Component 에서 전역 스타일링을 하기 위한 방법으로 새로운 Styled Component A를 만들어 최 상위 컴포넌트로 만들면 되지 않을까 예상했지만, 권장사항이 아니었다.

  import { Container } from "./App.styled.js";
  import Nav from "./components/Nav";
  function App() {
  return (
    <A>
      <Container>
        <Nav />
      </Container>
    <A/>
  );
  }
  

export default App;

### 문제 해결
1.  컴포넌트 레벨 스타일링 과 애플리케이션 레벨 스타일링 을 구분해야한다.
    * **컴포넌트 레벨 스타일링이란?**
        말 그대로, 개별 컴포넌트 단위로 스타일을 하는 것을 말한다. 
        예를 들어, 위 App Component는 Container, Nav(Nav 컴포넌트 내 NavWrapper, Logo styled component 가 있다.) 컴포넌트는 각각 HTML 엘리먼트를 스타일하고 있다. 
        styled component 는 이렇게 컴포넌트 단위로 적용한 스타일을 외부와 완전히 격리시켜 해당 컴포넌트 내부에서만 유효하도록 제한한다.

     * **애플리케이션 레벨 스타일링이란?**
       간단하게, 모든 컴포넌트에 동일하게 적용되는 스타일을 하는 것을 말한다.
       예를 들어, 브라우저에 상관없이 일괄적인 스타일을 적용하기 위해 사용하는 CSS 정규화나 CSS 초기화를 예로 들수 있다.
       이처럼, 여러 컴포넌트에 걸쳐 통일된 스타일은 Body 엘리먼트에 정의해 사용하기도 한다.

 2. 애플리케이션 레벨 스타일링 방법
 * 애플리케이션 레벨 스타일을 지원하기 위해서 Styled Components는 createGlobalStyle()라는 함수를 제공한다.
 * createGlobalStyle() 함수를 사용하여 의도한 전역 스타일을 적용한다.
```css
import styled, { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  body {
    background-color: #040714;
    color: #f9f9f9;
    font-family: Avenir-Roman, sans-serif;
    margin: 0;
    padding: 0;
  }
  a {
    color: #f9f9f9;
    text-decoration: none;
  }
`

주의 사항!

• createGlobalStyle() 함수로 생성한 전역 스타일 컴포넌트를 애플리케이션의 최 상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 스타일이 적용된다.
• 그러나, 최 상위 컴포넌트로 감싸주면 될 것이라 생각하고, 다음과 같이 작성하였으나, 의도대로 적용되지 않았다.

  import { Container, GlobalStyle } from "./App.styled.js";
  import Nav from "./components/Nav";
  function App() {
  return (
    <GlobalStyle>
      <Container>
        <Nav />
      </Container>
    </GlobalStyle>
  );
  }
  

export default App;

* 이유는, 전역 스타일 컴포넌트 내부로 하위 컴포넌트를 포함시키는 것이 아니라, 최 상위 컴포넌트로 전역 스타일 컴포넌트를 추가해주기만 하면 됐다.
```tsx
import { Container, GlobalStyle } from "./App.styled.js";
import Nav from "./components/Nav";
function App() {
  return (
    <>
      <GlobalStyle />
      <Container>
        <Nav />
      </Container>
    </>
  );
}

export default App;

Styled Components 전역 스타일링 (Global Style)

1. 너비 추가하기

• wrapper를 구현할 때 가장 먼저 결정할 것은 너비이다.
• 보통 1000px - 1300px 사이 값이 일반적이다.

  tip

  화면 크기가 1170px 미만일 경우 가로 스크롤이 발생하므로, max-width로 최대 너비만 사용할 수도 있다.

  .wrapper { max-width : 1170px;}

  2. 중앙 정렬하기

  'margin-left'와 'margin-right'가 모두 'auto'이면 사용되는 값은 동일합니다. 컨테이닝 블록의 가장자리를 기준으로 요소를 가로로 중앙에 배치합니다. 상업기술-CSS사양 재인용

.wrapper {
  max-width: 1170px;
  margin: 0 auto;
}

3. 좌우 패딩

"뷰포트 크기" 가 '래퍼의 최대 너비'보다 작으면, 래퍼의 가장자리가 뷰포트에 고정된다.

wrapper에 좌우 패딩을 추가하면 얻는 이점은, wrapper와 뷰포트 가장 자리에 달라붙는 현상을 방지해 줄 수 있다.

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

4. Display type

관심사 분리에 위배 되므로 권장하지 않는 방법이다.

wrapper는 기본적으로 블록 수준 요소이다.

문제 발생!

이때, wrapper 내부의 콘텐츠를 그리드에 배치해야 할 때, 어떻게 디스플레이 타입을 그리드로 변경할 수 있을까?

방법(권장 X)

그리드 래퍼가 필요한 경우 래퍼 내부에 다른 div 를 추가하면 된다.

<div class="wrapper">
  <div class="featured-news">
    <!-- Elements that needs to be placed in a grid -->
  </div>
</div>

.featured-news {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
}

5. 전체 화면 섹션 내부의 wrapper

뷰포트 내부 모든 컨텐츠의 너비는 wrapper의 너비에 의해 제한 한다.

관심사 분리를 적용하기 위해, 뷰포트와 내부 컨텐츠를 분리하여, 너비를 분리 시켜야 한다. 이때, 내부 컨텐츠를 각각 wrapper 로 관리하여, 배경 색이나, 이미지가 뷰포트 전체 너비를 차지하지 않도록 방지할 수 있다.

1. NavWrapper : Nav 컴포넌트의 최상위 styled component

   • semantic tag : nav

   • position : fiexd 를 작용하여, Nav가 고정되도록 설정

   • z-index : 3 / 네비게이션 컴포넌트가 최상단으로 고정되도록 설정

   • display: flex / Flex 아이템이 자신의 width 만큼 공간을 차지한 채, 가로 방향으로 배치

   • Justify-content : space-between / 3개의 flex item이 가장자리에서 부터 동일한 여유 공간을 가지도록 배치

   • align-items: center / flex item이 가운데 정렬 될 수 있도록 설정(이후 하위 styled component로 상속 됨)

   • letter-spacing : 16px / 텍스트 사이 간격 지정

     export const NavWrapper = styled.nav`
       position: fixed;
       z-index: 3;
       top: 0; /* top,left,right => Nav Component 위치 지정  */
       left: 0;
       right: 0;
       height: 70px;
       background-color: #090b13;
       display: flex; /* flex item 고유 width 만큼 가로로 배치 */
       justify-content: space-between;
       align-items: center;
       padding: 0 36px;
       letter-spacing: 16px;
     `;

     기초 중의 기초!! block element의 특징 : 좌우공간을 모두 차지함 따라서, NavWrapper 에 width 지정 의미 없음!!!

2. Logo

   • semantic tag : a / 로고 클릭시 root 경로로 이동

   • display: inline-block / 이웃한 flex item 과 같은 줄 위치 + width,height 설정

   • img tag : Logo 컴포넌트와 동일한 크기로 설정

       export const Logo = styled.a`
       padding: 0;
       width: 80px;
       margin-top: 4px;
       max-height: 70px;
       font-size: 0;
       display: inline-block; /* 이웃한 flex item과 한 줄에 위치 + width,height 사용 */
     
       img {
         display: block;
         width: 100%; /* img와 Logo 컴포넌트 크기 일치 */
       }
       `;

네비게이션 컴포넌트 스크롤 구현

1. 색상 : 배경색이 #090b13(검은색)이며, 실제 색은 투명하다.

2. 따라서, 일정 구간으로 스크롤 되면, 투명을 유지하다가 다시 배경색으로 덮히는 설정을 하려고 한다.

   방법

   1. [상태 설정] show 라는 state를 만들고, show 가 true 일때, #090b13, false 일때 투명(transparent)하게 색을 전환 한다.
   2. [조건 설정] 색이 변경되는 위치 값을 얻기 위해, window.scrollY 를 적용하여 스크롤 위치가 50을 초과한 구간부터 #090b13, 이하 일때, 투명하게 색을 전환하는 조건을 설정한다.
   3. [이벤트 리스너] 설정된 조건은 "scroll" 이벤트가 발생될 때, 호촐되엉 하므로, window 객체에 이벤트를 등록한다.
   4. [useEffect] 설정된 이벤트 리스너는 Nav 컴포넌트가 렌더링 될 때, 한번 발생해야하며, 더 이상 Nav 컴포넌트를 사용하지 않을 때, 해당 이벤트 리스너가 호출되지 않도록, 지워주는 코드가 필요하다.
   5. [색상 변경] show state가 변경됨에 따라, 색상 전환이 필요하다. 이는 styled component에 props로 전달하면 해결된다.

import React, { useEffect, useState } from "react";
import { Logo, NavWrapper } from "./Nav.styled";

const Nav = () => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 50) {
        setShow(true);
      } else {
        setShow(false);
      }
    });
    return () => {
      /* Nav 컴포넌트를 사용하지 않을 시, 불필요한 이벤트를 제거해줌 */
      window.removeEventListener("scroll", () => {});
    };
  }, []);

  return (
    <NavWrapper show={show}>
      <Logo>
        <img
          alt="Disney Plus Logo"
          src="/images/logo.svg"
          onClick={() => (window.location.href = "/")}
        />
      </Logo>
    </NavWrapper>
  );
};

export default Nav;

추가 학습

CSS 클래스 네이밍 container vs wrapper 차이는 무엇인가?

• container 는 하나 이상의 요소를 포괄하는 개체를 지칭하는 의미를 지닌다.
• wrapper 는 하나의 개체만을 포함하는 것을 뜻한다.

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기

[CSS] wrapper에 대한 간단한 설명

[CSS] 레이아웃 Wrapper 만들기 를 인용함.

위 이미지는 다음 과 같은 코드로 구성되어 있다

    <div class="wrapper">
      <aside>...<aside/>
      <main>...<main/>
    <div/>

그런데 이 때, aside와 main 요소를 감싸는 wrapper 요소가 없다면, 하위 요소인 aside와 main 요소가 화면 가장자리에 달라붙게 되어(block 요소의 특징이므로), 의도와 다른 결과를 얻게 된다.

아래 이미지는 하위 요소를 감싸는 상위 요소(여기서는 wrapper)가 없을 경우 요소의 너비가 늘어난 상황을 보여준다.

정리

wrapper는 3가지 이점을 가질 수 있다.

1. 콘텐츠의 가독성을 높여준다. a. 텍스트 및 이미지와 같은 콘텐츠가 늘어나서 화면 전체 너비를 채우는 상황을 방지 하여, 원래 의도대로 디자인 할 수 있다.
2. 디자인 요소를 그룹화 하여, 간격을 추가하는데 유용하다.
3. 디자인 요소를 열로 나누는 작업은 래퍼 없이 수행하기 어렵다.

Axios : 브라우저, node.js를 위한 Promise API를 활용한 HTTP 비동기 통신 라이브러리 쉽게, BE-FE 간 통신을 위한 라이브러리 이다.

fetch의 단점은 응답 데이터를 json으로 변경한 뒤 작업을 해야한다. axios는 응답 데이터를 바로 json으로 받아오기 때문에 편리함을 제공한다.

Axios 사용 방법

• axios 모듈 설치 npm install axios --save
• 사용예시 : axios.get("thhps://api.themoviedb.org/3/trending/all/week")

Axios 인스턴스화 하기

1. 인스턴스화 하는 이유는?

• 중복된 부분을 계속 입력하지 않아도 되기 때문이다.
• 중복 예시 Get Movie By Latest : https://api.themoviedb.org/3/movie/latest?api_key=<>&language=en-US Get Movie Detaill : https://api.themoviedb.org/3/movie/{movie_id}?api_key=<>&language=en-US

  중복 url : https://api.themoviedb.org/3/ 해당 중복 url을 "baseURL"로 따로 관리하는 것이 좋다.

2. Axios 인스턴스 만드는 순서

1. 인스턴스 생성할 폴더 파일 생성하기
2. 예시 : https://api.themoviedb.org/3/movie/latest?api_key=<>&language=en-US

• axios.js

  import axios from "axios"
  

const instance = axios.create({ baseURL: "https://api.themoviedb.org/3/", // 중복 URL params: { api_key: "a38fa376de46b95eb6b7c9e______", language: "ko-KR" } })

export default instance;

*    requests.js
: baseURL 를 제외한 각각의 요청 url path 를 인스턴스 생성
https://developers.themoviedb.org/3/getting-started/introduction 를 참조하여 필요한 path를 인스턴스로 관리하면 된다.
```tsx
const requests = {
  fetchNowPlaying: "movie/now_playing",
  fetchTrending: "trending/all/week",
  fetchTopRated: "movie/top_rated",
  fetchActionMovies: "discover/movie?with_genres=28",
  fetchComedyMovies: "discover/movie?with_genres=35",
  fetchHorrorMovies: "discover/movie?with_genres=27",
  fetchRomanceMovies: "discover/movie?with_genres=10749",
  fetchDocumentaries: "discover/movie?with_genres=99",
};

export default requests;

1. API Key 발급받기

1. https://www.themoviedb.org 로 이동
2. 로그인 후 API_KEY 발급

   프로필과 설정 -> 설정 -> API API 요청 예 를 참고하여 서버 요청을 보내면 된다.

   2. Text Editor에서 the MovieDB API 설정

   https://developers.themoviedb.org/3/getting-started/introduction -> 사용할 요청어 선택 -> 적용

주로 사용할 API_URL

1. Get Movie By Latest :https://api.themoviedb.org/3/movie/latest?api_key=<>&language=en-US

2. Get Movie Detaill https://api.themoviedb.org/3/movie/{movie_id}?api_key=<>&language=en-US

3. Get Movie Reviews https://api.themoviedb.org/3/movie/{movie_id}/reviews?api_key=<>&language=en-US&page=1

4. Get Trending https://api.themoviedb.org/3/trending/all/day?api_key=<>

1. setState를 사용하여, number state에 1~3를 이어서 더하는 동작을 구현했다.
2. 그러나, 최종 number stat는 6이 아닌, 3이 적용되었다.

const [ number, setNumber ] = useState(0);

const handleClick = (i) {
    setNumber(number + 1);
      setNumber(number + 2);
     setNumber(number + 3);

      console.log("numberState: ", number)
}

문제 원인

setState는 비동기적 처리과정을 따르기 때문이다. 상태 업데이트는 비동기식일 수 있습니다. React는 setState()성능을 위해 여러 호출을 단일 업데이트로 일괄 처리할 수 있습니다 . https://ko.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

state의 값이 변경되는 시점은, setState가 호출되는 시점이 아닌, 해당 코드가 포함된 함수가 모두 실행된 이후 변경된다.

왜, state는 즉각 변경되지 않는가?

React에서 리렌더링되는 시점은, state 변경이 대표적인 사례이다. 그렇다면, state가 변경될 때마다 리렌더링 된다면, 매우 비효율적인 성능을 가지게 된다. 이를 해결하기 위해, 나온 것이 *React batch updating *이다.

React batch update

Batching이란, react가 더 나은 성능 개선을 위해, 여러개의 state 업데이트를 한번의 리렌더링으로 묶어서 진행하는 것을 말한다. https://github.com/reactwg/react-18/discussions/21

문제 해결: prevState

원래 의도대로, setState를 모두 수행하고 싶다면, Queue를 이용하면 된다!

setState에 함수를 인자로 전달하는 방법을 사용할 수 있다. 이때, 인자로 전달된 함수는 이전 state 값을 전달 받게 된다. 이후 해당 함수들은 Queue에 저장 되어 순서대로 실행된다. 그 결과, Queue에 저장된 함수들이 동기적으로 작동되면서, 모든 setState 구문이 동작하게 된다.

이전 피드에서 News라는 인터페이스를 기반으로 NewsFeed를 만들고, NewsDetail를 만들고, NewsComment를 만들었습니다. 이런 식으로 공통 요소를 만들고, 공통 요소를 확잘 할 수 있는 개별 요소를 만드는 것이 상속의 개념입니다.

코드를 작성할 때, 목적에 부합되도록 분류하고, 그 분류 내에서 훨씬 더 의미를 잘 부여할 수 있게, 중복된 코드를 제거한다면, 코드 가독성에 기여할 수 있습니다. 이를 위한 첫번째 방법이 클래스입니다.

코드 분석

// 네트워크를 통해서 API를 호출하는 함수 getData
function getData<AjaxResponse>(url: string): AjaxResponse {
  ajax.open('GET', url, false);
  ajax.send();

  return JSON.parse(ajax.response);
}

// 뷰와 관련된 업데이트를 처리하는 함수 makeFeeds, 함수 updateView
function makeFeeds(feeds: NewsFeed[]): NewsFeed[] {
  for (let i = 0; i < feeds.length; i++) {
    feeds[i].read = false;
  }

  return feeds;
}

function updateView(html: string): void {
  if (container) {
    container.innerHTML = html;
  } else {
    console.error('최상위 컨테이너가 없어 UI를 진행하지 못합니다.');
  }
}
// 메인 뷰를 처리하는 함수 NewsFeed, 함수 NewsDetail
function newsFeed(): void {
  let newsFeed: NewsFeed[] = store.feeds;
  const newsList = [];
  let template = `
    <div class="bg-gray-600 min-h-screen">
        ...
    </div>
    `
  if (newsFeed.length === 0) {
      newsFeed = store.feeds = makeFeeds(getData<NewsFeed[]>(NEWS_URL));
    }
  ...
  updateView(template);
}

function newsDetail(): void {
  const id = location.hash.substring(7);
  const newsContent = getData<NewsDetail>(CONTENT_URL.replace('@id', id))
  let template = `...`
  ...
}

1. 네트워크를 통해서 API를 호출하는 함수 getData
2. 뷰와 관련된 업데이트를 처리하는 함수 makeFeeds, 함수 updateView
3. 메인 뷰를 처리하는 함수 NewsFeed, 함수 NewsDetail

해당 피드에서는 공통요소로 작용하는 함수 getData에 집중하도록 하겠습니다.

문제 제기

API를 호출하는 함수 getData를 사용하는 입장인 함수 NewsFeed, 함수 NewsDetail에서 getData라는 명칭만으로는 정확히 어떤 타입의 데이터를 가져오는지 의미를 갖고 있지 않습니다.

function newsFeed(): void {
    newsFeed = store.feeds = makeFeeds(getData<NewsFeed[]>(NEWS_URL));
}

function newsDetail(): void {
  const id = location.hash.substring(7);
  const newsContent = getData<NewsDetail>(CONTENT_URL.replace('@id', id))
  }

즉, 공통함수를 사용하는 입장에서 좀 더 의미화 가 필요합니다.

클래스 상속으로 해결

1. 함수 NewsFeed, 함수 NewsDetail 에서 공통요소는, 네트워크를 통해서 API를 호출하는 getDtat 입니다.
2. 따라서, 클래스를 선언하고 getData의 기능을 할당합니다.
3. 이때, API를 호출할 때 필요한 것들은, 함수 getData를 참고하여, url과 XMLHttpRequest의 인스턴스를 만드는 코드가 필요합니다. 이를 생성자에 추가합니다.
4. 이때, class Api는 외부로부터 URL를 받고, 어떤 URL를 갖는 API더라도 호출을 할 수 있어야 합니다. 따라서, 생성자 함수의 인자로 url을 전달합니다.
5. 인스턴스 객체에 접근하는 지시어인 this를 사용하여, 클래스의 내부 요소인 url과 ajax로 접근합니다.

class Api {
    url: string;
    ajax: XMLHttpRequest;

    constructor(url: string) {
      this.url = url;
      this.ajax = new XMLHttpRequest();
    }
}

6. 작성된 공통요소인 Api 클래스를 확장하기 위해, 함수 NewsFeed, 함수 NewsDetail 를 각각 클래스로 만듭니다.

7. Api 클래스를 확장해서 만든 NewsFeedApi 클래스가 필요한 속성인 함수getData를 선언해줍니다.

8. 동일한 방법으로 NewsDetailApi 클래스를 선언합니다.

   class NewsFeedApi extends Api {
   getData(): NewsFeed[] {
      ajax.open('GET', url, false);
    ajax.send();
   
    return JSON.parse(ajax.response);
   }
   }
   

class NewsDetailApi extends Api { getData(): NewsDetail { ajax.open('GET', url, false); ajax.send();

return JSON.parse(ajax.response);

} }

9. 확장 된 NewsFeedApi와 NewsDetailApi가 getData의 기능을 공통요소로 가지고 있습니다. 따라서, 이 공통요소를 Api 클래스로 끌어올립니다. 이를 통해 확장 된 NewsFeedApi와 NewsDetailApi에 해당 코드들을 제거할 수 있습니다.
10. 공통요소는 코드의 묶음이므로 함수(getRequest)로 작성해줍니다.
11. 공통요소로 작성된 함수 getRequest의 ajax와 url은 모두 Api 클래스의 내부 요소로 작성되어 있기 때문에 this 로 바꿔줍니다.

```ts
class Api {
  ajax: XMLHttpRequest;
  url: string;

  constructor(url: string) {
    this.ajax = new XMLHttpRequest();
    this.url = url;
  }

  getRequest<AjaxResponse>(): AjaxResponse {
    this.ajax.open("GET", this.url, false);
    this.ajax.send();

    return JSON.parse(this.ajax.response);
  }
}

12. 이제 수정된 Api 클래스를 NewsFeedApi와 NewsDetailApi로 확장해줍니다. 이때, 확장된 클래스의 getData에는 상위 클래스인 Api의 getRequest를 호출한 값을 가져오면 됩니다.

    class NewsFeedApi extends Api {
    getData(): NewsFeed[] {
    return this.getRequest<NewsFeed[]>();
    }
    }
    

class NewsDetailApi extends Api { getData(): NewsDetail { return this.getRequest(); } }

13. 확장된 클래스를 적용합니다. 이때,  api라는 클래스 인스턴스를 만들어주었습니다. 
```ts
function newsFeed(): void {
   const api = new NewsFeedApi(NEWS_URL);
  ...
    newsFeed = store.feeds = makeFeeds(api.getData<NewsFeed[]>(NEWS_URL));
}

function newsDetail(): void {
  const id = location.hash.substring(7);
  const newsContent = getData<NewsDetail>(CONTENT_URL.replace('@id', id))
  }

클래스 메소드 노출 문제 발생

• Api 가 제공하는 getData 를 기존의 getData로 바꿀 때, getData와 getRequest 라는 두가지 메소드가 등장합니다.
• getDtat 메소드는 기존의 getData 함수와 동일하게 바깥쪽에서 API 호출을 위해서 사용하는 용도로 만들어진 메소드입니다. 따라서,
• getRequest 메소드는 Api 클래스를 확장한 하위 클래스에서 사용할 용도로 만들어진 메소드입니다.
• 따라서, getRequest 메소드는 Api 클래스 외부에서 사용되지 않아야 합니다.
• 그러나, 에디터에서는 이를 그대로 노출하고 있기 때문에 사용될 수 있습니다. 따라서, 에디터에서 이를 노출시키지 않게 해야합니다.
• 이러한 문제를 해결하기 위해 다음과 같은 방법을 사용하면 됩니다.

클래스 메소드 노출 문제 해결

1. 타입스크립트에서는 class의 속성과 메소드를 외부로 노출시키지 않는 지시어를 제공합니다.

바로, Protected입니다.

2. 이렇게 속성명 앞에 Protecte를 지정해주면, 해당 속성은 class 외부에서 인스턴스 객체로 등장하지 않게 됩니다.

   class Api {
   ajax: XMLHttpRequest;
   url: string;
   
   constructor(url: string) {
    this.ajax = new XMLHttpRequest();
    this.url = url;
   }
   
   protected getRequest<AjaxResponse>(): AjaxResponse {
    this.ajax.open("GET", this.url, false);
    this.ajax.send();
   
    return JSON.parse(this.ajax.response);
   }
   }

   

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입입니다.

상황

type News = {
  id: number;
  time_ago: string;
  title: string;
  url: string;
  user: string;
  content: string;
};

// Intersection Type

type NewsFeed = News & {
  comments_count: number;
  points: number;
  // optional properties
  read?: boolean;
};

type NewsDetail = News & {
  comments: NewsComment[];
};

// 함수 getData의 반환값을 Union Type으로 지정
function getData(url: string): NewsFeed[] | NeswDetail {
  ajax.open("GET", url, false);
  ajax.send();

  return JSON.parse(ajax.response);
}

// 함수 getData가 사용되는 두가지 상황 발생
// 1. NewsFeed[]를 반환하는 함수 newsFeed
// 2. NeswDetail을 반환하는 함수 newsDetail
function newsFeed(): void {
  ...
  if (newsFeed.length === 0) {
    // 불러온 뉴스 데이터에 read 속성을 추가함
    newsFeed = store.feeds = makeFeeds(getData(NEWS_URL));
    console.log("makeFeeds read =>", newsFeed);
  }
}

function newsDetail(): void {
  const id = location.hash.substring(7);
  const newsContent = getData<NewsDetail>(CONTENT_URL.replace("@id", id));
  ...
}

• 함수 getData는 상황에 따라, 타입 앨리어스로 지정한 NewsFeed[] 타입 혹은 NeswDetail 타입을 반환값으로 갖습니다.
• 이를 표현하기 위해 함수 getData의 반환값으로 유니온 타입을 선언했습니다.

  function getData(url: string): NewsFeed[] | NeswDetail {}

의도

• NewsFeed[] 타입을 반환값으로 갖는 함수 newsFeed와 NeswDetail 타입을 반환값으로 갖는 함수 newsDetail 등 두가지 상황에서 각각 다른 함수 getData의 반환값이 적용될 것을 예상했습니다.
• 이유는 유니온 타입(A | B)이 A도 될 수 있고 B도 될수 있는 타입이므로 함수 getData의 반환값 타압이 NewsFeed[]도 되고 NeswDetail도 될 것으로 예상했습니다.
• 의도되로 된다면, 함수 getData의 반환값을 갖는 변수 newsContent는 title 속성이 존재해야할 것이며, 함수 newsFeed와 함수 newsDetail 모두 상황에 따라, 의도된 값을 가져야 합니다.

오류 발생

function getData(url: string): NewsFeed[] | NewsDetail
'NewsFeed[] | NewsDetail' 형식의 인수는 
'NewsFeed[]' 형식의 매개 변수에 할당될 수 없습니다.
  'NewsDetail' 형식에 'NewsFeed[]' 형식의 
  length, pop, push, concat 외 29개 속성이 없습니다.ts(2345)

원인

• 타입스크립트 관점에서는 함수 getData를 호출하는 시점에 NewsFeed[] 타입이 올지 NewsDetail 타입이 올지 알수 없다고 합니다.

  이에, 어느 타입이 들어오든 우류가 나지 않는 방향으로 타입을 추론하게 되기 때문에, NewsFeed[] 과 NewsDetail 두 타입에 공통으로 들어있는 속성인 News 타입 속성만 접근할 수 있습니다. 참고 : 타입스크립트 핸드북

해결 방법

함수 getData는 리턴 값을 2가지 종류를 갖고 있습니다. 그러나, getData를 사용하는 입장에서는, 어떤 값이 올지 예상할 수 없는 상황입니다.

1. 타입 가드(Type Guard)를 이용하여 타입의 범위를 좁혀줍니다. 그러나, 이는 좋은 방법이 아닙니다. 왜냐하면, 함수 getData가 지금은 API 2개만 처리하지만, 추후, API 30개를 처리한다면, 함수 getData를 호출할 때마다, 조건문으로 끝 없이 타입 가드 코드를 작성해야 하기 때문입니다. 즉, "리턴 값으로 유니온 타입으로 기술하는 것만으로는 쉽지 않다."라는 것을 알 수 있습니다.
2. 제네릭을 적용합니다.

제네릭 사전적 의미

제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 출처 : 타입스크립트 핸드북

제네릭은 입력이 n개의 유형일 때, 출력도 n개의 유형인 것을 정의하는 것입니다. 여기서 핵심은 입력이 ABCD 유형 중, A가 입력되면 출력도 A로 나가야합니다.

즉, 입출력이 동일한 유형이어야 합니다.

이러한 상황을 제네릭이라는 문법으로 표현할 수 있습니다.

제네릭 적용하기

function getData<AjaxRespons>(url: string): AjaxRespons {
  ajax.open("GET", url, false);
  ajax.send();

  return JSON.parse(ajax.response);
}

1. 함수의 이름 바로 뒤에 "T" 라는 코드를 추가하고, 함수의 인자와 반환 값 모두에 "T" 라는 타입을 추가합니다.

2. 이때, "T" 는 통상적인 이름이며, 명시적으로 지정하는 것이 가독성을 높혀 줄 수 있습니다. 여기서는 "T" 대신 "AjaxRespons" 로 작명 했습니다.

3. 또한, 위 코드에서는 반환 값 타입만 지정해줬습니다. 이유는 제네릭의 특성 상, 입출력 타입이 모두 동일하기 때문에, 인자 타입을 생략했습니다.

   if (newsFeed.length === 0) {
    // 불러온 뉴스 데이터에 read 속성을 추가함
    newsFeed = store.feeds = makeFeeds(getData<NewsFeed[]>(NEWS_URL));
    console.log("makeFeeds read =>", newsFeed);
   }
   
   function newsDetail(): void {
      const id = location.hash.substring(7);
      const newsContent = getData<NewsDetail>(CONTENT_URL.replace("@id", id));
   ...
   }
   

   4. 제네릭이 적용된 함수 getData를 호출 할 때, 기술된 타입이 그대로 "AjaxRespons 타입" 에 적용되고, 리턴 값을 "AjaxRespons 타입"으로 출력합니다.
   5. 즉, 호출하는 쪽에서 타입을 명시해 주면, 그 타입을 적용해서 그대로 getData의 반환 타입으로 사용하겠다는 것이 제네릭입니다.

해당 메서드는 정규식과 문자열 간의 일치 항목을 찾고 일치하는 하위 문자열을 새 하위 만자열로 바꾸는 메서드이다.

string.replace(regexp/substr, newSubStr/function[, flags]);

• regexp - RegExp 객체. 일치는 매개변수 #2의 반환 값으로 대체됩니다.

• substr - newSubStr로 대체될 문자열입니다.

• newSubStr - 매개변수 #1에서 받은 하위 문자열을 대체하는 문자열입니다.

• function - 새로운 부분 문자열을 생성하기 위해 호출되는 함수.

• flags - RegExp 플래그의 조합을 포함하는 문자열: g

예시

var re = /apples/gi; 
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges"); 
console.log(newstr)
 => oranges are round, and oranges are juicy.

출처 : Tutorialspoint

상황

function newsFeed(): void {
  let newsFeed: NewsFeed[] = store.feeds;
  const newsList = [];
  let template = `
  <div class="bg-gray-600 min-h-screen">
    ...
          <div class="items-center justify-end">
            <a href="#/page/{{__prev_page__}}" class="text-gray-500">
              Previous
            </a>
            <a href="#/page/{{__next_page__}}" class="text-gray-500 ml-4">
              Next
            </a>
    ...
    <div class="p-4 text-2xl text-gray-700">
      {{__news_feed__}}        
    </div>
  </div>
  `;

  template = template.replace("{{__news_feed__}}", newsList.join(""));
  template = template.replace(
    "{{__prev_page__}}",
    store.currentPage > 1 ? store.currentPage - 1 : 1);
  template = template.replace("{{__next_page__}}",
                             store.currentPage + 1);

  updateView(template);
}

1. 문자열로 구성된 html의 태그 중 일부를 마킹
2. 이를 replace 메서드를 사용하여 하위 문자열로 대체하려 함
3. 두번째 매개변수로, 숫자를 전달함
4. 문법 오류 발생

의도

변수 template는 문자열로 구성된 html입니다. 해당 변수는 뉴스 페이지와 개별 뉴스를 모두 담기을 시 복잡도를 예상하여, 뉴스 페이지와 개별 뉴스를 각각 {{prev_page}}, {{next_page}}로 마킹하여, replace 메서드를 사용하여 하위 문자열로 대체하려는 의도로 작성되었습니다. 따라서, template.replace(str, num)으로 입력하여 이를 해결하려 했습니다.

원인

그러나, replace 메서드는 문자열을 매개변수로 갖음을 인지하지 못했기에, 문법 오류가 발생한 것입니다.

해결

먼저, 에디터가 제시한 힌트를 확인했습니다.

(method) String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)

에디터는 replace 메서드가 "두가지 문자열을 받으며 첫번째 매개변수를 두번째 매개변수로 전환해줌"을 제시하고 있습니다.

방법은 단순합니다. 두번째 매개 변수를 문자열로 바꿔주면 됩니다. 삼항연산자를 사용하여 상황에 따라 달라지는 값을 전달했기에, 어떻게 문자열로 전환할지 고민했지만, 최종적으로 전달되는 값은 문자열이나, 숫자나 모두 문자열로 반환되기 때문입니다.

따라서, 삼항연산자의 결과를 String으로 묶는다면 원하는 문법 오류를 해결할 수 있습니다.

  template = template.replace(
    "{{__prev_page__}}",
    String(store.currentPage > 1 ? store.currentPage - 1 : 1)
  );
  template = template.replace("{{__next_page__}}",
                              String(store.currentPage + 1));

어떤 유형의 값이 2가지가 들어 올 때, 그 중 1가지가 null인 즉, 데이터가 없는 케이스에서 무작정 데이터가 당연히 있다고 생각하고 속성을 접근했을 경우, *잊지 않고 null을 체크하라! *

작성 코드

const container: HTMLElement | null =
      document.getElementById("root");
let template = `
  <div class="bg-gray-600 min-h-screen">
    <div class="p-4 text-2xl text-gray-700">
      {{__news_feed__}}        
    </div>
  </div>
  `;

코드 설명

• 변수 container에 두개의 타입(HTMLElement | null)을 지정함
• innerHTML에 데이터를 넣는 코드에 문제 발생

원인 파악

• 문제가 발생한 변수 container에 지정한 타입으로 "HTMLElement" 혹은 "null"이 반환되어야 함
• 따라서 "null" 타입이 지정되어 있기 때문에, 변수 container에 innerHTML이라는 속성이 존재할 수 없음

결론

• 변수 container의 타입으로 null이 지정되었기 때문에, 오류가 발생한 것

해결 방법

변수 container의 반환값으로 "null"이 아닌 경우에만, "innerHTML"에 접근하라!

수도코드 : 만약, 변수 container의 값이 null 이 아닌 경우, innerHTML에 접근한다.

if(container != null) {
    container.innerHTML = template;
 } else {
   console.error(
     "최상위 컨테이너(root)가 없어 UI를 진행하지 못합니다.")
   }

이때, 코드를 축약할 수 있다. 변수 container를 if문 안에 넣었을 때, if 문에서 null 자체를 참, 거짓을 판별하여, null이 있다면, 거짓으로 판정해준다. 이를 적용하여, 변수 container에 데이터가 들어있다면, 참으로 판정하게 된다.

if(container) {
    container.innerHTML = template;
} else {
   console.error(
     "최상위 컨테이너(root)가 없어 UI를 진행하지 못합니다.")
  } 

만약, 위 코드가 중복된다면, 함수로 업데이트하여 사용하는 것이 좋다.

function updateView(html) {
  if(container) {
    container.innerHTML = html;
} else {
   console.error(
     "최상위 컨테이너(root)가 없어 UI를 진행하지 못합니다.")
  } 
}

updateView(template)

// 아이디 유효성 검사 후 중복 검사 
const idValidation = (e) => {
    const regExp = /^[a-z0-9]{4,10}$/;
    if (!regExp.test(e.target.value)) {
      setIdErrMsg("아이디는 4~10자 영어 소문자, 숫자를 사용하세요.");
    } else {
      setIdErrMsg("");
      axios
        .get(`${process.env.REACT_APP_API_URL}/user/id?id=${id}`)
        .then((res) => {
          const resMessge = res.data.message;
          if (resMessge === "사용 가능한 아이디입니다.") {
            setIdErrMsg("");
            setIdCheckMsg("사용 가능한 아이디입니다.");
          } else if (resMessge === "이미 사용중인 아이디입니다.") {
            setIdErrMsg("이미 사용중인 아이디입니다.");
            setIdCheckMsg("");
          }
        });
    }
  };

회원가입 페이지를 구현하던 와중에 문든 의문이 들었습니다.

입력한 아이디에 대한 중복확인을 할때, post가 보내야할지, get으로 보내야할 지 의문이 들더군요.

저는 당연하게 회원가입에 입력된 아이디 정보를 axios.post로 요청을 보낸 뒤, 서버가 post요청으로 들어온 아이디를 DB에서 조회하면 된다고 생각했습니다.

GET 요청은 조회! POST 요청은 생성!

post 요청으로 보내야한다고 생각했던 가장 큰 이유는 get요청은 데이터를 전달할 수 없다고 알았기 때문이었죠.

GET방식 :localhost:8888/?id=banana&pwd=hong

출처: https://xzio.tistory.com/1753 [코딩창고]

GET은 입력된 아이디를 parameter 값으로 url에 담아 서버로 요청을 보낼 수 있습니다. 따라서 GET방식은 숨겨야할 정보를 url로 노출시키는 보안상의 문제를 가집니다.

그런데도, 아이디 중복확인에 GET 방식을 사용한 이유는 무엇일까요? 바로, 중복확인은 조회를 우선으로 두기 때문입니다. POST 방식은 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 방식입니다. 따라서 DB에 아이디가 중복되었음을 확인만 하면 되기 때문에, GET 방식을 사용하여 중복여부만 요청하면 되기 때문이죠. 게다가, 아이디는 노출되어도 보안의 위험이 덜하기 때문에, get으로 하는 것이 유리하다는 결론을 내릴 수 있었습니다.

헛 공부했구나!

지난 3개월간 빈칸에 필요한 코드를 작성하며 흐름을 파악하기 바빴으나, 프로젝트는 아무것도 없는 상태에서 하나씩 쌓아가야 한다는 현실에 매 순간이 도전의 연속이었습니다.

1. axios.defaults.withCredentials = true;

상황 1. 회원가입에 필요한 모든 유저 정보를 입력 완료 2. 유저 정보를 axios.post("/signup", userInfo)로 요청을 보냄 3. 서버에서 req.user 값이 undefined로 나온 상황 4. 정상적으로 통신했다면, req.user 객체에 정보가 담겨있어야 함

왜 이런 상황이 발생했는지 알기 위해, "axios"로 구글링 해봤습니다. 링크 :https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9

aixos의 정의와 특징을 다시 정리했습니다.

aixos, 왜 쓰는걸까?

 간단하게, 백엔드와 프론트엔드가 통신을 쉽게하기 위해 사용하는 비동기 통신 라이브러리 입니다.
그럼, 어떻게 쉽게 통신하게 하는 걸까요?
HTTP 요청과 응답을 하기 위해선 JSON형태로 변경하여 통신해야 합니다.
이미 JS에 fetch api가 있어 백엔드와 프론트엔드의 통신이 이루어지고 있었지만, 매번 통신 할때마다 JSON 형태로 데이터를 수정해야 하는 단점이 있었죠.
axios는 이런 fetch api의 단점을 보완했습니다.
HTTP 요청과 응답을 JSON형태로 자동으로 변경해주기 때문이죠.

클라이언트 - 서버 간 통신 방법

다시 두번째 상황으로 가보겠습니다. 클라이언트에서 작성된 유저 정보를 서버로 axios.post로 요청을 보낼 때, 출처가 서로 같았는지 확인을 하지 않았음을 알았습니다.

출처(origin)란, 서버의 위치를 의미하는 URL이며, protocol,host,port까지를 의미합니다.

그렇다면, 제가 작업한 클라이언트의 origin과 서버의 origin은 같았을 까요? 달랐습니다. 웹 통신 정책에는 SOP(same origin policy)와 CORS(Cross Origin Resurce Sharing) 두가지 정책이 있습니다. SOP은 동일한 출저에서만 리소스 공유가 가능한 정책입니다. 따라서 이번 에러의 원인은 클라이언트와 서버 같 origin이 달랐기 때문에, SOP 정책 위반에 따른 문제였습니다.

이를 해결하는 방법은 굳이 동일한 origin을 설정하지 않아도 되는 CORS 정책으로 해결될 수 있었습니다.

axios 요청 파라미터 옵션 : withCredentials의 기본값인 fals를 true로 변경!

axios 요청 파라미터 옵션인 withCredentials의 기본값은 fals로 설정되어 CORS 요청을 허용하지 않게 설정되어 있습니다. withCredentials의 기본값을 fals에서 ture로 변경하면, CORS 요청을 허용하게되고, 쿠키값을 전달 할 수 있게 되는 것이죠.

회원가입 페이지에는 axios 요청이 자주 요구되므로, withCredentials의 기본값을 전역으로 설정하여 편의성을 확보 할 수 있었습니다.