[FE] React-NodeBird 리뉴얼 정리(1)

1. 이번 강좌에서 변경된 부분들

• nextjs가 8버전에서 9버전으로 바뀜 -> 타입스트립트 지원, 동적 라우팅이 추가됨
• 노드는 14버전, antd는 4버전으로 바뀜 -> 현재는 5버전인데 사용방법이 다르므로 4버전으로 설치합시다
• 1강에서 4강까지는 더미데이터로 작업할 것(API가 나오면 갈아끼울 수 있게끔 한다)

2. 리액트가 있는데 nextjs를 선택한 이유

• 프레임워크라서 갖춰진 것이 많은데 자유도는 조금 떨어진다
• 서버사이드 렌더링이란?
  • 웹페이지에서 실제 요청은 브라우저, 프론트 서버, 백엔드 서버, 데이터베이스로 이루어져 있다
  • 브라우저 -> 프론트서버 -> 백엔드서버 -> 데이터베이스 -> 백엔드서버 -> 프론트서버 -> 브라우저도 돌아오는게 전통적인 SSR, 프론트서버는 데이터와 html을 합쳐서 보내준다.
  • SPA에서는 CSR방식으로 동작한다
    1.브라우저 -> 프론트서버 -> 브라우저 -> 컴포넌트만 갈아끼우고 데이터가 들어오기 전까지 로딩중
    2.백엔드서버 -> 데이터베이스 -> 브라우저에서 데이터를 넣어주는게 CSR
• CSR방식에서 프론트서버는 데이터 없이 HTML, JS, CSS를 보내준다(싱글페이지). 이후에 브라우저는 백엔드 서버에 데이터를 요청하고 데이터를 따로 받아온다.
• CSR, SSR의 차이 : SSR은 데이터를 한번에 받아와서 그려진다는 장점이 있지만 그 과정이 길어서 로딩속도가 길어진다. CSR은 로딩속도가 짧다(3초) 전체적인 시간은 비슷하거나 리액트가 더 길수도 있다. 그렇다면 SPA가 필요한 경우는 사용자에게 빠른 인터렉션이 필요할 때다
• CSR의 단점을 극복하는 방법 : 코드 스플리팅(방문한 페이지의 코드만 보내주게)
• SSR의 단점을 극복하는 방법 : 프리렌더와 서버사이드 렌더링 2가지로 나눌 수 있는데, 프리렌더는 검색엔진일 때만 SSR방식으로 주고 일반유저일 때는 CSR방식으로 준다. 일반적인 SSR은 첫번째 방문(새로고침 포함)일 때만 SSR방식으로 주고 그 다음 방문부터는 CSR방식으로 준다.
• 따라서 코드스플리팅이나 SSR을 실무에서는 꼭 적용을 해야한다.
• SSR이나 코드스플리팅이 필요하지 않은 경우는 어드민 페이지이다

3. 초기 세팅

• 노드 버전은 LTS가 안정적, Current도 LTS가 될 거기 때문에 공부하는 입장이면 CUrrent를 사용해도 된다. -> 현재는 18버전임
• next와 antd는 버전이 중요한데 버전을 정확하게 설치하려면 설치하려는 라이브러리 뒤어 @와 원하는 버전을 붙인다. 우리는 next9버전을 설치할 것이므로
  npm i next@9로 설치한다. 안그러면 가장 최근 버전으로 설치된다
  

4. pages 폴더 제작

• react에서는 JSX문법이 들어가는 부분에서는 REACT를 import 해줘야 하는데 next는 그렇지 않아도 된다. 하지만 그냥 붙여주는게 좋다(습관)
• 안써도 되는 이유 : next에서 pages폴더의 이름은 꼭 pages여야 하는데 그 이유는 next가 pages폴더에 있는 폴더나 파일을 1개의 페이지로 인식하기 때문이다.(코드스플리팅이 된 페이지)
• 서버를 실행한 후에 추가한 페이지는 잘 인식을 못하기 때문에 서버를 한번 껐다가 켜 주세요
• pages 폴더 안에 다시 폴더를 만들면 '/'로 구분되는 경로를 만들 수 있다
  e.g. (로컬로스트)/about(폴더)/mypage(파일명)
  
• 만약에 경로를 동적으로 바꾸고 싶다면 바꾸려는 부분에 대괄호[]를 사용한다.
  e.g. [name].js
  

5. 컴포넌트를 담을 폴더, 레이아웃 파일 만들기

• npm i prop-types로 prop-types를 설치한다
• 컴포넌트를 쪼개는 이유는 불필요한 렌더링을 막기 위해서

  import React from "react";
   import PropTypes from "prop-types";
   const AppLayout = ({ children }) => {
     return (
         <div>
             <div>공통메뉴</div>
             {children} 
   //-><AppLayout><태그>children</태그></AppLayout> 
         </div>
     );
  };
   AppLayout.propTypes = {
     children: PropTypes.node.isRequired,
   };
  export default AppLayout;  

6. Router 사용하기

• next는 react-router를 사용하지 않고 자체적으로 router를 가지고 있다
• 페이지 변동사항을 저장하면 저절로 로딩이 되는데 react hot loader가 next에 들어있어서 자동으로 재시작 되는 것
• 개발모드에서 서버를 켜고 로딩까지 0.5초 정도 느린 것을 볼 수 있는데 배포모드가 되면 빨라지므로 걱정하지 않아도 된다

7.Eslint 사용하기

• 코드를 깔끔하게 하기 위해서 ESLint를 사용할 것이므로 설치
  e.g. npm i eslint-plugin-import -D -> D를 붙이는 이유는 개발모드에서만 사용할 것이기 때문
  npm i eslint-plugin-react -D
  npm i eslint-plugin-react-hooks -D

    "devDependencies": {
        "eslint": "^8.33.0",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-react": "^7.32.2",
        "eslint-plugin-react-hooks": "^4.6.0"
    }   

• 루트 경로에 .eslintrc파일을 만들어 준다. 확장자가 없는 파일인게 특징. mac이나 리눅스 에서는 .을 붙인 파일은 숨김파일임을 의미한다.
• .eslintrc의 내부는 json형식으로 작성한다.
• 에디터 마다 eslint와 연결해주기 위는 과정이 별도로 필요하다.

8.질의응담

• 브라우저와 백엔드간 요청에서 CORS가 필요
• 서버사이드 렌더링을 할 때 프론트서버의 도메인과 백엔드서버의 도메인이(정확하게는 포트가) 달라서 생기는 문제
• 백엔드서버에서는 CORS 설정을 해주고 프론트서버에서는 쿠키에 withCredentials를 설정한다.
• 몽고DB는 데이터에 관계가 없을떄만 사용(e.g. 로그 쌓을때)
• 실제로 DB의 80%는 SQL로 해결할 수 있다