코드캠프 4기 - 11월 15일

readOnly 속성 - 클릭은 안된다

props는 타입 추론이 안된다

 

error 타입 모를 경우

if (error instancesof Error) alert(error.message);

 

UI 프레임워크

바퀴를 재발명하지 마라!

프레임워크를 잘 사용하는 능력도 중요하다.

 

 

https://material.io/

Material Design

---

import 'antd/dist/antd.css'; 복사 (_app.js)

 

yarn add @ant-design/icons

아이콘 설치

 

import { PlayCircleOutlined } from "@ant-design/icons";

import styled from "@emotion/styled";

const MyIcon = styled(PlayCircleOutlined)`

font-size: 50px;

color: salmon;

`;

export default function LibraryIconPage() {

return <MyIcon />;

}

스타일이 들어간 아이콘 괄호안에 컴포넌트를 넣는다.

<MyIcon id="aaa"/>;

id "aaa"를 넣을경우 아이디를 꺼내놓을 수 없다.

 

상세보기에 있는 주소를 꺼내놓고

좋아요 mutation

event가 아닌 router query boardId

---

import { Rate } from "antd";

import { useState } from "react";

export default function LibraryStarPage() {

// const desc = ['terrible,' 'bad', 'normal', 'good', 'wonderful']

const [value, setValue] = useState(2);

function handleChange(value: Number) {

setValue(value);

}

return (

<span>

<Rate onChange={handleChange} value={5} />

</span>

);

}

<Rate onChange={handleChange} value={5} />

이미 value값 지정되어서 클릭해도 안바뀐다.

 

Rate 가 작동되는 순서

 

scope chain이 발생

function 안에 vaule가 없으면 상위 스코프에서 value 가지고 옴

---

Youtube 동영상 가지고 오기

react player 설치

yarn add react-player

 

사용법

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

 

next를 쓰면 import React from 'react'는 쓰지 않아도 된다

 

스타일 적용하기

import styled from "@emotion/styled"

 

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

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

export default function LibraryYoutubePage() {
  return (
    <MyYoutube
      url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
      width={500}
      height={500}
    />
  );
}

 

가로와 세로 크기는 css가 아닌 자체 태그에서 변경해준다