카테고리 없음

React 심화 5주차 개인 과제

도리닥닥 2022. 9. 1. 15:35

728x90

- 리덕스에서 미들웨어 청크의 역할은 무엇인가요?

리덕스는 코드 전역의 데이터를 관리해주는 역할입니다. 새로고침되거나 창이 바뀌면 데이터가 유실되는데, 이는 데이터베이스를 적용함으로써 데이터를 유지를 할 수 있습니다. 미들웨어 청크의 역할은 데이터베이스와의 중간 통신을 할 수 있도록하여 리덕스가 서버와 클라이언트 사이의 데이터를 주고받을 수 있도록 해주는 것 이라고 생각합니다.

- 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?

비동기란 쉽게 설명하여 호출부에서 실행 결과를 기다리지 않아도 되는 함수이다. 반대로 동기 함수는 호출부에서 실행 결과가 리턴될 때 까지 기다려야하는 함수이다. 프로미스 사용 이전에는 콜백함수를 다른 함수의 인자로 넘겨서 비동기 처리를 했었다. 전통적인 방식으로도 큰 문제가 발생하지 않았지만, 콜백 함수를 중첩해서 연쇄적으로 호출해야하는 복잡하는 코드의 경우 콜백 지옥이라는 문제가 발생되고, 코드의 가독성이 현저하게 떨어진다. 이를 해결하기 위해 프로미스가 나타났다. 프로미스는 콜백함수를 통해 비동기 처리를 하던 기존 코드와 큰 차이점이 있는데, 함수를 호출하면 프로미스 타입의 결과가 리턴되고, 이 결과값은 다음에 수행할 작업을 진행한다는 것을 나타낸다. 따라서 비동기 처리 코드임에도 불구하고 동기 처리 코드처럼 읽히기 때문에 조금 더 직관적으로 느껴지게 된다.

- TDZ(Temporal Dead Zone/일시적 사각지대)란?

TDZ는 let, const, class 구문의 유효성을 관리한다. TDZ는 선언 전에 변수를 사용하는 것을 허용하지 않는다.

INFINITE SCROLL

React.js에서 무한스크롤을 구현하기 위해서 react-Intersection-Observer 라이브러리를 이용하였다.

yarn add react-intersection-observer

useInView 훅을 사용하여 ref와 inView를 가져온다. ref는 관찰할 대상을 설정하고, inView는 타겟에 보이지 않으면 false, 보이면 true를 갖습니다.

const [ref, inView] = useInView();

useEffect를 사용하여 지정한 타겟이 화면에 보일 때마다 서버에 요청을 보내서 포스트를 받아올 수 있도록 합니다.

구현한 코드

  const page = React.useRef(1);
  const [hasNextPage, setHasNextPage] = React.useState(true);
  const [posts, setPosts] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [ref, inView] = useInView();
  const onDelete = (id) => {
    setPosts(posts.filter((post) => post.id !== id));
  };
  const fetch = useCallback(async () => {
    try {
      const {data} = await client.get(`/posts?_limit=2&_page=${page.current}`);
      setPosts((prevPosts) => [...prevPosts, ...data]);
      setHasNextPage(data.length === 2);
      if (data.length) {
        page.current += 1;
      }
      setLoading(false);
    } catch (err) {
      console.log(err);
    }
  });
  useEffect(() => {
    if (inView && hasNextPage && !loading) {
      fetch();
      setLoading(true);
    }
  }, [fetch, hasNextPage, inView]);

page 변수를 만들어 api에서 페이지별로 데이터를 가져올 수 있도록 합니다.
hasNextPage는 api에서 가져온 데이터가 설정한 값만큼 가져왔을 때는 true, 아니면 false
post state를 임시로 만들어서 데이터를 담아줄 배열을 만들었습니다.
loading 변수는 스크롤을 빠르게 계속 내릴 시 로딩 전에 데이터가 get되어서 중복되는 데이터가 없게 만들기 위해서 loading 변수를 설정하였음.
url에서 page별로 나눌수 있는 방법은 /post?_limit=(원하는 갯수)&_page=(원하는 페이지)

Vercel

1. 배포

(1) 배포란?
배포란, 우리가 만든 프로젝트를 모두가 볼 수 있게 보여주는 것을 뜻합니다. 우리가 아무리 잘 만들어도 [localhost:3000](http://localhost:3000) 에서 구동되고 있는 프로젝트는 나 외에는 볼 수가 없습니다. 배포를 해야만, 우리의 서비스를 다양한 사람들이 접속하고, 이용할 수 있습니다.
(2) 배포의 방식우리가 배울 방식은 플랫폼을 이용할 것이고, 수많은 플랫폼중에서도 Vercel 이라는 것을 이용할 것 입니다.
배포이 방식은 정말 여러가지가 있습니다. 배포를 도와주는 플랫폼을 이용하는 방법도 있고, 또는 웹서버를 구축하고 웹서버에 리액트 프로젝트 빌드 파일을 올려서 배포하는 방법 등이 있습니다.

2. Vercel 이란?

(1) Vercel이 뭔가요?
Vercel은 AWS 와 같은 클라우트 컴퓨팅 서비스를 제공하는 회사이면서도, 서비스의 이름이기도 합니다. 그리고 React의 Framework인 **Next.js**를 개발한 회사이기도 합니다.
(2) 왜 Vercel이죠?물론, 우리가 실제로 회사를 다니게됐을 때 Vercel를 사용하지 않을 확률이 더 높습니다. 각 회사마다 가진 배포 파이프라인을 지키고 더 견고하고 더 안전한 배포방식이 있을테니까요. 하지만 지금은 Vercel로도 아주 충분합니다.
필자가 Vercel을 선택한 이유는 아주 쉽고, 간단하며 성능도 괜찮고 일정 수준까지는 무료이기 때문입니다. 복잡한 설정을 할 필요(Zero-config)도 없고, 단지 깃헙과 연동하고, 소스를 push 를 할때 마다 새로운 소스코드가 자동으로 배포도 됩니다. 또한 SSL 설정도 자동으로 적용이 되며, custom domain도 아주 쉽게 연결할 수 있습니다.

3. 배포하기

(1) 깃허브 레포지토리 생성 및 remote 등록
일단, 깃허브에서 새로운 레포짓토리를 생성하세요. 그리고 우리의 프로젝트와 레포짓토리를 연결하고 모두 commit & push 합니다.
(2) Vercel그러면 자동으로 연결이 되고, Overview 화면으로 이동됩니다. 여러분은 처음 사용하는 것이니 아무런 프로젝트가 없을 거에요. 우측 상단에 New Project 버튼을 클릭합니다.그리고 Deploy 버튼을 클릭합니다.
그러면 몇분뒤, 이렇게 배포가 완료됩니다. STATUS가 ready 라면 배포가 완료된 것입니다. 도메인을 클릭하면 우리의 서비스를 접속할 수 있습니다.
Import Git Repository 라는 메뉴에 우리가 아까 생성한 레포지토리가 보입니다. 그것을 import 해주세요.
Vercel로 들어갑니다. 그리고 깃허브 아이디를 이용해서 로그인 합니다.
(3) 수정사항은 어떻게 반영하나요?소스코드를 push 했을 때, Vercel에서 이것을 감지하고 바로 재배포를 시작하는 영상입니다.
만약 지금 배포된 것에서 추가로 무언가를 개발하고 그것을 반영하고자 한다면, 코드 작성을 마치고 commit과 push를 하면 자동으로 재배포를 합니다. push 외에 별도로 우리가 해줄 것은 없습니다.

4. 정리

우리는 Vercel로 배포한다.
레포지토리를 생성하고 Vercel에서 로그인 후 레포지토리만 선택하면 자동으로 배포가된다.
수정사항을 반영하고자 할 때는 레포지토리에 commit, push 하면 자동으로 재배포를 시작한다.

5. 더 알아보면 좋을 키워드

[22.8.6 업데이트] - 내용추가

vercel로 배포할 때 환경변수 추가하기
- 링크를 참조하세요.