728x90
반응형
 포스팅 썸네일 이미지

개발/Javascript

인터넷 익스플로러에서 자동으로 엣지로 전환하는 방법(Redirect from IE to Edge)

최근에 유튜브(Youtube), 넷플릭스(Netflex), 페이스북(Facebook)와 같은 글로벌 웹서비스를 인터넷 익스플로러(Internet Explorer, IE)에서 접근하면, 마이크로소프트 엣지(Edge) 브라우저로 자동으로 이동하는 것을 알 수 있습니다. 이렇듯 과거 레거시 브라우저를 대응하기보다 이제는 엣지(Edge) 브라우저로 이동시킴으로써 사실상 IE 대응을 종료한 움직임을 확인할 수 있습니다. 처리방법 코드는 굉장히 간단합니다. 웹서비스에 접근하는 유저정보(UA, UserAgent)를 체크해서 인터넷 익스플로러에서 접근한 유저의 경우 강제로 'microsoft-edge'라는 스키마와 현재 접근 경로를 붙여서 다시 이동시키면 엣지 브라우저가 있을 경우 자동으로 엣지로 이동시킵니다. 'mi..

2021.04.15 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[Javascript] append vs appendChild 차이점 (초간단)

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간략하게 다뤄보도록 하겠습니다. append() ? append 메서드를 활용하면 노드 객체(Node object)나 DOMString(text)를 사용할 수 있습니다. 또한 한번에 여러 개의 자식 요소를 설정할 수 있습니다. Node object 사용 예시 // Node object 삽입 const parent = document.createElement('div'); const child = document.createElement('p'); parent.append(child); // 결과 // 문자..

2021.01.19 게시됨

 포스팅 썸네일 이미지

개발/Javascript

부모 노드 맨 앞에 요소를 삽입하는 방법 (appendChild 말고! prependChild Javascript)

appendChild? 자바스크립트를 사용하다보면 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 배치하고 싶을 때 appendChild 메서드를 굉장히 많이 사용하는데요. 아래 예시와 같은 경우에 appendChild를 사용하곤 한답니다. // html Javascript // javascript const el = document.createElement('li'); el.textContent = 'appendChild'; document.querySelector('.list').appendChild(el); // result Javascript appendChild prependChild? 하지만, 특정 부모 노드의 자식 노드 리스트 중 첫번 째 자식으로 배치하고 싶은 경우도 생..

2021.01.18 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트로 HTML5 캔버스(Canvas)에 백그라운드 배경 추가하는 방법

자바스크립트로 캔버스에 백그라운드 색상을 적용하려면 어떻게 할까요? 구현하는 과정은 아래와 같습니다. 캔버스 태그를 생성합니다. 캔버스 컨텍스트(ctx) 객체를 정의합니다. 캔버스 컨텍스트에 색상과 색상을 채울 도형을 만듭니다. 예시 아래 예시는 캔버스를 생성한 후 원하는 백그라운드 색상으로 캔버스에 적용하는 예시입니다. // html 여기서 만들 도형은 캔버스에 꽉찬 정사각형으로 fillRect의 가로, 세로 값을 캔버스의 넓이와 높이로 설정한 것을 알 수 있습니다. // javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#009ac8'; ctx.f..

2021.01.06 게시됨

 포스팅 썸네일 이미지

개발/Javascript

Node.js에서 캔버스(Canvas)로 이미지 만들고 저장하는 방법

Node.js에서 캔버스를 사용해서 이미지로 저장하는 방법은 canvas 라이브러리를 사용하면 간단히 구현할 수 있습니다. Canvas 라이브러리 설치 npm install canvas // or yarn add canvas 사용방법 아래 예시는 이름과 디스크립션 그리고 아이콘을 적절하게 배치하여 캔버스 이미지를 만들고 jpg로 이미지를 추출해주는 예시입니다. 전체 코드 구현 예시 const generateETFThumbnail = (etfName) => { return new Promise(async (resolve) => { const tmpdir = os.tmpdir(); const filename = `${uuidv4()}.png`; const filepath = path.join(tmpdir, ..

2021.01.04 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[Javascript] for, while 반복문에 async await를 활용해 delay 거는 방법

자바스크립트 반복문에 딜레이 거는 방법에는 다양한 방법이 존재하겠지만, ES7 async/await 구문을 활용하면 굉장히 깔끔하게 이 부분을 제어할 수 있습니다. 이번 포스팅에서는 async/await을 활용해서 for 반복문, while 반복문에서 딜레이 거는 방법에 대해 소개해드리도록 하겠습니다. 사실 for문에서나 while문에서나 딜레이 거는 방법은 동일합니다. 반복문에 딜레이를 걸기 위해서는 비동기 함수로 반복문을 감싼 후 반복문 내부에서 순회를 할 때마다 await을 통해 딜레이를 걸어주는 방식입니다. for문에서 delay 거는 방법 const timer = ms => new Promise(res => setTimeout(res, ms)) async function load () { for..

2020.11.29 게시됨

 포스팅 썸네일 이미지

개발/Javascript

GA clientId 깔끔하게 가져오는 방법 (how to get the GA clientId)

이번 포스팅은 웹 자바스크립트(Javascript) 환경에서 GA(Google Analytics) clientId를 깔끔하게 가져오는 방법에 대해서 소개하고자 합니다. 저 또한 Nuxt.js(Vue)에서 GA 관련 로직을 작성하는 중에 새로운 방법을 알게 되어 공유하게 되었습니다. 기존방식 기존에 GA clientId를 가져오기 위해 사용했던 코드는 아래와 같습니다. ga 객체의 getAll 메서드를 활용해서 모든 trackers를 가져온 후 0번째 인덱스의 tracker를 가져온 후 clientId를 가져오는 예시입니다. ga.getAll()[0].get('clientId'); 변경 개선된 방식은 아래와 같습니다. window.ga객체가 loaded되면 콜백함수가 실행되고, 콜백함수의 인자값이 바로 t..

2020.11.21 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트에서 replaceAll 사용하는 방법

예전에는 자바스크립트(Javascript)에서 특정 문자를 모두 바꾸기(치환) 위해서 자바스크립트 문자열 객체의 replace 메서드와 정규표현식 조합으로 사용하곤 했습니다. 구현 예시 replace + 정규표현식 replace + 정규표현식 조합으로 구현하는 예는 아래와 같습니다. 정규표현식에서 gi는 g(모든 값에 대한 검사), i(대/소문자 구분 안함)을 뜻합니다. const str = 'dog dog test dog hello hi'; str.replace(/dog/gi, 'monkey'); // "monkey monkey test monkey hello hi" 하지만 최근에 ecma262 공식문서를 보면 자바스크립트(Javascript)에서 공식적으로 replaceAll 메서드를 제공해주는 것을..

2020.11.05 게시됨

 포스팅 썸네일 이미지

개발/Javascript

동적으로 자바스크립트를 추가한 후 콜백받는 방법 (How to import the external JS with callback function)

외부에서 가져온 자바스크립트(Javascript)를 모두 받아온 후 콜백처리를 하고 싶은 경우가 있습니다. 한 예로 비동기로 웹 페이지에 카카오 자바스크립트(Javascript) SDK를 추가한 후, 특정 동작을 실행하는 경우입니다. 사용방법 // 동적으로 자바스크립트를 삽입하는 함수 // 자바스크립트가 모두 로드(load)되었을 때, // callback 함수 실행 const injectScript = (url, callback) => { const s = document.createElement('script') s.src = url; s.type = 'text/javascript' s.addEventListener('load', callback) document.head.appendChild(s) ..

2020.10.31 게시됨

 포스팅 썸네일 이미지

개발/Javascript

새창으로 form submit하는 방법 (How to open a new window on form submit)

자바스크립트(Javascript)에서 동적으로 html form 태그를 생성하고, 새창으로 submit하는 방법은 아래와 같습니다. go 만약 폼으로 생성한 새창의 크기를 조절하고 싶다면 3번째 파라미터로 새창의 크기를 조절하는 속성들을 추가하면 됩니다. // 새창의 크기를 조절하는 방법 (window resize) window.open( 'about:blank', 'auth-form', 'width=' + parseInt(window.innerWidth) * 0.3 + ',height=' + parseInt(window.innerHeight) * 0.3 + ',toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0' )

2020.10.24 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트로 텍스트 암호화 복호화 하는 방법 (JavaScript string encryption and decryption)

자바스크립트로 개발을 하다보면 텍스트를 암호화해야되는 순간이 찾아올 경우가 생깁니다. 이번 포스팅에서는 자바스크립트로 텍스트를 암호화, 복호화하는 방법에 대해서 소개해드리도록 하겠습니다. 라이브러리 설치 암호화, 복호화 라이브러리 crypto-js를 설치합니다. 제가 개인적으로 텍스트를 암호화할 때 편하게 사용한 경험이 있어서 저는 crypto-js를 사용합니다. npm install crypto-js // or yarn add crypto-js 암호화 복호화 헬퍼함수는 아래와 같습니다. encrypt, decrypt 헬퍼함수의 key는 process.env.PRIVATE_KEY처럼 환경변수로 처리하면 됩니다. import CryptoJS from "crypto-js"; export const encry..

2020.09.14 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트에서 SCSS 변수 사용하는 방법(Share SCSS Variables with Javascript)

사전 요구 사항 프로젝트에 구성되어있는 webpack에서 sass를 사용할 수 있게 구성해야 됩니다. 사용방법 자바스크립트에서 SASS(SCSS) 변수를 사용하는 방법은 SCSS의 export구문을 사용하면 됩니다. SCSS의 변수를 관리하는 variables.scss에 하단에 export 구문을 사용하고 사용하고 있는 SCSS 변수들을 그 내부에 추가합니다. // variables.scss $white-color: #fcf5ed; $dark-color: #402f2b; $light-color: #e6d5c3; $medium-color: #977978; $alert-color: #cb492a; $light-black-color: #706e72; $black-color: #414042; :export { ..

2020.08.30 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트에서 CSS 미디어쿼리(Media Queries)를 활용해보자 (How To Use Media Queries in JavaScript) - matchMedia

반응형 웹사이트를 개발할 때 CSS 미디어쿼리를 활용해서 사용자의 화면 크기에 따라서 스타일을 적용했습니다. 하지만 종종 자바스크립트에서도 이러한 반응형에 따른 분기처리될 로직이 존재합니다. 그에 따라서 매번 스타일 따로 자바스크립트 로직 따로 분기처리를 해가면서 작업을 하기에는 굉장히 번거롭고 까다롭습니다. CSS에서 반응형 웹을 개발하기 위해 자주 사용하는 기능인 미디어쿼리(Media Queries)! 자바스크립트에서도 사용할 수 있는 것 알고 계셨나요? 자바스크립트(JavaScript)에도 CSS의 미디어쿼리(Media Queries)와 같은 matchMedia 메서드가 존재합니다. 오늘은 자바스크립트에서 CSS 미디어쿼리를 활용하는 방법에 대해서 알아보도록 하겠습니다. 구문 mqList = win..

2020.08.13 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트(Javascript)로 정말 쉽게 클립보드 복사하기 기능 구현하는 방법

대부분의 사이트에서 URL을 공유하기 위해 텍스트 클립보드 카피 기능을 제공하고 있습니다. 제가 예시로 든 Ant Design 말고도 정말 많은 서비스에서 이렇게 사용자들에게 편리함을 제공하기 위해 클립보드 복사를 애용하고 있습니다. 이렇게 간편한 클립보드 기능은 직접 구현하는 방법도 있고 clipboard.js라는 라이브러리를 활용해서 쉽게 구현하는 방법도 있습니다. 하지만 직접 구현하는 방법도 굉장히 간단하기 때문에 굳이 라이브러리를 설치하지 않고 직접 구현하는 것도 좋은 방법이라고 생각합니다. 중요한 점은 ClipboardAPI는 WEB API 최신 스펙을 기준으로 사용되고 있으므로, 아직 지원되지 않는 브라우저가 많은 점은 유의해야합니다. 브라우저 호환성 WEB API 최신 스펙을 기준으로 사용되..

2020.08.08 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트(Javascript, Node.js)에서 랜덤 문자열 생성하는 방법(Generate random string/characters in JavaScript)

자바스크립트(Javascript, Node)에서 랜덤 문자열을 간단하게 생성하는 방법은 uuid 모듈을 활용하면 됩니다. uuid 모듈의 v4활용하면 간단하게 랜덤 문자열을 생성할 수 있습니다. 자세한 내용은 여기에서 문서를 참고하세요. // ES6 module syntax import { v4 as uuidv4 } from 'uuid'; var id = uuidv4(); // "110ec58a-a0f2-4ac4-8393-c866d813b8d1" // CommonJS syntax const { v4: uuidv4 } = require('uuid'); uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed' 만약 의존성없이 코드를 구현하고 싶으시다면, 아래와 같이 직..

2020.08.04 게시됨

 포스팅 썸네일 이미지

개발/Javascript

NVM을 활용해서 쉽고 효율적이게 노드(Node.js) 버전을 관리해보자

노드(Node.js)를 사용하는 분이라면 여러 프로젝트를 관리하면서 여러 노드 버전을 사용해야 될 상황이 오게 됩니다. 프로젝트를 변경할 때마다 해당하는 특정 노드 버전을 설치해주는 것은 굉장히 비효율적인 방법입니다. 이렇게 여러 노드 버전을 관리하기 위해 등장한 도구가 바로 NVM(Node Version Manager) 입니다. 루비(Ruby)나 파이썬(Python)을 사용하시는 분이라면 루비의 rvm, rbenv나 파이썬의 pyenv와 비슷하다고 생각하시면 됩니다. NVM은 다양한 버전의 노드(Node.js) 리스트를 확인할 수 있고, 편하게 설치 및 삭제 그리고 전환까지 할 수 있는 매우 편리한 도구입니다. NVM 설치하기 NVM을 설치하기 위해서 brew를 사용하거나 cURL이나 Wget을 활용할..

2020.07.23 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[Nodejs] Nodejs에서 손쉽게 폴더 생성하는 방법

Nodejs에서는 폴더가 있는지 체크하고 폴더가 존재하지 않을 경우 폴더를 생성하는 로직을 굉장히 쉽게 작성할 수 있습니다. fs.existsSync(dir) - 폴더가 존재하는지 체크하는 메서드 fs.mkdirSync(dir) - 폴더를 생성하는 메서드 dir은 폴더 경로입니다. ex) /dist const fs = require('fs'); const makeFolder = (dir) => { if (!fs.existsSync(dir)) { fs.mkdirSync(dir); } } makeFolder('/dist');

2020.06.30 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[Javascript] URL QueryString 값을 Object(key-value)로 손쉽게 받아오는 방법

자바스크립트에서 URL의 QueryString 값을 쉽게 파싱해서 사용하는 방법이 있습니다. 아래 함수의 리턴 형태는 Object(key-value)이므로 사용하기 용이합니다. /** * URL queryString 값을 (key-value) 형식으로 가져오는 함수 */ export const getURLParameters = () => { const params = {} location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) { params[key] = value }) return params } 아래는 해당 함수를 사용한 테스트 케이스입니다. // before https://www.google.com/search?q=%..

2020.04.08 게시됨

728x90
반응형