소프트웨어 올라운더

나는 UI 경험이 그리 많지 않다. 그래서 웹앱을 개발하면서 UI관련 작업에서 고통을 좀 받겠지만, 특히 CSS의 배치 문제는 이해하기가 쉽지 않다. position 이라는 특성값을 써보려고 할 때도 마찬가지였다. 이제는 조금 이해했다 싶지만, 갈수록 기억력이 떨어지고 있으므로, 다음에 볼 때, 새로운 내용으로 보일 수 있으므로, 간략하게나마 기록을 남겨둬야 할 것 같다. position은 원소(element)가 배치되는 방식을 지정하는 것이라 할 수 있다. 이 특성에 대한 값으로 사용할 수 있는 값은 5가지가 있다. static relative fixed absolute sticky static은 기본값이므로, 사용하지 않더라도 지정되는 값이다. 원소가 배치될 때 블록레벨 원소인 경우에는 다음 원소는 아래 방향으로, 인라인 원소인 경우에는 오른쪽 방향으로 겹치치 않으면서 나타나는 방식이다. relative는 static에서 top, left, bottom, right를 적용해서 ...

cmake는 편하기도 하면서, 이해하기 어렵기도 하다. 솔직히 cmake 정식 사이트의 매뉴얼은 읽어도 무슨 말인지 잘 이해되지 않는다. 아직 그만한 내공이 쌓이지 않아서 그런 것 같다.ARGN과 ARGV도 이해가 잘 되지 않는 항목 중에 하나였다. ${ARGV} holds the list of all arguments given to the macro and ${ARGN} holds the list of arguments past the last expected argument. ARGV는 확실히 매크로나 함수에 넘겨지는 모든 인수를 의미한다는 것을 알 수 있다. ARGN과 차이는 past the last expected argument, 이것에 달려있다. 몇 가지 확인 작업을 거쳐서 차이를 정리한다. 123456function(test a1 a2 a3) message(STATUS "ARGV=${ARGV}") message(STAT ...

create-react-app을 사용하면 react 개발 환경을 쉽게 만들 수 있다. 1npx create-react-app proxy-verify yarn start를 실행하면 개발 서버가 구동된다. 12cd proxy-verifyyarn start 그런데, 백엔드 쪽에 API도 같이 개발하려고 한다면, create-react-app 에서 제공하는 개발서버로는 용이하지 않다. 백엔드 쪽에도 웹 애플리케이션 서버를 하나 구동해서 API를 제공하고, 이를 react app이 이용하는 경우를 생각할 수 있다. 결국, react app이 특정 API 기능을 요청하게 되면, react 개발 서버는 이 요청을 받아서 API 서버로 다시 요청하는 형태가 되어야 한다. 즉, react 개발 서버는 proxy 로서의 역할을 해야 한다. 다행히도, 이 기능을 제공하고 있다. 이러한 개발 상황이 흔하게 있기 때문일 것이다. package.json에서 이러한 proxy 설정을 한다. 1"p ...

123456789class User { constructor(name, age, email) { this._name = name; this._age = age; this._email = email; }}const jeff = new User("Jeff", 30, "jeff@gmail.com"); User 라는 클래스를 하나 정의했다. 이 클래스를 객체로 하나 생성한 것이 jeff이다. 자바스크립트에서 아직 접근 권한자와 같은 - C++에서는 public, protected, private 과 같은 형태로 사용한다. - 사양을 제공하지 않는다. 그래서, 1jeff._name = "Jeff1"; 과 같은 필드 접근이 가능하다. 그렇지만, 객체 지향 프로그래밍에서의 캡슐화를 적절히 이용하는 것은 중요하다. 아마도 추후에는 접근 권한 사양이 들어갈 것이라고 기대한다. 흥미롭게도 ...

최근에 react 를 조금씩 보고 있다. 프론트엔드를 대부분 자바스크립트를 이용해서 프로그램할 수 있어서 재미가 솔솔하다. 그러나, 자바스크립트에 대한 경험이 없어서, 처음 보는 문법이 나타날 때마다 엉뚱한 추론 및 삽질이 난무하다. 조금씩 정리해 두던가, 도서를 한번 주욱 훑어서 체계적인 지식 정립이 필요한 시점이 되어 가고 있다. freeCodeCamp 에 게재된 글을 보다가 다음과 같은 코드를 발견했다. 1234567891011121314151617181920212223import Typography from '@material-ui/core/Typography'import TextField from '@material-ui/core/TextField'...handleChange = ({ target: { name, value } }) => this.setState({ [name ...

이 글은 “Tutorial to Native Node.js Modules with C++. Part 1 — An Introduction to Nan” 을 번역한 글입니다. 연산 비용이 많이 들거나 메모리 사용량이 많은 작업을 하기 위한 모듈을 만들고 싶다고 가정해봅시다. 분명, 자바스크립트는 이러한 용도에는 적합한 언어는 아닙니다. 또 다른 상황을 가정해봅시다. 이번에는 자바스크립트와 함께 좋아하는 C++ 라이브러리를 사용하려고 합니다. 두 경우 모두에 대해서, Node.js를 이용해서 자바스크립트로 어떠한 C++코드나 라이브러리와 연결(바인딩)할 수 있습니다. 그러한 작업을 하는 이유는 여러 가지가 있습니다. 다음은 내가 OpenCV C++ 라이브러리와 자바스크립트 바인딩으로 npm 패키지를 작성하게 된 이유입니다. 웹 응용 프로그램에서 OpenCV 사용하기 위해서 OpenCV로 electron 응용 프로그램을 만들기 위해서(QT에서 골머리를 앓느니 HTML과 CSS 또는 Rea ...

집에 웹서핑용으로 마련해둔 노트북이 하나 있다. 굳이 저장 공간이 클 필요가 없다고 생각해서, 128GB SSD 하나가 들어 있는 것으로 선택했다. 윈도우를 처음 설치했을 때, 특별히 크기가 큰 영화 파일들을 저장하지만 않는다면, 여유롭다고 생각했다. 그러나, 그 예상은 빗나가고 말았다. 윈도우 업데이트가 진행이 되고, 필요한 몇 개의 프로그램을 설치하고 나니, 금새 SSD가 배불러 터지기 직전이 되고 말았다. 좀 더 용량을 늘릴 수 있는 방법이 없을지 구글신에게 물어봤다. SSD를 사용하기 때문에 크기를 좀 줄여도 될 듯한 부분과 사용하지 않을 것이기 때문에 줄일 수 있는 방법을 기록해 두고자 한다. 최대 절전모드에 대해서는 다음 사이트에서 설명을 확인할 수 있다. 절전 모드와 최대 절전 모드의 차이점_절전 모드는 작업을 다시 시작하려 할 때 컴퓨터에서 최대 전원 작업을 빠르게(일반적으로 몇 초 이내) 다시 시작할 수 있는 전력 절약 상태입니다. 컴퓨터를 절전 모드로 전환하는 것은 ...

12avformat_seek_file(m_pAVFormatCtx, -1, seek_min, seek_target, seek_max, m_seekFlags); 두번째 인자는 time base 참조로 사용할 stream index 이다. -1을 주게 되면 AV_TIME_BASE 단위로 검색을 하게 된다. 즉, micro second 을 기준으로 하는 값이다. 세번째와 다섯번째 인자는 검색할 영역을 지정한다. 두번째 인자로 지정한 stream index 의 time base 단위로 값이 지정되어야 한다. 네번째 인자가 목표로 하는 시간값이다. 역시 두번째 인자로 지정된 time base 단위의 값이다. 다섯번째는 flag 인데, 영상을 기준으로 찾는다면, AVSEEK_FLAG_FRAME 가 가장 효율적인 방법일 것 같다. AVSEEK_FLAG_BACKWARD 는 무시가 되고, 그 외는 차이를 잘 모르겠다. 두번째 인자로 -1 이 아닌 특정 stream index를 지정하게 되면, 세번 ...

av_frame_free() 가 처리하는 범위123AVFrame *frame = av_frame_alloc();int ret = av_image_alloc(frame->data, frame->linesize, 1920, 1080, AV_PIX_FMT_RGBA, 32); av_frame_alloc() 에서는 AVFrame 크기의 메모리를 할당하고 기본값을 설정한다. 실제 sizeof(AVFrame) 을 통해서 크기를 알아보면 384 바이트이다. av_image_alloc() 에서는 frame->data 가 가리키는 메모리 배열에 format 에 따라 영상 데이터 크기만큼 메모리를 할당한다. AV_PIX_FMT_RGBA 의 경우에는 data 의 메모리 배열에서 하나만 사용한다. 한 라인의 데이터 크기값은 linesize 배열에 data 메모리 배열에 매핑하여 저장된다. 현재 설정대로라면, 한 라인에 1920 pixel 에, RGBA 형태로 한 pixel 당 4 바이트 ...

이전부터 정리하고 머릿속에 박아 넣어둬야지 하면서, 차일피일 미뤄두던 일을 드디어 하게 된 것 같다. 학교 때 신호처리 이론을 배운 이후로 대충 이럴 것이다라는 생각만 가지고 있었고, 코딩을 할 때는 copy & paste 신공으로 보통 해결이 되다보니 게으름이 매번 승리하고 있었다. 동영상이든 음악 파일이든 오디오가 포함되어 있고, 이에 대한 정보로 44100 Hz혹은 44.1KHz 라는 표시가 되어 있다. 이 의미는 초당 441000번으로 오디오 데이터를 샘플링했다는 의미가 된다. 샘플링을 많이 할 수록 원음에 가까운 소리로 복원할 수 있다. 44.1KHz 는 CD 음질로 사용된다. 오디오 관련 코딩을 할 때 sample rate라는 말이 자주 등장하는데, 44100 이라는 값이 바로 이것을 의미한다. 오디오를 렌더링할 때는 물론 하나의 소리만 줄기차게 낼 수 있겠지만, 좌우로 귀가 둘인 사람들을 위해서, 두 개의 채널로 각각 다른 소리를 나오도록 할 수도 있다. 전자를 ...