분류 전체보기 (287) 썸네일형 리스트형 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를 언제 띄울지 설정해주기 무엇인가를 한 번이라도.. MySQL | Unknown collation: 'utf8mb4_0900_ai_ci' 데이터베이스에서 Columns정보 확인 했을 때 utf8mb4와 utf8mb4_0900_ai_ci가 설정되어있다면 해당 컬럼을 utf8, utf8_general_ci로 변경해주자... MySQL | Geolocation 거리 구하기 경도 == x == latitude 위도 == y == longtitude ROUND(6371 * acos( cos( radians( [현재 경도] ) * cos( radians( [비교할 위도] ) ) * cos( radians( [비교할 경도] ) - radians([현재 위도]) ) + sin( radians( [현재 경도] ) * sin( radians( [비교할 위도] ) ) ), 2) Spring Boot | multipart/form-data 파일 업로드 ( + React , Axios, REST API, multiple files) 클라이언트(React) 측에서 파일과 함께 JSON데이터를 전송해보기. 찾아보면 파일 하나만 전송하는 경우 예제는 많은데 JSON데이터와 함께 보내는 건 잘 없었다.. 거기다가 나는 모델 안에 오브젝트들을 다 넣어놔서 복잡한 형태였기 때문에 꼭 JSON형태로 한 번에 보내고 싶었음.. 1. FormData로 작성해주기 어딘가에서 받아온 값을.. FormData에 담아준다. FormData에는 키와 값 쌍으로 담아주어야 함. JSON형태로 바로 보내면 백엔드 서버에서는 알아볼 수 없기 때문에 stringify를 이용해 보내야 한다. const formData = new FormData(); formData.append("file", data.file); formData.append( "key", new B.. 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를 인자.. Spring | Illegal overloaded getter method 이 에러가 발생하고 lombok을 사용중이라면... Model을 확인해보자... 스프링시큐리티를 사용하면서 UserDetails를 상속받기 때문에 isEnabled가 필요했는데, enabled값과 같다고?인식한것같다.. 아무튼... 기억하기 위해 올립니다... ...생략 //private String enabled; ...생략 @Override public boolean isEnabled() { // TODO Auto-generated method stub return true; } +) 참고 mybatis Illegal overloaded getter method java model 객체에 boolean isTest boolean getTest 반환타입이 boolean 메소드에 동일한 getter 가 .. 이전 1 ··· 20 21 22 23 24 25 26 ··· 36 다음
