전체 글 (274) 썸네일형 리스트형 [React.js] history 객체 이용하기 props 안에는 history객체가 있고 그 안에는 goBack() 등이 있다. 따라서 props.history.goBack()을 통해 뒤로가기를 구현할 수 있다. 자세한것은 콘솔창에 props.history를 찍어보면 바로 알 수 있을 것이다. props로 받지 않고 아래의 예시와 같이 history객체를 바로 받아올 수도 있다. import React from "react"; function Comp({ history }) { return ( history.push('/menu')}>Menu으로 이동 ); } export default Comp; react-router-dom의 페이지 이동시 알림창을 띄우는 block을 이용해 보자 import React, { useEffect } from 'rea.. 스크롤 이벤트 https://ko.javascript.info/size-and-scroll-window Window sizes and scrolling ko.javascript.info - 브라우저 별로 값이 다르게 나올수 있므로 아래 함수를 사용해야되나봄 Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); 현재 높이 맨위가 아닌 맨아래에서 구하려면 scrollTop과 clientHeight를 .. [React.js] http-proxy-middleware Cors이슈 npm i http-proxy-middleware -s const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); }; 모듈을 만들어준다. 화살표 함수 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98 화살표 함수 - JavaScript | MDN 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메 developer.mozilla.org 화살표 함수 소괄호 중괄호 차이점 ()=>{} ()=>() 소괄호 안의 값을 return 해준다. const react = () => ( Hello wo.. [React.js] react-icons react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io www.npmjs.com/package/react-icons npm install react-icons --sa export와 import https://ko.javascript.info/import-export 모듈 내보내고 가져오기 ko.javascript.info export 와 달리 export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있다. 따라서 default를 붙여서 모듈을 내보내면 import 할 때 중괄호 {} 없이 모듈을 가져올 수 있다. 또한 import명도 마음대로 붙일 수 있다. [React.js] Ref https://ko.reactjs.org/docs/refs-and-the-dom.html Ref와 DOM – React A JavaScript library for building user interfaces ko.reactjs.org keydown, keypress 이벤트 차이점 onKeyDown : 키를 눌렀을때 // 동작에 반응한다. 다만 한/영, print screen키는 인식하지 못한다. onKeyPress : 키를 눌렀을때 // 눌러서 실제로 문자등이 입력됐을 때 반응한다. 따라서 ctrl, shift, alt, F1~F12,Enter등은 인식하지 못한다. 이전 1 ··· 24 25 26 27 28 29 30 ··· 35 다음