3은로그

에러 상황 OpenFace를 사용한 얼굴 인식 기반 출입 관리 시스템 프로젝트 개발 중 부서 등록 기능을 개발하면서 생긴 에러이다.텍스트 필드에 등록할 부서 이름을 작성하고 엔터를 누르면 아래에 등록할 부서 리스트가 뜨도록 개발하고자 했다.  하지만 위 사진처럼 한글을 입력했을 때 이벤트가 중복으로 발생하여 "개발부서"를 입력하면 "개발부서"와 "서" 두 개가 입력되었다.처음엔 비동기 처리로 인한 문제 때문인가 생각했는데 영어와 숫자는 이벤트가 한 번만 발생하는 것을 보고 한글과 관련이 있을 것이라고 생각했다.   문제 원인 원인은 IME composition 때문이었다.IME composition란?IME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하도록 언어를 변환시켜..

FFmpeg란? 마이클 니더마이어(Michael Niedermayer)의 주도하에 개발되고 있는 모든 동영상, 음악, 사진 포맷들의 디코딩과 인코딩을 목표로 만들어지고 있는 오픈 소스 프로젝트 1. 썸네일 생성을 위한 Dependency 다운 받기 1) 터미널에서 brew install ffmpeg fluent-ffmpeg를 다운 받기 위한 필수 조건 2) 터미널에서 npm install fluent-ffmpeg 2. 서버에 저장된 비디오를 이용한 썸네일 생성 및 저장 const ffmpeg = require("fluent-ffmpeg"); router.post('/thumbnail', (req, res) => { //썸네일 생성 하고 비디오 러닝타임도 가져오기 let filePath = "" let f..

목표 DOM 요소에 접근할 수 있는 useRef를 이용해서 정상적으로 입력되지 않았다면 강제적으로 focus 하는 기능 구현 ● 작성자가 1글자 이하이면 작성자 입력창 focus ● 내용 부분이 5글자 이하이면 내용 입력창 focus 기능구현 useRef를 사용해서 이 기능을 구현할 수 있다. 1. 먼저 import 한다. 2. useRef를 호출해서 반환값을 authorInput, contentInput 상수에 담는다. authorInput, contentInput 상수에는 React.MutableRefObject가 저장된다. MutableRefObject는 HTML DOM 요소에 접근할 수 있도록 해준다. 3. input 태그와 textarea 태그에 각각 ref = {authorInput}, ref..

프로젝트 생성 1. 바탕화면에 diary 폴더 생성 2. vscode에서 diary 폴더 열기 3. 터미널창 열어서 npx create-react-app 프로젝트 이름으로 프로젝트 생성 4. diary 폴더가 두개 생겼기 때문에 안에 있는 diary 폴더를 밖으로 빼준다. 5. 안쓰는 파일 삭제 및 삭제 된 파일과 관련된 import들 삭제 표시된 것들 삭제하고 필요없는 import들도 삭제 프로젝트 시작 ● 목표 1. DiaryEditor.js 컴포넌트 생성 2. DiaryEditor 컴포넌트를 화면에 랜더시키기 위해서 App.js에 DiaryEditor를 자식요소로 배치시켜준다. ● 작성자 input 만들기 - 작성자는 상태로 관리한다. - onChange 함수는 input 태그에 글자가 입력될 때마..