개발에 대한 두서 없는 이야기

키보드 자판이 열리면 화면이 작아지면서 밀리게 되는데 bottom으로 준 경우 해상도가 작아지는 효과(리사이즈 이벤트도 발생)하기 때문에 top으로 주지 않은 경우 의도하지 않은곳에 위치하게 되는경우가 있다. top으로 주거나. resize이벤트가 발생하니, 리사이즈 이벤트에서 그에 맞게 좌표를 수정하는 스크립트를 넣어야 한다

backgroud.js -> serviceworker.js v2의 백그라운드.js가 serviceworker.js로 바뀌었다. 기본적인 기능은 비슷하나, 서비스워커의 경우 일정시간 동작하지 않으면 죽어버린다. 만약 서비스워커를 계속 살려둬야하는 경우가 있으면 주기적으로 서비스워커에 메세지를 보내야 한다 var wakeup = function(){ setTimeout(function(){ chrome.runtime.sendMessage('ping', function(){ }); wakeup(); }, 10000); } wakeup(); 와 같은 코드를 이용해서. IFRAME 문제 v3로 넘어오면서 webrequest 부분이 많이 바뀌었고, declarativeNetRequest로 대체하여 사용하여야 한다...

.img_wrapper {padding-top: calc(100% / 101 * 75);} .img_wrapper img{position: absolute;width:100%;height:100%;top:0;left:0;} padding-top의 100% 값은 부모창의 크기이므로 레이아웃에 따라 고정픽셀이나 위와 같이 퍼센트로 입력해도 된다. 101 * 75 (101 * 75비율) 16 * 9(16 * 9) 비율 등 해당 부분을수정해주면 된다.

const history = useHistory(); history.listen((location, action) => { //내용 작성. }); 페이지 이동시마다 특정 이벤트를 무조건 실행해야 할때(모바일에서 화면을 가리고 띄운 메뉴 등..) 위와 같은 함수로 실행 할 수 있다.

import { useEffect, useRef, useState } from 'react'; import { BrowserMultiFormatReader, BarcodeFormat, DecodeHintType } from '@zxing/library'; const Reader = () => { const [localStream, setLocalStream] = useState(); const Camera = useRef(null); const hints = new Map(); const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX, BarcodeFormat.CODE_128, BarcodeFormat.CODABAR, BarcodeFormat...

플러그인을 사용하면 보통 알아서 처리해주기에 그럴일은 없겠지만 직접 video 태그를 사용하고, getUserMedia를 사용하는 경우 문제가 있을 수 있다. const [localStream, setLocalStream] = useState(); useEffect(() => { navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, //전면 // video: { facingMode: { exact: "environment" } }, //후면 }) .then(stream => { console.log(stream); setLocalStream(stream); }) return () => { if (localStream) { const v..

씨발. 물론 프로그래머의 기본 소양은 백업이고 백업이라 하였지만, 욕 밖에 안나오는 상황이다. window나 mac은 https://www.docker.com/ 위의 링크를 활용하여 도커를 깔아서 사용할 수 있는데 이 경우 mac에 깔아서 사용하고 있었다. 잘 쓰고 있었으나, 계속 업데이트 하라는 경고메시지가 느낌표가 너무 거슬려서 업데이트 후 실행. 실행이 안되네? 설정파일이 잘못 됐다고 도커에서 알려준다. 그리고 자동복구 실행 이미지 싹 다 사라짐. 심지어 복구도 안된다. 개인적으로 1달 넘게 코딩하던 리액트 작업물이 다 날아갔다. 아무리 개발시 백업이 필수라지만 일반적으로는 해당 경로에 해당 작업물이 있는지 모르고 지우거나, 옮기는 과정에서의 실수, 깃허브 명령어 실수 등이라면 내 손가락이라도 탓하..

hwpjs의 난항 hwpjs를 만들며 어려운것은 여러가지가 있다 첫번째로는 각각의 헤더를 정렬하는 방식이다. 특정한 규칙이 있긴 하지만, 무언가 정확하게 어떤 규칙인지 알기 어려운게 이걸 만드는 내가 머리가 나빠서인 이유가 가장 크겠지만 원래 개발하면서 남탓을 해야 자아를 유지할 수 있는 법이다. 그렇기 때문에 무언가 덕지덕지 붙어 결국 헷갈리게 되는 구조라는 생각이 든다. 공식 문서에 나와있든 BodyText의 구조로 보면 HWPTAG를 접두사로 하는 각각의 tag_id가 목적에 맞게 정렬되면 되는데, 이 순서에 대한, 또는 특정 상황에 따른 구조형태를 문서화 시켜줬으면 좋겠다라는 생각이 들었다. 어찌됐건 각각의 단락, 하나의 데이터 배열이 끝나는 조건은 처음에 텍스트만 확인하고 예제문서를 활용해 비교..

https://github.com/ohah/hwpjs 아직 미구현된 부분이 많지만, 우선 어느정도 보여주는데에는 성공했기에 공개해놓는다. Demo 페이지는 아래의 링크에서 확인할 수 있다 데모 문제점 작업을 하면서 느낀점은 너무 많다! 미씽노가! 미씽노란? 포켓몬스터 초창기 버전에서 버그로 나오는 알 수 없는 포켓몬을 말하는 명칭이다. 알고 보면 내가 잘못 이해하고 설명이 안되어있다고 착각한 부분도 꽤나 많지만, 아무리 애를 쓰고 기를 써도 알 수 없는 코드 영역, 어디에 적용되는지 명확히 알 수 없는 데이터들이 많다 데이터를 명확하게 가져온다 치더라도, 현재 hwpjs를 간단한 html문서로 구현하려 하고 있기에 사실 css에서 지원되기 힘든 특정한 표 테두리 선이나, 글머리 들여쓰기, 자간 줄간 장평..

HWP 5.0 HWP포맷은 3.X 버전부터 공개되어있지만 사실상 3.X 문서는 현재 거의 쓰이지 않고 있기에 해당 포맷은 분석하지 않는다. 우선 HWP포맷은 복합 파일 이진 형식(Compound File Binary Format) 이하 CFB라 불리는 파일의 포맷을 사용한다. 한컴문서 해당 포맷을 열어보는 프로그램은 이미 인터넷 검색만 해도 손 쉽게 나와있으며, 자바스크립트, 자바, 파이썬 등의 언어에서도 찾아볼 수 있다. 한컴에서 공개한 공식 문서에서 가장 핵심은 바로 이 내용이다. 분석 위의 이미지에서도 확인할 수 있듯 zlib의 압축까지 풀어내야만 정확히 hwp포맷의 자료를 읽을 수 있다. CFB, zlib 둘 다 공개되어있는 오픈소스이다보니 왠만한 메이저 프로그래밍 언어라면 손 쉽게 관련 플러그인..