[TIL] 3주차 - 1. UI 프레임워크 - (feat. 별점 / Youtube API)

UI 프레임 워크

 

UI 디자인과 UX를 일관되게 유지 및 효율적 제작을 할 수 있게 해주는 도구들이 모인 것을 말합니다.

컴포넌트 되어 있어서 import 해서 사용하면 됩니다.

 

"바퀴를 재발명하지 마라"

있는걸 굳이 다시 만들 필요는 없습니다.

프레임워크를 사용하는 이유는 시간 절약과 버그 최소화 때문입니다 

 

프레임워크와 라이브러리를 선택할 때는

다운로드 수가 높은 많은 사람들에게 검증된 것에 

한해서 import해서 사용하는 것이 좋습니다.

 

그 라이브러리가 업데이트가 안될 수도 있고

잘 실행 되는 건지 최근에 업데이트 된 것인지

오래 전이라도 다운로드 수가 매우 많아서

검증됐고 안정화 된것인지 보고 사용하는 것이 좋습니다.

 

이런 라이브러리 리스트를 알고 있는 것도 실력입니다.

 

라이브러리가 정 없다면 그 때 직접 만들어 사용하면 되는 것입니다만

라이브러리가 있는데도 만드는 것은

먼길을 돌아서 가게 되는 것이고 시간 낭비를 하게 되는 것입니다.

 

무엇보다 실무에서는 라이브러리에 있는 것을 가져다 사용합니다.

 

---

Ant-design 설치 및 사용법

 

0. https://ant.design/ 링크로 들어간다.

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

 

 

1. 터미널 열고 antd 설치

 

(이 때 antd에서 디자인 용량 줄이기 위해

아이콘들만 따로 나눠놓았기 때문에

아이콘 설치도 추가적으로 한다.)

 

$ yarn add antd
$ yarn add @ant-design/icons

 

 

2. _app.tsx 파일에 import 받기

-> 추후 사용하는 파일마다

일일이 import 받아줘야 하는 수고를 덜어준다.

 

import 'antd/dist/antd.css';
import '../styles/globals.css'

 

 

3. components로 들어가서 

원하는 아이콘 클릭하면

태그명이 복사된다.

 

 

4. 복사한 태그명 import 받아주고 return에

태그 째로 붙여넣기를 해준다.

(css 수정을 해주고 싶다면 styled로 가능하다.)

 

import { HeartOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';

const MyIcon = styled(HeartOutlined)`
     font-size: 50px;
     color : red;

`

export default function LibraryIconPage(){
     return(
          <>
               <HeartOutlined />
               <MyIcon/>
          </>
     ) 

}

 

 

 

 

그밖에 참고할 만한 UI 라이브러리

https://mui.com/

MUI: The React component library you always wanted

 

 

---

 

YOUTUBE API 사용하기

 

0. 구글에 react player 검색하거나 아래 링크로 들어간다.

https://www.npmjs.com/package/react-player

react-player

 

 

2. 터미널로 react-player 설치

 

$ yarn add react-player

 

 

 

3. react-player 임포트 받고 <ReactPlayer> 태그안의 url에 유튜브 주소 넣기

 

import ReactPlayer from 'react-player'

export default function LibraryYoutubePage(){
     
     return(
          <ReactPlayer url='유튜브 링크 아무거나' width={500} height={500}/>
     ) 
}