전체 글19 [React] Warning: Each child in a list should have a unique "key" prop in Fragment React에서 리스트를 활용해서 화면 요소를 만들어 낼 때는 태그에 key 속성을 부여하는 것이 좋다. React 공식 문서에 따르면 key에 대해 다음과 같이 설명한다. "Keys help React identify which Items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity" key 속성은 어떤 요소들이 추가, 삭제, 변화가 있을 때 React 라이브러리가 쉽게 찾아낼 수 있도록 하는 역할을 한다. 찾아보니 실제 DOM과 가상 DOM을 비교하는 diffing 알고리즘에서 활용되는 것 같다. 회사 프로젝트.. 2022. 5. 11. [FFmpeg] mpegts 포맷으로 한 파일에 영상 여러 개 담기 FFmpeg을 활용해서 두 개의 영상을 한 개의 파일로 만들어야 했다. 찾아보니 mpegts 포맷으로 만들면 가능하다는 것을 알게 되었다. MPEG-TS(transport stream)는 오디오, 비디오 등의 데이터 전송을 위한 통신 프로토콜로서, 디지털 영상과 소리를 다중화하고, 출력을 동기화하는 것이 목적이라고 한다. 생소한 분야이다. FFmpeg에서 mpegts 포맷으로 변경하는 명령어는 아래와 같다. ffmpeg -y -i 01.video_h264_fhd_30fps.ts -i 02.video_h264_fhd_30fps.ts -map 0:0 -map 0:1 -map 1:0 -map 1:1 -program program_num=1:title=TEST1:st=0:st=1 -program program_.. 2022. 5. 6. Event 인터페이스의 preventDefault 메소드란? Event 인터페이스의 메소드 중에 preventDefault가 있다. 이에 대해 알아보자. 먼저, preventDefault는 말 그대로 이벤트의 기본 동작(default)를 막는다(prevent). 대표적인 예시 중 하나가 a 태그이다. a 태그는 href 속성에 웹 페이지, 이미지, 동영상 등의 주소를 넣을 수 있고, 이 태그를 클릭하면 해당 주소로 이동하는 기능을 갖는다. 이 때, 이 클릭에 대한 이벤트가 preventDefault 메소드를 실행토록 하면, 해당 주소로 이동하는 기본 동작을 막을 수 있다. MDN의 정의에 따르면 preventDefault 메소드는 "The preventDefault() method of the Event interface tells the user agent th.. 2022. 5. 3. React component props에 typescript 일부 적용하기(history, setState, withRouter) 토이 프로젝트에서 React component의 props에 typeScript를 적용하면서 생기게 된 사항들을 정리해 보았다. 1. history props type 정의 페이지 이동을 위해 history 객체를 props로 받아 push 메소드를 사용했는데, props에 이 history 객체에 대한 type을 정의하는 방법을 몰라 찾아보았다. 검색으로 찾아 본 내용으로는 react-router-dom 패키지에서 RouteComponentProps를 가져와 선언하면 되는 형태였다. RouteComponentProps의 정의된 interface 형태는 아래와 같다. export interface RouteComponentProps< Params extends { [K in keyof Params]?: .. 2022. 4. 30. 이전 1 2 3 4 5 다음
