개발/Javascript

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

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

개발/Node.js

Node.js 티스토리 파일 업로드 API 구현하는 방법(multipart/form-data 이놈..)

Node.js를 활용해서 티스토리 파일 첨부 API를 사용한 경험에 대해서 공유하고자 합니다. 필자는 Node.js + Puppeteer를 활용해서 티스토리 파일 첨부 API를 구현하려고 했으나 몇 가지 시행착오가 발생했고, 많은 삽질을 통해 이 문제를 해결하여 글로 남겨둡니다. Node.js로 티스토리 파일 첨부 API를 사용하기 위해서 우선 필자의 경우는 동적으로 이미지를 만들고, 동적으로 만든 이미지를 임시 파일 저장소에 임의의 파일 이름으로 경로를 지정하고 생성한 후, 해당 파일을 티스토리 파일 첨부 API를 활용해 업로드를 합니다. 동적 파일 생성 Node.js fs createWriteStream 메서드를 활용해서 필자는 업로드 하고자하는 이미지를 만든 후 임시 파일 저장소에 파일을 저장합니다..

개발/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..

개발/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..

알고리즘/정렬

자바스크립트로 구현한 선택정렬 알고리즘 (Selection sort in Javascript)

선택정렬 알고리즘은 정렬 알고리즘을 공부하다보면 버블정렬만큼 익숙하게 들어본 정렬 알고리즘 중 하나일 것입니다. 버블정렬 만큼 구현하기 쉽고, 기업 코딩테스트를 하다보면 한번씩 문제로 나오곤 하는 선택정렬 알고리즘! 이번 포스팅에서는 선택정렬 알고리즘의 특징과 구현 예시에 대해서 소개하도록 하겠습니다. 선택 정렬이란? 선택정렬 알고리즘의 컨셉은 요소들이 들어갈 위치는 이미 정해져있다는 것에 있습니다. 예를 들어, 배열의 첫 번째 자리에는 배열 요소들 중 가장 작은 요소가 들어가면 되겠죠? 그리고 두 번째 자리에는 그 다음 가장 작은 요소를 선택해서 그 자리에 넣으면 됩니다. 이렇게 배열이 끝날 때까지 이 단계를 진행하면 됩니다. 선택정렬 알고리즘 예시 선택정렬 알고리즘을 좀 더 쉽게 이해하기 위해 코드를..

개발/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 메서드를 제공해주는 것을..

개발/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) ..

개발/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..

개발/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 { ..

개발/Javascript

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

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

개발/Javascript

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

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

개발/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' 만약 의존성없이 코드를 구현하고 싶으시다면, 아래와 같이 직..

개발/Vue

[Vue] vue.js Mixin을 활용해서 재사용성을 늘리자! (Understanding Mixins in Vue JS)

소프트웨어 개발 원칙에는 여러 가지가 있는데 그중 하나 DRY(Do not Repeat Yourself) 원칙이 있습니다. "같은 동작을 하는 코드를 반복적으로 작성하지 마라" 라는 뜻을 가지고 있는데 Vue에서는 중복 코드를 제거하기 위해 여러 재사용 테크닉이 존재합니다. 믹스인, 사용자 지정 디렉티브, 플러그인, 필터가 그 기술에 속해있죠. 이번 포스팅에서는 믹스인을 활용해서 기능을 재사용하여 중복 코드를 제거해보도록 하겠습니다. ✍️ Mixin(믹스인) 이란? Mixin은 기능을 따로 정의해두고 필요할 때 마다 해당 믹스인 파일을 Vue 컴포넌트에 결합해서 사용하는 방법을 말합니다. 일반적으로 Vue 컴포넌트에 기능을 추가하기 위해 필요할 때마다 재사용할 수 있습니다. SASS라는 CSS 전처리기를..

Computer science/알고리즘

자바스크립트로 피보나치 수열 구현 (fibonacci in javascript)

피보나치 수열이란? 0항을 0, 1항을 1로 두고, 두번 째 항부터는 바로 앞의 두 수를 더한 수로 놓는 것이 피보나치 수열이다. 아래와 같은 점화식을 가지고 있다. F0 = 0; F1 = 1; Fn+2 = Fn+1 + Fn;자바스크립트로 구현 임의의 숫자를 매개변수로 받아서 그 숫자만큼 피보나치 수열의 값을 나열하는 로직을 구현해보자. // 피보나치 구현 함수 export function getFibonacci(num) { let i = 0; let value1 = 0; let value2 = 1; let result = []; while (i < num) { let newValue = value1 + value2; result.push(newValue); value1 = value2; value2 =..

개발/Javascript

정규표현식으로 문자열 띄어쓰기와 공백 모두 제거하는 방법 (replace all line breaks javascript)

아래 코드는 자바스크립트로 문자열 내에 있는 모든 띄어쓰기와 공백을 제거합니다. const str = ` hello hello2 hellb helloc `; const replacedStr = str.replace(/\r|\n/g, '');

개발/Javascript

자바스크립트 동등연산자(==)와 일치연산자(===) 차이

자바스크립트에는 추상적 같음 비교(이중 등호, 동등 연산자)와 엄격한 같음 비교(삼중 등호, 일치 연산자)가 있다. 가장 큰 차이점은 이중 등호는 두 값을 비교할 때 자동으로 형변환하여 같음을 비교하지만, 삼중 등호는 형변환을 수행하지 않고 비교한다. 이중 등호 연산자의 예시를 보자. 0 == false //true "" == false //true "" == 0 //true "0" == 0 //true [1,2] == "1,2" //true new String(&#39;hello&#39;) == &#39;hello&#39; //true null == undefined //true이중 등호 연산자는 자동으로 형변환을 하고 비교하므로 위 예시는 모두 true를 return한다. 하지만, 삼중 등호 연산자일..

개발/Javascript

Web Storage API(localStorage, sessionStorage)그리고 Cookie

웹 스토리지 API (Web Storage API) 웹 스토리지 API(Web Storage API)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능입니다. 웹 스토리지 API와 쿠키의 기능 자체는 같지만(데이터 저장), 쿠키는 약 4KB(4096bytes)까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있습니다. 웹 스토리지 API 최신 스펙 확인 Web Storage (Second Edition) This specification defines an API for persistent data storage of key-value pair data in Web clients. This section describ..

개발/Javascript

자바스크립트 호이스팅 (Javascript hoisting)

자바스크립트를 공부하는 사람들은 호이스팅이라는 용어를 접해본 경험이 있을 것이다. 정의를 내려보기 전에, 아래의 예제를 한번 살펴보도록 하자. function greeting() { console.log(&#39;hello&#39;); } greeting();greeting 함수를 호출 할 때, 예상대로 hello 문자열이 console에 기록이 될 것이다. 하지만 함수를 선언하기 전에 실행하면 어떻게 될까? greeting(); function greeting() { console.log(&#39;hello&#39;); }위 예시는 신기하게도 처음 예시와 동일하게 hello 문자열을 콘솔창에 기록한다. 이것이 바로 호이스팅이 동작하는 방식이다. 대부분 이 호이스팅 동작 방식을 설명할 때, 선언한 변수와..

Computer science/알고리즘

자바스크립트로 소수 구하는 알고리즘 구현(prime number in javascript)

소수란? 1과 자신을 제외한 어떠한 정수로도 나누어지지 않는 수가 소수이다. 1 ~ 1000 사이의 숫자 중에 소수만을 구하는 알고리즘을 구현해보자. 자바스크립트로 구현 function getPrimeNumber() { let results = []; // 1과 1000사이의 숫자 중에 소수를 구하기 위한 반복문 for (let i = 1; i

개발/Javascript

자바스크립트 비동기 프로그래밍 - 콜백함수(callback function)

콜백함수(Callback Function)? 콜백함수를 간단하게 정의하면 어떤 특정 함수가 실행을 마친 후에 실행되는 함수를 콜백함수라고 합니다. 조금 더 세부적으로 설명드리면, 자바스크립트에서 함수는 객체입니다. 이러한 특징덕분에 함수는 인자로써 함수를 받을 수 있고, 다른 함수를 리턴할 수 있습니다. 이러한 특징을 가지는 함수를 고차함수(higher-order functions)라고 부릅니다. 인자로 전달된 함수를 콜백함수(callback function)이라고 부르는 거구요. 고차함수(higher-order functions) 조건 함수를 파라미터로 전달받는 함수 함수를 리턴하는 함수 콜백함수가 필요한 이유 콜백 함수를 사용하는 가장 큰 이유 중 하나는 비동기 데이터를 처리하기 위함입니다. 아래의 ..