early-exit 패턴(early-return)

• return = 함수를 종료한다는 의미
• if ~ else 방식으로 길게 늘여쓰는 것이 아니라,
• if ~ return 방식으로 아닌 것을 먼저 하나씩 종료하는 패턴
• 본격적인 조건문안에 들어가기 전에 제외될것을 미리 제외시켜주는 패턴

 async function onClickUpdate(event) {
    if (!myContents) {
      alert("내용이 수정되지 않았습니다.");
      return; // early-exit 패턴
    }
    if (!myPassword) {
      alert("비밀번호가 입력되지 않았습니다.");
      return; // early-exit 패턴
    }
    try {
      await updateBoardComment({
        variables: {
          ...
      alert(error.message);
    }
  }

라이브러리

라이브러리 = 자주 쓰는 기능들을 코드로 미리 만들어놔서 무료로 공유하는 시스템

쓰는이유?

1. 시간절약
2. 버그 최소화 ( 다양한 브라우저의 소환성 , 다양한 사이즈 적용등 에서 안정적)
3. 유지보수가 편리하다

라이브러리 예시

ex) MaterialUI , antD 부트스트랩 등등

• 사용하기 전에 다운로드는 필수!
• antD https://ant.design/
• material ui https://material-ui.com/
• ReactPlayer https://www.npmjs.com/package/react-player
  라이브러리 사용법은 Docs 에서 익히기 (많이쓰는 것들은 연습도 해야한다.)

라이브러리 활용하기

아이콘 넣기

• 복사해온 아이콘 이름과 똑같은 것을 import 해오기, css를 위해 styled도 import 하기

import { ScissorOutlined } from "@ant-design/icons";
import styled from "@emotion/styled";

• css 적용해주기 styled() 괄호안에 아이콘 이름 쓰기, 크기는 font-size로 적용

const MyIcon = styled(ScissorOutlined)`
  font-size: 500px;
  color: yellowgreen;
`;

• html에 넣기 (하지만 id값을 못읽기때문에 id 값을 넣으면 안된다)

export default function LibraryIconPage() {
  return (
    <div>
      <MyIcon />
      {/* id={data._id} 아이콘에서는 이렇게 id 주면 사라지기떄문에 왠만하면 쓰지않는다.*/}
    </div>
  );
}

Ant-D 에서 별점매기기 가져오기

• AntD 에서 Rate import하기

import { Rate } from "antd";
import { useState } from "react";

• 별 개수마다 이름 선언해주기

const desc = ["1점", "2점", "3점", "4점", "5점"];
// 위쪽에 넣는 기준  - 하드코딩 (한번만들고 두번다시 거치지 않을 것들)
// 이유 - state가 바뀌면 컴포넌트가 다시 한번 도니까 값이 바뀌지 않을것들은 밖에 있어야한다.

• useState를 이용해 별 클릭시에 그에 맞는 value 바꾸기 (별 4개에 4점)

export default function LibraryStarPage() {
  const [value, setValue] = useState(3);
  //   const aaa = 3; 
  // 자신과 가장 가까운 중괄호안에잇는 aaa 를찾고 없으면 다음 중괄호에서 찾는다.
  const handleChange = (value) => {
    // value 는 화살표로 된 중괄호 안의 value 다!
    // console.log(aaa); // 가장 가까운 중괄호안에있는 aaa
    setValue(value);
    alert(value + "점");
  };

• html에 Rate 넣기와 value에따라 정해둔 이름 나오게 하기

  return (
    <span>
      <Rate onChange={handleChange} value={value} />
      {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ""}
    </span>
  );
}

AntD 에서 달력 가져오기

• AntD에서 Calendar import 하기

import styled from "@emotion/styled";
import { Calendar } from "antd";
import { useState } from "react";

• css

const MyCalendar = styled(Calendar)`
  width: 300px;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
`;

• value 는 날짜 / data 라는 변수를 만들어서 value 넣어주기

export default function CalendarPage() {
  //   const [value, setValue] = useState("2021-09-13");
  function onPanelChange(value, mode) {
    console.log(value.format("YYYY-MM-DD"), mode);
    // setValue(value);
  }
  const [data, setData] = useState("");
  function onSelect(value) {
    setData(value.format("YYYY-MM-DD"));
  }

• html에 달력 넣고 아래에 날짜 data 값 나오게 하기

  return (
    <div>
      <MyCalendar
        fullscreen={false}
        onPanelChange={onPanelChange}
        onSelect={onSelect}
      />
      <div>{data}</div>
    </div>
  );
}

React-Player 로 유튜브영상 가져오기

• ReactPlayer import하기

import ReactPlayer from "react-player";
import styled from "@emotion/styled";

• css 만들기 AntD와 같이 styled() 괄호안에 ReactPlayer 를 넣어준다.

const MyYoutube = styled(ReactPlayer)`
  border: 3px solid yellow;
`;

• html에서 url 주소 가져오기 / 크기와 다양한 명령어(muted , playing) 지정

export default function LibraryYoutubePage() {
  return (
    <MyYoutube
      url="https://www.youtube.com/watch?v=J1gRHosqoVA"
      width={800}
      height={600}
      muted={true}
      playing={true}
    />
  );
}