애 둘 냥 둘

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

아, 왜 이 조합으로 시작했는지 모르겠다. 그냥 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 가 자동으로 입력된다. 다른 값이 이미 채워져 있어도 업데이트가 되므로 다른 코드를 복사해 이미지만..

Vue 3 출시 후 꽤 많은 시간이 흘러 stable 해졌다고 판단하여 일부 프로젝트에서 Vue 3 를 사용하기 위한 사전 준비를 하고 있다. 아니다, stable 은 개뿔. 개판이다. Vue 3 에서도 Vue 2 부터 쓰던 문법을 계속 쓸 수 있으므로 전환에는 크게 문제가 없는데 이왕 쓸 거라면 Vue 3 에서 권장하는 방식으로 해야 하지 않겠는가. 2022.06.22 - [개발/Front-End] - Vue CLI 를 통한 Vue 프로젝트 생성 Vue CLI 를 통한 Vue 프로젝트 생성 상당히 오랫동안 Webpack 을 통해 만들어진 프로젝트를 깎고 깎아 사용하다가 신규 프로젝트를 생성할 일이 생겨 Vue CLI 를 통해 만들어보기로 한다. 일단 Vue CLI 를 실치해야 한다. NPM 과 Yarn..

webpack 에서 브라우저 캐싱을 회피하기 위한 전략으로 hash 값을 많이 사용한다. 일반적으로 [name].[contenthash][ext] 같이 파일명에 hash 값을 많이 사용하는데, 파일명에 hash 값이 들어있을 경우 파일 내용이 변경되거나 빌드 때 chunk id 가 변경되어 파일명이 계속 바뀌는 문제가 있다. 이 경우 이미 업로드 된 파일을 지우고 다시 올려야 하는 번거로움이 생긴다. 나의 경우 파일명 난독화가 필요하기도 하여 hash 값을 이용하긴 해야 한다. 따라서 파일명으로 난독화 처리를 하였다. const path = require("path"); const crypto = require("crypto"); const IS_LIVE = process.env.NODE_ENV === ..

상당히 오랫동안 Webpack 을 통해 만들어진 프로젝트를 깎고 깎아 사용하다가 신규 프로젝트를 생성할 일이 생겨 Vue CLI 를 통해 만들어보기로 한다. 일단 Vue CLI 를 실치해야 한다. NPM 과 Yarn 을 프로젝트마다 혼용해서 사용하고 있지만 여기는 Yarn 을 사용. > yarn -g add @vue/cli 설치가 잘 끝났는지 확인하기 위해 버전 확인을 한다. > vue --version 'vue' 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. yarn 에 전역으로 설치할 일이 없다 보니 환경 변수가 안 들아가 있나 보다. > yarn global bin C:\Users\...\AppData\Local\Yarn\bin 저 경로를 윈도우 환경 변수에..