NodeBird (Next.js 사용)

• back 폴더 첫 생성시 npx sequelize db:create 입력해서 db생성해줘야함

• node -v : 16사용

• spa : single page rendering - 화면은 한개지만 데이터만 받아와서 작동시킴(spa 프레임워크 : react)

  • ssr : server side rendering 검색엔진에 나와야할때 사용! - 첫방문만 옛날방식 → 이후부터 리액트방식사용 등등,,

• next.js - ssr,코드스플리팅 지원해줌

  • Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크
  • 검색엔진이 필요할때 매우유용함

• ant design (디자인이 되어있음) bootstrap과 비슷

  Ant Design - The world's second most popular React UI framework

• styled component 사용

  styled-components

  import styled from "styled-components";
  
  const ButtonWrapper = styled.div` //백틱사용 -> div라는 뜻
    margin-top: 10px;
  `;
  <ButtonWrapper> 
  

  → 다들 emotion으로 갈아타는 추세긴함

  Introduction

• 새탭이동 - _blank 쓰면 위험하므로 rel다음의 코드들을 같이 작성해주어야함

  <a href="<https://naver.com>" target="_blank" rel="noreferrer noopener">
              Naver
            </a>
  

• react-form 나중에 쓰도록!

• 스타일 객체로 작성x → 리랜더링됨 → 객체는 같은모양이어도 항상 다른취급되므로

<div style={{ marginTop: 10 }}> //이렇게 쓰지마라는뜻