728x90 반응형 Front-end100 React 리액트 초기 설정 네비 페이지화 기초 세팅 / 리액트 앱 생성 😎리액트 앱 생성 create-react-app my-app 터미널에서 리액트 앱을 생성 합니다. 매번 하는 실수지만 전 항상 npm create-react-app my-app npm을 앞에 붙여서 오류를 냅니다. 😎 App 실행 npm start 😎 App.js 정리 App.js 파일에 return 코드 싹 날리셔야합니다. 😎 네비 생성 App.js import React from "react"; //npm install react-router-dom --save import { BrowserRouter, Route, Link, Routes } from "react-router-dom"; import Home from "./view/home/Home"; import Main from "./view/ma.. 2022. 9. 22. [JQuery] 엔터키 이벤트 실행 (엔터키 안누르고) var enter = jQuery.Event( "keydown", { keyCode: 13 } ); 엔터키 이벤트 발생하는 함수 만들어준후 $('#input-box').trigger(enter); 엔터키 trigger이벤트로 실행 가능 나의 경우 특정 모달 오픈시 엔터키 이벤트가 필요했기에 사용 2022. 9. 21. [javaScript] spectrum 라이브러리 사용 color picker palete 만들기 버튼을 클릭하면 picker가 출력 되는것이 아니라 팔레트를 띄우는 color picker입니다. spectrum 공식 사이트 참고 바립니다. 코드 공유 합니다 😎 Cdn 😎 HTML 😎 script 2022. 9. 20. [javaScript] Color Picker ! 컬러 피커 Coloris 자바스크립트로 간단하게 적용하기 컬러 피커 코드 공유 합니다! 😎 cdn 😎HTML cdn이랑 html코드만 넣어도 출력가능합니다. 스크립트 코드로 컬러피커 세팅 변경 할수 있습니다. 😎 script Demo 여기서 확인가능합니다. 2022. 9. 20. [Modal] css로 간단하게 모달창 만들기 CSS로 간단하게 모달 창 만드는 코드 공유 드립니다. X버튼과 CANCLE버튼으로 모달창 닫기 가능합니다. 😎HTML 모달 오픈 버튼 ADD Add label name X Name Description CANCLE SAVE 😎 Script // click on 라벨 추가 모달 열기 $(document).on('click', '#add-btn', function (e) { console.log("click event"); $('#modal').addClass('show'); }); // 모달 닫기 $(document).on('click', '#close_btn', function (e) { console.log("click event"); $('#modal').removeClass('show'); });.. 2022. 9. 20. [JS] Nullish coalescing operator 자바스크립트 '??' 연산자 물음표 두개 Nullish 병합 연산자(??) nullish 병합 연산자( ??) 는 왼쪽 피연산자가 null또는 이면 오른쪽 피연산자를 undefined반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다. 이것은 왼쪽 피연산자가 or 뿐만 아니라 거짓 값 이면 오른쪽 피연산자를 반환하는 논리 OR( ||) 연산자 의 특별한 경우로 볼 수 있습니다 . 즉, 를 사용 하여 다른 변수에 일부 기본값을 제공하는 경우 일부 잘못된 값을 사용 가능한 것으로 간주하면(예: 또는 ) 예기치 않은 동작이 발생할 수 있습니다 . nullish 병합 연산자는 5번째로 낮은 연산자 우선 순위 를 가지며 조건부(삼항) 연산자 보다 바로 낮고 ||바로 높습니다 . const foo = null ?? 'default strin.. 2022. 9. 7. <img/> 이미지의 사이즈 구하기 && 이미지 원본 사이즈 구하기 { const img = e.target; console.log("img 넓이" , img.width); console.log("img 높이" , img.height); console.log("img 원본 넓이" , img.naturalWidth); console.log("img 원본 높이" , img.naturalHeight); }} /> onLoad는 이미지가 로드된후 실행하는 함수이다. img.width를 찍어보면 이미지가 출력된 후의 조정된 사이즈(상의 div등에 의해) 가 출력된다 Intrinsic size (원본사이즈)가 알고싶다면, img.naturalWidth 로 알수있다. Rendered size => img.width Intrinsic size => img.naturalWidth 2022. 9. 6. 웹 창 크기에 따른 페이지 우회 window.innerWidth / setInterval 윈도우창 사이즈 체크는 간단하게 가능 let winSize = window.innerWidth 아래 코드의 경우 1025사이즈를 기준으로 페이지 우회를 하였다. 자바스크립트는 리액트 useEffect처럼 해당 값이 변화하면 실행하는 로직이 존재 하지않음으로 setInterval 사용하여 초마다 윈도우 창의 크기를 체크해야한다. clearInterval(checked); 를 해주지 않은 이유는 페이지를 이동하기 때문이다. 페이지를 이동하지않고, setInterval 을 멈춰야한다면, clearInterval 을 사용해줘야한다. 2022. 8. 31. [React] 암호화 AES CryptoJS 사용하여 암호화/복호화 하기 id값을 암호화시켜 url에 넣어 호출하는 예제 아이디값이 단순 숫자인 경우 보안에 상당히 취약함으로 암호화가 필요하다. 나는 암호화 = 리액트 / 복호화 = nestJS를 사용하였다. 😎 install npm i crypto-js 😎 import import CryptoJS from 'crypto-js'; 😎crypto.js import CryptoJS from 'crypto-js'; const secretKey = process.env.REACT_APP_AES_SECRETKEY //암호화 export const encrypt = (val) => { let text = val.toString(); const data = { id:text }; const encrypted = CryptoJS.AES.en.. 2022. 8. 30. 이전 1 2 3 4 5 6 7 8 ··· 12 다음 728x90 반응형
