반응형 WebDev/React-Next12 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. next/dynamic과 Lazy Loading을 알아보자 서버사이드 렌더링을 하는데 클라이언트사이드 렌더링 환경에서만 돌아가는 코드를 실행해보려고 한 적 있으신가요?!오류를 만납니다 빨강빨강!!!! 이런 경우에 next/dynamic 패키지를 사용해 레이지 로딩 처리하면 간단하게 해결 가능해요!!! 알아보죠!Lazy Loading리소스를 필요한 경우에만 불러오는 전략필요한 경우에만 불러오기 때문에 초기 로딩 속도를 향상시킬 수 있다.!ex) 이미지가 100장 있다고 친다면 100장을 다 불러오려고 하는데 사용자 경험이 매우 나빠질 것이다.하지만 사용자가 보는 가시영역만 불러온다면? 속도가 빠를 수 있을 것이다.이런식으로 필요할 때 불러오는게 Lazy Loading 이미지나 라이브러리 컴포넌트 단위로도 Lazy Loading이 가능하다.필요 시 로드사용자가 특정.. 2024. 6. 13. Next의 Link 컴포넌트에 대해 알아보자 넥스트의 링크 컴포넌트는 html의 a태그와 같은 역할을 한다.(페이지 이동이나 새창 열기 등)12에서는 링크안에 a태그를 감싸야 했지만 13부터는 필요 없음~원리나 내용은 밑에서 설명 해보자!Link옵션들로 href, scroll, replace, prefetch가 있다.href해당 링크가 연결될 주소(required)replace링크로 이동시 history.replace를 사용할지 여부(기본값 flase)scroll링크로 이동 후 페이지 스크롤 초기화 여부(기본값 true )prefetch링크컴포넌트가 뷰포트에 표시될 경우 프리패치 해놓을지 말지(ux향상)import Link from 'next/link';function MyPage() { return ( My Page H.. 2024. 6. 12. React(리액트)의 useRef에 대해 공부하자! useRef는 리액트에서 제공하는 훅 중 하나인데 useState와 비교가 많이 되는 훅인 것 같다.함수형 컴포넌트에서 특정 DOM 요소나 값을 참조할 수 있게 해주는 useRef를 오늘 알아보자!useRefDOM 요소 접근특정 DOM 요소에 접근하거나 조작할 때 사용되는데, 직접 DOM 요소에 접근하여 원하는 작업을 수행할 수 있다querySelector처럼 요소에 접근이 가능 값 저장렌더링 사이에 값을 저장하고 싶을 때 사용되고,. 리렌더링이 발생해도 유지된다.컴포넌트가 리렌더링될 때마다 초기화되지 않고, 지속적으로 유지되어야 하는 값을 저장하는 데 사용useRef의 기본 사용법//ref 사용const myRef = useRef(initialValue);myRef.current initialValue.. 2024. 6. 5. React(리액트)의 Props를 공부해보자 State는 저번시간에 알아보았고 또 중요한 부모애서 자식으로의 데이터 전송하는 Props를 알아보자상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달하는 도구가 PropsProps는 컴포넌트의 속성(HTML의 어트리뷰트 같은 것)을 나타내며,부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용한다또한 props 변경에 따라 컴포넌트가 리렌더링될 수 있다(나중에 알아보자)Props 개념 이해하기Props는 두 가지 방식으로 사용할 수 있는데,구조 분해 할당 없이 props를 인자로 전달하는 방식구조 분해 할당을 사용하여 props 속성을 직접 접근하는 방식function App() { return ( // name이라는 속성으로 Alice라는 값 내려주기 .. 2024. 6. 1. React(리액트)의 useState를 공부하자! 기초니까! 오늘은 리액트의 useState에 대해서 알아보고자 한다.완전 기초이지만 완전 중요한 상태관리 그 중에서도 잘 이해하고 넘어가야 하는 useState를 공부해보자useState리액트에서 상태 관리를 위해 사용되는 Hook 중 하나로써프론트엔드에서 상태관리는 매우 중요하다.그 상태관리를 위해 useState를 사용함으로써 함수 컴포넌트 내에서 상태를 가지고 활용하게 된다. useState의 기본 사용법// 새로운 상태 변수를 선언하고. "count"라는 이름의 상태 변수를 0으로 초기화하기const [count, setCount] = useState(0); useState는 두 가지를 반환하는데상태 값(count)이 상태를 설정할 수 있는 함수(setCount)(네이밍은 아무렇게나 해도 상관없지만 [상태값.. 2024. 5. 31. 이전 1 2 다음 반응형
