FACTS(사실, 객관) : 내가 한 일
reset.css
항상 https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
여기서 복사해 사용했는데 이것은 마지막 업데이트가 11년도(24.08.27기준) 이기도 하고, 앞으로 생길지도 모르는 새로운 태그들에 대한 내용은 누락될 수 있다? 는 점에서 아쉬움이 있다고 한다.
대신 라이브러리를 설치해 사용하는 방법을 택할 수 있는데
https://github.com/elad2412/the-new-css-reset
GitHub - elad2412/the-new-css-reset: The New Simple and Lighter CSS Reset
The New Simple and Lighter CSS Reset. Contribute to elad2412/the-new-css-reset development by creating an account on GitHub.
github.com
the-new-css-reset 이다.
매번 복사해 사용하는 것에 비해 버전관리가 쉽다는 점에서 큰 이점이 있다. 사용 방법은,
1. 라이브러리 설치
//yarn
yarn add the-new-css-reset
//npm
npm i the-new-css-reset
터미널에 명령어를 입력한다.
2. import 하기
import "the-new-css-reset/css/reset.css";
main.jsx에 import해준다.
끝.
아이콘 넣기
Lucide Icons
Beautiful & consistent icon toolkit made by the community.
lucide.dev
1. 패키지 설치
//yarn
yarn add lucide-react
//npm
npm install lucide-react
터미널에 명령어를 입력해 패키지를 설치한다.
https://lucide.dev/guide/installation 설치에 관한 자세한 내용은 여기서 확인할 수 있다.
2. 원하는 아이콘을 골라서 이름을 복사
3. 아이콘을 넣고싶은 위치에 복사한 이름을 파스칼케이스로 붙여넣기
//clipboard-check
<ClipboardCheck />4. 사용한 아이콘을 import (동일하게 파스칼케이스로)
import { ClipboardCheck } from "lucide-react";
이렇게 하면 정상적으로 표시된다.
만약 사이즈를 조절하고 싶다면?
<ClipboardCheck size={12}/>
이렇게 원하는 설정값을 props로 가져올 수 있다.
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
이전엔 FontAwesome말곤 몰랐는데 새로운걸 알게 되어서 좋았다
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
Lucid icon / reset 라이브러리
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지