애 둘 냥 둘

setInterval 또는 setTimout 을 이용해 주기적인 호출이 필요한 javascript 를 작성했을 때 가장 문제가 되는 부분이라면 바로 브라우저가 백그라운드일 때 정상적으로 javascript 가 정상적으로 호출이 되지 않는다는 것이죠. let count = 0; setInterval(() => { console.log(`call: ${++count}`); }, 200); 이런 코드를 작성했다고 합시다. 5번까지 정상적으로 약 200ms 간격으로 호출되나 백그라운드로 이동된 후부터는 대략 1초 간격으로 호출되기 시작합니다. 따라서 주기적인 폴링이 필요하다거나 카운팅을 한다거나 하는 경우 문제가 생깁니다. 그런 경우 Web Worker 를 이용하여 작성하게 되면 해결됩니다. const blob..

최근 스마트싱스에서 Groovy API 를 종료시키고 있음에 따라 일부 문제가 생기기 시작했습니다. 물론 빅스비 루틴을 이용해 만들어도 됩니다. 근데 자꾸 에러가 납니다. WiFi 가 연결되고 끊기고 하면서 네트워크 재연결 시간을 기다리다 타임아웃이 난 것 같아요. 백업 정책이 필요하죠. 그래서 IFTTT 를 이용한 재실 체크를 백업 수단으로 이용 중이었는데, SmartThings 서비스가 Legacy 로 바뀌고 디바이스 목록이 하나도 나오질 않네요. https://isdown.app/integrations/ifttt/incidents/163078-the-smartthings-service-is-temporarily-unavailable IFTTT - The SmartThings service is te..

겨울이 된 지 꽤 지났습니다. 그리고 겨울철 최대의 난제, 습도 문제에 봉착했습니다. 공기청정기와 초음파 가습기의 동거 문제이죠. [스마트 리빙] 공기청정기와 초음파 가습기 함께 켜면 안 된다? 실내 미세먼지를 제거하고 적절한 습도를 유지하기 위해 공기청정기와 초음파 가습기를 동시에 켜놓는 분도 많을 텐데요. 공기청정기를 작동시킬 때는 가습기를 멀리 떨어뜨려 놓거나 아예 ... imnews.imbc.com 공기청정기가 초음파 가습기에서 나오는 수증기를 미세먼지로 인식하고 쓸데없이 미친듯이 일을 하는 그런 사태가 발생하고 맙니다. 뭐? 둘을 멀리 떨어트려놓으면 되지 않냐고? 가슴이 쓰라리다. 그래서 샤오미 기화식 가습기를 사용하고 있었죠. 근데 여기도 문제가 있어요. 몇 년 사용했더니 접점 불량, 모터 고..

집 사방팔방에 붙여놓은 센서의 상태가 이상해 교체를 하려고 오랜만에 webCoRE 에 들어가 봤다. 봤는데... 웹코어 종료.... 예? https://support.smartthings.com/hc/ko/articles/9339624925204 - SmartThings 플랫폼 전환 스마트싱스가 Groovy IDE 에서 EDGE 로 이동한다는 건 꽤 예전부터 알고 있었는데 제기럴, webCoRE 는 생각도 못했네. 저거 개발자가 삼성에 스카우트당했다 뭐 이런 루머가 있어서 당연히 EDGE 로 전환될 줄 알았는데! 당연하게도 루머는 루머였고 그런 일은 없었다고 한다. 설치된 커넥터들은 자꾸 오류를 뿜어내 대부분의 스마트 앱을 덜어낸지 꽤 되어 스마트 앱이 사라지는 건 타격이 적은데, 자동화는 거의 모두 w..

아, 왜 이 조합으로 시작했는지 모르겠다. 그냥 Vue3 로 할걸. 아무튼 Vue2 에서 Composition API 를 이용하여 신규 프로젝트 작업 중. script setup 으로 코드를 작성 중인데 router 를 이용하는데 문제가 생겼다. (사실 사방팔방에서 문제다. vuex 도 그렇고 각종 플러그인들도 그렇고) 라우터가 변경될 때마다 실행되는 코드를 넣어야 하는데 script setup 을 사용하다 보니 this.$route 를 가져오지 못한다. 이런 상황. 아무리 인터넷을 찾아봐도 모르겠다. 아무래도 Vue2 + Composition API (with script setup) 조합을 사용하는 괴랄한 사람이 별로 없어서겠지. 결국 코드를 하나씩 찍어보면서, 찾아냈다. HTML 삽입 미리보기할 수..

최근 모 프로젝트를 진행하면서 네이버의 나눔 글꼴을 사용할 일이 생겼다. 일반적으로 나눔 글꼴 웹폰트는 구글 폰트에서 가져다 사용하는 편이다. https://fonts.google.com/?query=nanum&subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 나눔고딕 나눔고딕 코딩 나눔명조 나눔손글씨 펜 나눔손글씨 붓 구글에서 제공하는 나눔 글꼴은 이렇게 5 종류이다. 그런데 이번에 사용해야 하는 폰트는 구글에서 제공하지 나눔스퀘어. 이것을 구글링 해보면 대부분 git 레파지토리를 이용한 개인 제작 웹폰트를 사용 중이다. https://hangeul..

오늘은 VS Code 확장 기능 하나 추천해볼까 합니다. 일반적으로 프론트엔드 개발을 하면서 package.json 파일 관리를 하고 있을 텐데, 패키지 버전 업데이트가 필요할 때 혹은 현재 최신 버전이 몇 버전인지 궁금할 때 사용하는 확장 기능입니다. https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens Version Lens - Visual Studio Marketplace Extension for Visual Studio Code - Shows the latest version for each package using code lens marketplace.visualstudio.com 일단 설치 ㄱㄱ 설치하..

TypeScript 에는 타입을 읽기 전용으로 만들어주는 타입 시스템이 있다. type ObjectType = { property1: number; readonly property2: number; }; const object: ObjectType = { property1: 1, property2: 2, }; object.property1 = 11; object.property2 = 22; // 에러 발생 이런 식으로 말이다. type ObjectType = Readonly; const object: ObjectType = { property1: 1, property2: 2, }; object.property1 = 11; // 에러 발생 object.property2 = 22; // 에러 발생 모든 속성..

최근 프로젝트에서 SASS 를 본격적으로 사용해 볼 요량으로 SASS 를 공부하는 중. 그 전에는 Less 를 주력으로 사용하고 SASS 는 보조적으로만 사용하고 있었다. SASS 랑 Less 중에 뭐가 더 좋아요? 하는 질문은 의미가 없다. 하지만 많은 패키지가 SASS 를 사용하고 있는 건 사실이니 배워둬도 나쁘지 않다. Less 에서 가장 유용하게 사용한 기능이라면 이미지 사이즈를 가져오는 기능. .fit-background(@background, @options: no-repeat 0 0) { background: url(@background) @option-value; width: image-width(@background); height: image-height(@background); } m..

프론트엔드 개발자들이 사랑하는 코드 에디터 VS Code. 마크업 작업에서 가장 많이 입력하는 코드 중 하나를 꼽으라면 이미지에 width, height 입력이 있겠다. 은근히 귀찮지만 어쩔 수 없이 매번 입력해야 하는데 혹시나 확장 기능으로 있을까 하고 찾아봤다. 맙소사, 기본 기능이 있었어. 정확히는 emmet 의 기능. 언제부터 가능했는지 알고 싶지 않다. 그동안 버린 내 시간이 아까워 절대로 알고 싶지 않다. 방법은 이미지 경로에 커서를 올려두고 Ctrl+ Shift + P 를 눌러 명령 창을 띄운 후 Emmet: Update Image Size 를 실행하면 된다. 그러면 width 와 height 가 자동으로 입력된다. 다른 값이 이미 채워져 있어도 업데이트가 되므로 다른 코드를 복사해 이미지만..