코딩마을방범대

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..

가끔 최신버전이 아닌 노드를 사용할 경우 패키지가 정상적으로 설치가 되지 않거나 실행이 되지 않는다. 이럴 때 노드 변경이 필요한데 여러 버전 설치하고 바꾸는 과정이 어려운 것 같아서 지웠다가 설치했었는데.. 매번 지웠다가 설치하기엔 리스크가 너무 크다!! 오래걸리고 귀찮기도하고 그냥 한 번 귀찮더라도 배워놓는게 좋을 것 같아서 알아봤다. 일단 NVM이라는게 필요하다. NVM (Node Version Manager) NVM은 여러 버전의 Node.js를 설치해서 사용할 수 있도록 도와주는 도구다. 일단 아래 링크를 통해 설치해주자! https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js ..

Promise 자바스크립트 비동기 처리에 사용되는 객체이며, 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 비동기 처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것 프로미스 예제 콜백함수를 사용하는 Ajax 코드 function getData(callbackFunc) { $.get('url 주소', (response) => { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData((tableData) => { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 }); 위의 콜백 함수로 처리하던 구..

프로젝트를 배포했을 때 사용자가 몰리게 된다면 쓰레드 부족 등으로 서버가 터질 수 있다. 이를 사전에 체크하는 것이 필요할 수 있는데, 부하테스트 프로그램을 알아보자면 제일 유명한 JMeter 와 Artillery가 있다. JMeter은 쓰레드 수를 지정해놓고 테스트를 진행하는거라 내가 진행해야할 테스트와는 부합하지 않았으므로 Artillery를 사용해볼 예정이다. 부하테스트란? 임계치의 한계에 도달할 때까지 시스템에 부하를 꾸준히 증가시키며 진행하는 테스트 Artillery ArtilleryVisit Website는 Node.js로 작성된 스트레스 테스트 도구이다. 특징 HTTP(S), Socket.io, Websocket 등 다양한 프로토콜을 지원한다. 시나리오 테스트를 할 수 있다. JavaScri..

웹프론트를 작업하게 되면 node.js를 사용하게 된다. Node.js 사이트에서 node를 직접 다운로드하게 되면 추가적으로 설치되는 npm이란게 있다. npm은 대충 리눅스의 apt 정도로만 생각하고 있었는데 package.json 을 알아보기 위해 npm에 대해 조금 짚고 넘어갈 필요가 있다! NPM(Node Package Manager) npm은 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하고 있다. node.js를 위한 패키지 매니저 node.js를 위한 오픈소스 생태계 npm이 생겨난 이유는 Isaac Z. Schlueter라는 사람이 작업 중 모듈 패키징이 엉망으로 되는 것을 확인하여 만들게 되었다고 한다. package.json 개발자가 배포한 패키지에 대해, 다른 사..