개발일기

1. 기본 내장 이벤트1-1. connection// serverio.on('connection', (socket) => { console.log('Socket connected:', socket.id);})// Socket connected: bvZFBsat9v2GBCJYAAAJ클라이언트가 서버에 연결되면 발생하는 이벤트다. 연결되면 클라이언트의 socket정보를 확인 할 수 있다. 1-2. disconnect// serverio.on('connection', (socket) => { console.log('Socket connected:', socket.id); socket.on('disconnect', () => { console.log('Socket disconnect..

1. SSE(Server Side Events)SSE는 HTTP기반의 스트리밍 기술이며 Websocket과 다르게 서버에서 클라이언트로 메시지를 보내기만 하면 되는 단방향 통신이 필요할때 사용하기 적합한 기술이다. 즉, 클라이언트가 요청을 하지 않아도 서버에서 자동으로 데이터를 보내야 하는 경우에 사용한다. 만약 클라이언트에서 서버로 요청을 보내야하면 RestAPI를 사용하여 요청을 보내면 SSE의 단점을 보완하여 사용할 수 있다.// Clientconst eventSource = new EventSource('url...')new EventSource를 사용하여 클라이언트에서 SSE 연결을 시작하게 할 수 있다. 입력된 url로 클라이언트가 GET요청을 보내게 되고 서버는 text/event-strea..

URLSearchParams는 URL의 쿼리 문자열을 다룰 때 주로 사용하며 보통 window.location.search와 같이 사용한다. window.location.search는 현재 브라우저의 쿼리 문자열을 출력한다.console.log(window.location.search)// 예상 출력) ?id=123&fruit=mango현재 주소가 localhost?id=123&fruit=mango 라면 ? 뒤에 붙은 쿼리 문자열만 출력한다. 이를 URLSearchParams와 함께 사용하여 특정 키를 가져오도록 할 수 있다.const params = new URLSeacrhParams(window.location.search)console.log( params.get('id') ) // 123conso..

javascript에서 yaml파일을 읽어들이려면 js-yaml이라는 npm 모듈을 설치해야 한다.yarn add js-yamlnpm install js-yaml 모듈 설치 후, 로컬에 설치되어 있는 yaml파일을 불러오거나 cdn 등에 올라가있는 외부 yaml파일을 불러와 사용할 수 있다.const fs = require('fs');const yaml = require('js-yaml');const fileContents = fs.readFileSync('yaml file path', 'utf8')const data = yaml.load(fileContents)console.log(data) // yaml file data 로컬에 있는 경우는 fs.readFileSync로 yaml파일을 읽어들인 후에 ..

useNavigate는 useHistory를 대체하여 react router dom v6에서 도입되었다. useHistory와 동일하게 url을 변경하여 페이지를 이동시키는데 사용된다.useNavigate 기본 사용법import { useNavigate } from 'react-router-dom' // 6버전 이상에서만 사용 가능const navigate = useNavigate()navigate('/test') // /test url로 이동기본적인 사용법은 위와 같이 useNavigate를 import한 후, navigate()에 이동할 url를 추가하여 사용한다. 예를 들어 버튼 onClick 함수에 navigate()를 정의하면 버튼을 클릭했을 때, 입력한 url로 이동하게 된다. 위의 방법 외에..

useCallback은 useMemo와 비슷하게 memoization하는 hook이지만 함수를 memoization한다는 점에서 useMemo와 차별점을 가지고 있다. React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다. 하지만 useCallback으로 감싸 memoization된 함수는 의존성 배열에 들어있는 변수 또는 함수가 변경되지 않은 이상 재생성되지 않는다. 즉 useMemo와 비슷한 개념으로 useCallbak은 기존 함수를 재사용할 수 있게 하는 hook이다. useCallback의 형태import { useCallback } from 'react' // useCallack 사용을 위해 useCallback import// useCallb..

react에는 변수, 함수의 성능을 최적화하는 hook인 useMemo와 useCallback이 존재한다. useMemo는 그 중에서 변수를 최적화 할 때 사용한다. useMemo는 변수의 값을 memoization한다. 여기서 memoization 이란 값을 캐싱하여 나중에 재활용하는 것을 의미한다. useMemo는 변수의 값을 memoization 하여 의존 변수가 변경되지 않으면 캐싱된 변수 값을 계속 사용한다. 만약 의존 변수가 변경되면 캐싱된 데이터를 삭제하고 새로 변수 값을 계산하여 대입한다. useMemo의 형태import { useMemo } from 'react' // useMemo 사용을 위해 useMemo import// useMemo로 함수를 감싸기const memoizedValue..

자바스크립트에서 비동기 작업을 처리하기 위해 주로 사용되는 방법은 Promise.all과 Async Await다. Promise.allPromise.all은 비동기로 실행할 여러 개의 Promise 객체를 배열에 넣어서 병렬로 실행한다.const promise1 = setTimeout(() => { console.log('Start Promise1')}, 2000) // 2초 후 실행(setTimeout)const promise2 = setTimeout(() => { console.log('Start Promies2')}, 1000) // 1초 후 실행(setTimeout)// Promise.all 배열에 비동기로 실행한 작업들을 추가Promise.all([promise1, promise2])..