분류 전체보기(124)
-
[React] 소셜 로그인 API
네이버 const { naver } = window; const location = useLocation(); const NAVER_CALLBACK_URL = 'NAVER_CALLBACK_URL 넣어주세요.'; const NAVER_CLIENT_ID = '클라이언트 ID'; const initializeNaverLogin = () => { const naverLogin = new naver.LoginWithNaverId({ clientId: NAVER_CLIENT_ID, callbackUrl: NAVER_CALLBACK_URL, isPopup: false, loginButton: { color: 'white', type: 1, height: '47' }, }); naverLogin.init(); }; c..
2021.07.06 -
[JS] emailjs 이메일 보내기
http://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com emailJS는 javascript API로 웹에서 바로 메일을 보낼 수 있도록 지원한다. 월 200건까지는 무료로 사용이 가능하다. 만약 파일 첨부와 같은 기능을 사용하려면 돈을 ..
2021.07.05 -
[React] useHistory
react-router-dom의 hooks를 사용하여 경로를 설정해보자 사용할 hooks는 useHistory이다. 예제에서 링크를 버튼으로 만든 뒤, onClick 이벤트를 걸어서 경로를 변경시킬 것이다. import { useHistory } from "react-router-dom"; useHistory를 import 해준다. const history = useHistory(); history.push('/List')}>List 이동 버튼을 클릭 시 해당하는 컴포넌트로 이동하게 된다.
2021.07.01 -
[React] React Query 사용하기
React Query 란 무엇입니까? React Query는 상태 관리 도구이며 '글로벌 상태'와 관련이없는 서버 상태 React 애플리케이션에서 원격 비동기 데이터 를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 데 사용됩니다 . 설치 $ npm i react-query 또는 $ yarn add react-query React Query에서 가장 환영받는 부분 중 하나는 전용 devtools 세트와 함께 제공된다는 것입니다. React Query를 사용한 여정이 재미 있고 놀라운 경험이되기를 원한다면이 devtools를 원할 것입니다. 수행해야 할 작업은 다음과 같습니다. import { ReactQueryDevtools } from "react-query/devtools"; react에서 비동기를 ..
2021.07.01 -
[ETC] 캐싱이란?
캐싱 개요 캐싱은 애플리케이션 성능을 대폭 개선하고 비용을 크게 절감해 줍니다. 캐싱이란 무엇입니까? 컴퓨팅에서 캐시는 일반적으로 일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층입니다. 따라서 이후에 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스할 때보다 더 빠르게 요청을 처리할 수 있습니다. 캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 효율적으로 재사용할 수 있습니다. 캐싱은 어떻게 작동합니까? 캐시의 데이터는 일반적으로 RAM(Random Access Memory)과 같이 빠르게 액세스할 수 있는 하드웨어에 저장되며, 소프트웨어 구성 요소와 함께 사용될 수도 있습니다. 캐시의 주요 목적은 더 느린 기본 스토리지 계층에 액세스해야 하는 필요..
2021.07.01 -
[JS] 자바스크립트 Array forEach
forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다. 하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다. 1. [].forEach(callback, thisArg) 기본적인 forEach의 사용법은 아래와 같습니다. const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){ console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => console.log(element)); arr 객체의 요소들이 callback 함수에 순서대로 호출되..
2021.06.30