목록javascript (4)
코딩마을방범대
React의 useRef .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환함 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook JavaScript의 querySelector 역할을 함 Ref reference, 즉 참조 input 객체에 포커스를 거는 예제 import { useRef, useEffect } from "react"; import "./styles.css"; function App() { const inputRef = useRef(); function focus() { inputRef.current.focus(); } return ( Login focus ); } export default App; 포커스 버튼을 ..

웹 소켓을 이용한 메시지 전송(백엔드 - SpringBoot) - 이전포스트 이전엔 백엔드에서 웹소켓 기능을 처리하는 방법을 포스팅했었다. 이번엔 프론트에서 구독 및 메시지 받기 등을 진행할 것이다. 패키지 설치 > npm i soketjs-client, @stomp/stompjs --save 스크립트 파일 import SockJS from 'sockjs-client'; import StompJs from '@stomp/stompjs'; const client = new StompJs.Client({ brokerURL: 'ws://localhost:80/test', connectHeaders: { login: 'user', passcode: 'password', }, debug: function (str..
Promise 자바스크립트 비동기 처리에 사용되는 객체이며, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 비동기 처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것 프로미스 예제 콜백함수를 사용하는 Ajax 코드 function getData(callbackFunc) { $.get('url 주소', (response) => { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData((tableData) => { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 }); 위의 콜백 함수로 처리하던 구..

포스트맨에서 AES 암호화한 값을 변수로 쓰고 싶을 경우 어쩔 수 없이 포스트맨에서 제공하는 javaScript로 추출할 수 밖에 없다! 나의 경우 자바의 AES256 암호화값을 포스트맨에서 그대로 변수로 사용해야 하는데, 물론 API를 통해 response 값을 받을 수 있지만 코드를 수정하지 않는 선에서 해결해야 했다 아래는 자바에서의 AES256 암호화 내용이다 public static String encrypt(String str, String seckey) throws IOException, GeneralSecurityException { byte[] keyData = seckey.substring(0, 32).getBytes(); String IV = seckey.substring(0, 16)..