본문 바로가기

리액트2

[React] 누르면 맨위로 움직이는 스크롤 버튼 만들기 top 버튼 안녕하세요. 슈입니다.오늘은 리액트로 누르면 맨위로 움직이는 스크롤 버튼 만드는 법을알려드릴게요.흔히 top 버튼이라고 하죠?위에처럼 생긴 버튼 누르면 쉽게 화면 가장 위로 움직여주는 버튼입니다. 저는 따로 ScrollBtn.js 라는 파일을 만들어서그안에 코드를 적어줬어요.반응형으로 만들었습니다!!화면 크기에 따라 버튼의 크기나 위치도 바뀔거에요.import React, { useEffect, useState } from 'react';import { SlArrowUpCircle } from "react-icons/sl";import styled from 'styled-components';const Div = styled.div`/* 미디어 쿼리: 화면 가로폭이 1000px 미만일 때 */@media.. 2024. 6. 13.
[React] 리액트로 게시판 만들기. Quill 을 이용한 텍스트 에디터 블로그 게시판 안녕하세요. 오늘은 리액트에서 게시판 만들때 사용하기 좋은텍스트 에디터 라이브러리를 알려드릴건데요.Quill을 사용하면 편하게 세팅해서 사용할 수있어요.react에서 다양한 라이브러리를 제공해서 편한 거같아요.먼저 비주얼스튜디오의 터미널에  npm i quill 을 해서 quill 라이브러리를 다운받아줘요. 그 다음원하는 컴포넌트에  quill을 import 해줘요.import Quill from 'quill';import 'quill/dist/quill.snow.css'몇가지 테마가 있는데저는 snow를 사용했어요. 개인적으로 이게 보기좋고 제일 예쁜거같아요. const quillElement = useRef(null); const quillInstance = useRef(null); use.. 2024. 6. 4.