STUDY/React (52) 썸네일형 리스트형 React | 페이지 이동 제어하기 ( prevent navigation | react-router-dom Prompt Custom) 무언가를 작성하다가 저장하지 않고 해당 페이지를 나가려고 할 때, 제어하는 방법.. 0. react-router-dom 설치 설치되어 있지 않다면 install해주기 $ npm i react-router-dom 1. Prompt? react-router-dom에서 제공해주는 api로, 유저가 다른 페이지로 이동하려고 할 때 렌더된다. when은 말그대로 Prompt가 언제 실행되는지 설정하는 것으로 true/false값을 받는다. message는 String값 혹은 Fuction을 넣을 수 있다. 2. 커스텀해보기 현재 제작중인 웹 애플리케이션에서 저런 alert은 전혀 사용하고 있지 않기 때문에... 커스텀하여 모달로 띄우기로 한다. 2-1. Prompt를 언제 띄울지 설정해주기 무엇인가를 한 번이라도.. React | react-datepicker (+ 커스텀) 디자인도 깔끔하고, 문서가 잘 되어있다. Installation npm install react-datepicker --save 기본 사용방법 꼭 css파일도 import해줘야 한다. import DetePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; function SomeComponent () { return ( ) } export default SomeComponent; Locale 설정 기본적으로 영어로 설정되어 있고, 한국어로 변경할 수 있다. date-fns를 설치해야 한다. npm install date-fns --save import DatePicker from "react-datepic.. React | 타이머 만들기 ( Hooks, setInterval ) Hooks를 사용합니다. 1. Timer구현할 컴포넌트 생성 props로 mm은 분(minutes)을, ss는 초(seconds)를 받아옴 import React, { useState, useEffect } from "react"; const Timer = ({ mm, ss }) => { const [minutes, setMinutes] = useState(parseInt(mm)); const [seconds, setSeconds] = useState(parseInt(ss)); return ( {minutes}:{seconds < 10 ? `0${seconds}` : seconds} ); }; export default Timer; 2. useEffect를 이용해 setInterval 선언 초가 0이면서.. React | npm react-kakao-login 0. Kakao Developers에 애플리케이션 등록 후 JavaScript key 발급받기 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. react-kakao-login install $ npm install react-kakao-login 2. 사용! jsKey, onSuccess, onFailure항목은 필수 jsKey: 발급받은 JavaScript Key입력. 만약 백엔드 서버에서 다른 처리를 한다면 백엔드 서버에서는 REST API Key를 사용해야 함. onSuccess: 카카오 로그인 성공시 핸들러 - response를 인자.. React | icon 변경 public 폴더의 기존 favicon.ico를 삭제한 뒤 사용하고자 하는 아이콘을 public 폴더로 이동 후 favicon.ico로 이름을 변경해주기 그냥 이미지 파일로 등록하면 일반 path에서는 되는데, router를 이용해 중첩라우팅을 하면 적용되지 않는다.. 무조건 favicon.ico로 해주기 How to change the favicon in React In this tutorial, we are going to learn about how to change the default favicon in react app, which is set by the CLI. Changing the favicon… reactgo.com React | 이미지 onError처리 (img onError) const handleImgError = (e) => { e.target.src = defaultProfile; } React | 이미지 크기 줄여 업로드하기 (image resize / browser-image-compression) npm browser-image-compression패키지를 사용하여 이미지 사이즈를 줄이는 방법 1. browser-image-compression install npm i browser-image-compression 2. 모듈 import import imageCompression from 'browser-image-compression'; 3. 컴포넌트 작성 file을 입력받을 input태그와 이미지를 미리보기 할 img태그 생성 *이미지 미리보기는 이전글 참고 - React | 이미지 업로드 후 미리보기 (on Change / image preview) 입력받은 파일을 담을 file state와 미리보기를 위한 fileUrl state도 생성 import React, {useState, useE.. React | id저장하기 (react-cookie) 쿠키에 아이디를 저장하고, 저장되어있을 경우 아이디 입력란에 나타나있도록 하기.. 1. install npm install react-cookie react-cookie Universal cookies for React www.npmjs.com 2. import import { useCookies } from 'react-cookie'; 3. 사용예시 hooks로 사용할 수 있다. const [cookies, setCookie, removeCookie] = useCookies(['rememberEmail']); import React, { useState, useEffect } from 'react'; import {useCookies} from 'react-cookie'; const LoginPage .. 이전 1 2 3 4 5 6 7 다음
