# react library

23개의 포스트
post-thumbnail

(번역) 리액트와 함께 일반적으로 사용되는 라이브러리들

리액트를 처음 사용하는 경우, 함께 사용하는 라이브러리가 너무 많아서 압도될 수 있습니다. 이 글에서는 여러분이 방향을 잘 잡을 수 있도록 라이브러리들에 대한 간략한 요약을 제공합니다.

2023년 2월 23일
·
3개의 댓글
·
post-thumbnail

TUI 에디터 이미지 업로드 시 hook으로 파일 경로 전달하기

에디터에 작성된 내용은 `getHTML`과 `getMarkdown`로 가져올 수 있다. `getHTML`로 가져온 내용을 직렬화하고 서버에 전송한다. 이미지 업로드는 hook을 이용해 서버에 저장하고 파일 경로를 전달한다.

2022년 12월 18일
·
0개의 댓글
·

next.js 행정안전부 주소 API 사용하기

클라이언트는 http://localhost:3000/ 이고 주소 서버의 주소는 http://www.juso.go.kr/ 으로 서로 다르기 때문에 ...(정확히 cors에 관한 내용은 검색해 보시면 많이 나와요~)next.config 파일 안에 rewr

2022년 10월 31일
·
0개의 댓글
·

dayjs

날짜 및 시간 더하기 빼기 - add(), subtract()day.js에서 지원하는 함수 일부를 기록 해봤다.https://day.js.org/en/더 자세한 사항은 공식문서를 읽어보시길 바랍니다.

2022년 10월 20일
·
0개의 댓글
·

react-hook-form 유효성 검사

이메일 유효성 검사

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

TIL_React-Router

다른 주소에 따라 다른 뷰를 보여주는 리액트 SPA를 위한 라이브러리router : 라우터 역할route matcher : 경로 매칭route changer : 경로 변경필요한 Router라이브러리의 컴포넌트를 가져오면 된다.BrowserRouter로 Router의 범

2022년 8월 1일
·
0개의 댓글
·

[React] React cookie

클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 데이터파일입니다.Key와 Value로 구성되고, String의 형태로 이루어져 있습니다.유효시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되어도 유지됩니다.클라이언트 상태로 로컬에 저장했다가 참조하

2022년 7월 8일
·
0개의 댓글
·
post-thumbnail

jwt-decode

https://jwt.io/에 접속하며 토큰을 붙여넣기 하면 숨겨진 json파일을 볼수 있다.

2022년 7월 7일
·
0개의 댓글
·

[React] react-daum-postcode

Daum 우편번호 검색 서비스를 React 환경에서 간편하게 이용할 수 있습니다.react hook form을 사용 >> 검색하여 받아온 주소 값을 input value값 변경상위 컴포넌트에서 {...methods.register(address)} input value

2022년 7월 4일
·
0개의 댓글
·

React Bootstrap Carousel

부트스트랩도 있고 컴포넌트도 있음컴포넌트로 하는 건 버전이 nodejs 버전이 안 맞아서인지 잘 안돼서부트스트랩으로 ㄱㄱonSlide : slide startonSlid : slide end라고 하는데 onSlide에 파라미터인 direction으로 좌 end 우 st

2022년 6월 22일
·
0개의 댓글
·

IntersectionObserver

예전에는 스크롤 이벤트를 구현하기 위해 scroll, Element.getBoundingClientRect() 등의 메서드를 사용해 하나하나 계산해서 값을 얻어야 했는데 scroll 이벤트의 경우 동기적으로 실행되기 때문에 이벤트 연속 호출, 렌더링 성능 저하 등의 문

2022년 6월 22일
·
0개의 댓글
·

[React] DatePicker

참고로 DatePicker라는 컴포넌트 안으로 들어가는 컴포넌트였기 때문에 추후 직접 접근하기 위해(또한 라이브러리 권고사항이었다) forwardRef로 감싸준 후 데이트피커의 props로 내려주었다.

2022년 6월 7일
·
0개의 댓글
·
post-thumbnail

[React] react hook form

React에서 form의 validation을 도와주는 라이브러리이다.이 라이브러리는 기본적으로 uncontrolled component를 베이스로 하지만 controlled component에 대한 지원도 하고 있다.가볍다.다른 디펜던시가 없다.ref를 기반으로 하여

2022년 6월 5일
·
0개의 댓글
·

[swiper] 사용법

display:none 를 하면 arrow 없어짐

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

[React] react-device-detect

React에서 모바일 기기 접근을 감지할 수 있는 방법을 찾던 중 react-device-detect라는 라이브러리를 발견했는데 react-device-detect는 아주 간단하게 모바일 접근을 감지할 수 있었습니다.https://www.npmjs.com/pa

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

[React] react-loader-spinner

업로드중..

2022년 5월 25일
·
0개의 댓글
·
post-thumbnail

[React] react-intersection-observer

어떤 Element가 화면(viewport)에 노출되었는지를 감지할 수 있는 API이며 이런 유용한 점을 이용해서 우리들은 무한 스크롤(Infinite Scroll)을 만들어볼 수 있습니다.무한 스크롤을 구현할 때는 Scroll Event를 감지해서 유저가 화면 제일

2022년 5월 25일
·
0개의 댓글
·
post-thumbnail

[React] react-cookie

회원가입과 로그인 같은 인증(auth) 기능을 구현하기 위해서 프론트엔드에서 쿠키에 토큰(jwt)을 저장하는 경우에 react-cookie를 사용 합니다.set과 get함수로 쿠키를 저장하고 이용한다.

2022년 5월 25일
·
0개의 댓글
·

Pagination & Infinite Scroll

게시글이나 댓글 등 목록화 되어있는 데이터를 받아올 때 한꺼번에 모든 데이터를 받아올 수 없기때문에 일정 양만큼 나누어 받아와야 한다.예를 들어 게시판의 게시글이 999개가 있을 때, 한 페이지에 10개의 게시글씩 나눈다면 100개의 페이지가 생길 것이다.이런 작업을

2022년 4월 2일
·
0개의 댓글
·

Styled-Component (TIL 57일차)

프로그래밍을 공부하면서 HTML, CSS, Javascript 가 서로 독립적인 기능을 가지고서 상호작용한다는 것을 알게 되었습니다. 서로가 독립적이라면 개발은 물론 유지보수를 해야할 때에도 무엇을 찾아봐야 할지가 명확해질 겁니다. 스타일링을 손봐야 할 때는 CSS,

2021년 6월 1일
·
0개의 댓글
·