Web.d 썸네일형 리스트형 [React][Context] Prop drilling 과 useContext (1/2) Prop Drilling (프로퍼티 내리꽂기) Typescript를 공부하며, Prop interface의 중복을 모듈화 하여 해소할 수 있을까 했는데, 애초에 많이 중복된다는 것은, prop drilling 문제의 가능성이 있을 수 있다고 하여 공부해보았다! Prop Drilling, 그게 뭔가요? Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서, React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정을 말한다. import React from "react"; export default function App() { return ( ); } function FirstComponent({ content }) { .. 더보기 [React][react-router] react-router-dom v6 (Upgrading from v5) React v16.8 React Router v6은 React Hook을 많이 사용하므로 React Router v6으로 업그레이드를 시도하기 전에 React 16.8 이상에 있어야 합니다. 좋은 소식은 React Router v5가 React >= 15와 호환된다는 것입니다. 따라서 v5(또는 v4)를 사용 중이라면 라우터 코드를 건드리지 않고도 React를 업그레이드할 수 있어야 합니다. React 16.8로 업그레이드했으면 앱을 배포해야 합니다. 그런 다음 나중에 다시 돌아와서 중단한 부분부터 다시 시작할 수 있습니다. React Router v6 makes heavy use of React hooks, so you'll need to be on React 16.8 or greater before .. 더보기 [React][react-router] react-router-dom v5 "react-router-dom"의 목적 SPA 개발에서, 페이지 이동을 위해 React로 Single Page를 개발하며 우리는 한 종류의 화면만 구성을 하는가? → X 우리는 여러 페이지의 웹 애플리케이션을 개발한다. 그 페이지들은 각각의 주소를 가져야, 유저들이 북마크를 하거나 검색엔진에도 최적화될 수 있다 Routing 다른 주소에 따라 다른 뷰를 보여주는 것을 Routing이라고 한다 우리는 이를 위해 react-router 라이브러리를 사용하게 된다 React에서 거의 유일한 Routing 패키지이며, 가장 많이 사용하는 패키지이다 설치 및 사용 yarn add react-router-dom import { BrowserRouter, Route, Link, Switch } from "react.. 더보기 [Javascript] 웹 브라우저에서 녹화하여 서버로 보내기 (MediaRecorder / Blob) 영상 파일을 이용하여 사람의 감정을 분석하는 ML을 구성하기 위해, 웹브라우저에서 비디오 데이터를 저장하고 서버로 보내야 했다. [Fig 1]과 같이 사용자의 실시간 카메라 화면을 보여주고, 대화할 때의 영상을 녹화하여 저장하도록 한다. 구현할 기능 웹브라우저에서 실시간 카메라 구현 카메라에 찍히는 화면을 녹화(시작, 종료) ( 녹화된 영상을 서버로 POST 설명 ) 기능 구현 0. 프로세스 해당 프로세스는 다음과 같다 MediaStream Recording API로, 해당 stream을 가져온다 MediaStream을 매개변수로, MediaRecorder 생성자를 호출한다 MediaRecorder.ondataavailable 이벤트가 호출될 때마다 전달 받는 영상 데이터를 배열에 쌓는다 녹화를 중지하면.. 더보기 O.D.C Hompage 의 이미지 최적화 동아리 홈페이지를 제작하고 (https://friendly-snyder-4bece3.netlify.app/#/) 여러 개선점이 많이 보였지만, 가장 두드러진 것은 이미지 로딩 속도였다. local 에서 개발할 때는 보이지 않던 문제점이 netlify로 배포를 하니 정도가 심했다. 유저들이 웹사이트를 보지 않는 가장 첫 번째 이유라고 생각했기에.. 당시 한참 검색을 해서 Sprites 라이브러리, Skeleton 라이브러리, CDN, 리액트 쿼리 등 여러 방법을 알았는데, 최근에야 웹팟장님 블로그에서 좋은 글을 보았다.. (하단 링크 참조) 기본적인 해결책으로는 다음과 같은 방법이 있다 이미지 원본 Resize jpg (실사진) / png (일러스트) 구분 이미지 고정값 부여 여러 버전의 이미지 제공 (i.. 더보기 이전 1 2 3 4 5 6 7 8 ··· 10 다음
