리액트 프로젝트에 폰트를 적용해 주자 폰트 다운로드하기 먼저 구글 폰트에서 원하는 폰트를 다운로드한다 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 스타일의 폰트들만 프로젝트 상단에 assets/font 폴더를 만든 뒤 넣어주었다 css 파일 작성하기 다운로드한 폰트를 사용하기 위해 css파일을 만들고, 각 폰트를 선언해 준다 @font-face { font-family: 'Dohyeon'; src: url('../assets/fonts/DoHyeon-Regular.ttf') format('t..

https://fkhadra.github.io/react-toastify/how-to-style/ How to style | React-Toastify ## Override css variables fkhadra.github.io 위 사이트를 참고해 toast의 스타일을 커스텀하게 작성해 보았다 커스텀 스타일 작성 일단 styled-components를 사용해 원하는 스타일을 만들어준다 위 사이트에 원하는 속성을 검색하면 클래스 명을 찾을 수 있다 export const StyledToastConatiner = styled(ToastContainer)` margin-right: 40px; .Toastify__toast { display: flex; align-items: center; width: 300..

리액트 프로젝트에서 텍스트 에디터로 react-quill을 써보았다 https://www.npmjs.com/package/react-quill react-quill The Quill rich-text editor as a React component.. Latest version: 2.0.0, last published: a year ago. Start using react-quill in your project by running `npm i react-quill`. There are 751 other projects in the npm registry using react-quill. www.npmjs.com 일단 설치를 한다 npm install react-quill 그리고 import후 바로 불러..

recoil에는 atom 값을 사용하기 위한 여러 hook이 있는데 이 hook들에 대해 정리해 본다 먼저, todoState라는 Atom을 생성하였다. const todoState = atom({ key: 'todoState', default: '', }); useRecoilState const [todo, setTodo] = useRecoilState(todoState); atom을 읽고 쓰려고 할 때 사용한다. react의 useState와 비슷하다. 기본값 대신 recoil의 상태를 인자로 받는다. useRecoilValue const todo = useRecoilValue(todoState); atom의 값만 읽어오고 싶을 때 사용한다. 상태가 업데이트되면 리렌더링 된다. useSetRecoil..

리액트를 시작하게 되면서 무슨 상태관리 툴을 사용할지 고민했고 redux가 아닌 새로운 상태관리 툴을 사용해보고자 recoil을 써보기로 결정했다 recoil의 특징과 사용 방법에 대해 정리해본다 Recoil Recoil은 페이스북이 2020년 5월 소개한 리액트 전용 상태관리 라이브러리이다. store, action, reducer 등을 신경 쓸 필요 없이초기 세팅이 간단하며, 단순한 사용법을 가지고 있다. 또한 리액트를 위해 만들어진 상태관리 라이브러리이기에 리액트처럼 동작하며 리액트를 사용했던 사람이라면 쉽게 접근 가능하다. 공식문서에 따르면 다음과 같은 장점이 있다고 한다 https://recoiljs.org/ko/ Recoil A state management library for React. ..