반응형 FrontEnd89 Next와 ffmpeg로 rtsp 출력하기 저번 화재 관제 시스템을 출력할때는 node-rtsp 라이브러리를사용했는데 뭔가 안정성이 떨어진다는 느낌을 받았다. 이번에 다른 프로젝트는 조금 다른방법으로 시도 하였고 ws가 아닌 http/https 방식을 사용하고 mp4로 변환 후 사용하는 클라이언트에서 도메인을 연결하고 렌더하는 방식으로 진행하였다. 바로 코드로 설명해보자클라이언트'use client';import { useEffect, useState } from 'react';const Rtsp = () => { const [videoRefs, setVideoRefs] = useState[] >([]); const [streamUrls, setStreamUrls] = useState([]); const [streamNames, setSt.. 2024. 8. 27. JS(자바스크립트)의 콜스택, 태스크큐, 이벤트루프에 대해 알아보자 싱글스레드인 자바스크립트에서는 어떤 식으로 비동기 처리를 하게 될까?정답은 콜스택, 태스크큐, 이벤트루프 이 공간안에서 해결한다. 오늘은 각 개념과 흐름을 보면서 이해해보도록 하자!콜 스택 (Call Stack)콜 스택은 자바스크립트가 현재 실행 중인 함수를 추적하는 자료구조자바스크립트는 단일 스레드에서 동작하기 때문에 한 번에 하나의 코드만 실행할 수 있음콜 스택은 LIFO(Last In, First Out)(후입선출) 구조를 따른다함수 호출: 함수가 호출되면 콜 스택에 푸쉬(push)함수 종료: 함수 실행이 끝나면 콜 스택에서 팝(pop)태스크 큐 (Task Queue)태스크 큐는 비동기 코드(예: setTimeout, webAPI 등)가 완료되었을 때 실행할 콜백 함수들이 대기하는 장소태스크 큐는 .. 2024. 7. 15. JS(자바스크립트의) 메모리 누수에 관해 알아보자 많은 경우에 코드를 작성하다 보면 메모리 누수가 발생하게 된다.우리는 성능 좋은 쩌는 웹앱을 만들것이기 때문에 이런거는 생각하고 코드를 적어야 한다.!그러므로 메모리 누수에 대해 알아보자!메모리 누수더 이상 필요하지 않은 데이터가 해제되지 못하고 메모리를 계속 차지하게 되는 현상 큰 예시들로 4가지가 있는데 코드와 함께 살펴보자 불필요한 전역 변수 사용var globalVar = "global"; // 불필요한 전역 변수function doSomething() { console.log(globalVar);}doSomething();function doSomething() { let localVar = "local"; // 필요한 범위 내에서만 변수를 선언 console.log(local.. 2024. 7. 14. JS(자바스크립트)의 클로저에 대해 알아보자 클로저는 자바스크립트에서 알아야하는 중요한 개념이므로 정리해두고자 한다.함수와 그 함수가 선언된 렉시컬 환경을 함께 기억하는 함수로써,함수가 선언된 위치에서의 스코프(유효 범위)를 기억, 함수가 호출될 때 그 스코프에 접근할 수 있게 해준다.이제 조금 더 자세하게 들어가보자!클로저의 정의클로저는 함수가 선언될 때의 렉시컬 스코프를 기억하고,그 함수가 호출될 때 해당 스코프의 변수를 참조할 수 있는 개념클로저는 보통 내부 함수가 외부 함수의 변수를 참조하는 경우에 형성된다.예시코드function outerFunction() { let outerVariable = "outside!"; function innerFunction() { console.log(outerVariable.. 2024. 7. 13. JS(자바스크립트)의 불변성과 가변성, 얕은 복사와 깊은 복사 알아보기 자바스크립트는 다양한 데이터 타입을 제공하며,이 데이터 타입들은 불변성과 가변성의 특성을 가진다이러한 특성은 데이터의 복사 및 조작 시 중요한 개념으로 작용하는데,자바스크립트의 불변성과 가변성, 그리고 얕은 복사와 깊은 복사에 대해 알아보자!불변성불변성은 생성된 데이터가 메모리에서 변경되지 않는 특성자바스크립트에서 원시형 데이터는 불변성을 가짐숫자(Number)문자열(String)불리언(Boolean):null:undefined: 심볼(Symbol): 이러한 데이터 타입은 한 번 생성되면 변경할 수 없음예를 들어, 문자열을 조작하는 메서드는 새로운 문자열을 반환하며, 원래 문자열은 변경되지 않는다!가변성가변성은 생성된 데이터가 메모리에서 변경될 수 있는 특성자바스크립트에서 참조형 데이터는 가변성을 가짐객.. 2024. 7. 12. JS(자바스크립트)의 히스토리에 대해 알아보자! 브라우저 히스토리브라우저 히스토리 API는 웹 애플리케이션이 사용자의 세션 기록을 제어하고 조작할 수 있도록 해주는 도구 SPA에서의 네비게이션을 구현하거나, 사용자 경험을 향상시킬 수 있다!이번 포스팅에서는 히스토리 API의 주요 메서드와 속성들을 알아 보자히스토리 API의 주요 속성 및 메서드속성length: 현재 세션 기록에 있는 히스토리의 개수를 반환scrollRestoration: 히스토리 탐색 시 스크롤 위치를 복원할지 여부를 설정 'auto'와 'manual' state: 현재 히스토리에 등록된 데이터(상태)를 반환메서드back(): 히스토리에서 뒤로 이동(이전 페이지로 이동).forward(): 히스토리에서 앞으로 이동(다음 페이지로 이동).go(위치): 현재 페이지를 기준으로 특정 히스.. 2024. 7. 11. 이전 1 2 3 4 ··· 15 다음 반응형