Javascript 6

background 에서도 동작하는 javascript 를 만들기

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

개발/Front-End 2023.07.14

Vue CLI 또는 Webpack 설정을 이용한 이미지 파일명 관리

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 === ..

개발/Front-End 2022.06.23

Vue CLI 를 통한 Vue 프로젝트 생성

상당히 오랫동안 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 저 경로를 윈도우 환경 변수에..

개발/Front-End 2022.06.22

jQuery 마이그레이션 - this.selector

도비는 여전히 jQuery 마이그레이션 작업 중. 2022.05.17 - [개발/javascript] - jQuery 마이그레이션 - Deprecated, Removed jQuery 마이그레이션 - Deprecated, Removed jQuery 1.12.1 쓰던 사이트에서 보안 이슈로 3.6.0으로 마이그레이션 작업 중. 사이트의 구조와 환경이 괴랄하여 한 땀 한 땀 장인 정신으로 수정해야 하는 상황이다. https://api.jquery.com/category/deprecated. naveen.tistory.com .selector 가 removed 되었다고 있어서 이게 뭔 소린가 하고 찬찬히 살펴보았다. 미친 듯이 구글링을 했다는 소리다. HTML 삽입 미리보기할 수 없는 소스 $.fn.newPlu..

개발/Front-End 2022.05.20

내부망에서 NPM 패키지 설치를 위한 방화벽 해제

내부망에서 NPM 패키지 설치를 위해 방화벽을 해제할 필요가 생겼다. 우선 package-lock.json 파일을 열고 어디서 패키지를 가져오는지 확인. registry.npmjs.org 해제. 포트는 443. 그리고 git+ssh://git@gitbhub.com 이건 쉽다. ssh.github.com 해제. 포트는 역시 443. package-lock.json 파일을 더 봐도 뭐가 더 없다. 그럼 다시 시도. 네? raw.githubusercontent.com? 이걸 저장소로 쓴다고? 이건 파일 raw 보기용 아닙니까? 너어는 진짜 나쁜 놈이네. https://github.com/imagemin/imagemin-gifsicle/issues/33 Error: Command failed: C:\WINDOW..

개발/Front-End 2022.05.19

jQuery 마이그레이션 - Deprecated, Removed

jQuery 1.12.1 쓰던 사이트에서 보안 이슈로 3.6.0으로 마이그레이션 작업 중. 사이트의 구조와 환경이 괴랄하여 한 땀 한 땀 장인 정신으로 수정해야 하는 상황이다. https://api.jquery.com/category/deprecated/ Deprecated | jQuery API Documentation Add the previous set of elements on the stack to the current set. Attach a handler to an event for the elements. The DOM node context originally passed to jQuery(); if none was passed then context will likely be the d..

개발/Front-End 2022.05.17