개발/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); // 결과 // 문자..

개발/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? 하지만, 특정 부모 노드의 자식 노드 리스트 중 첫번 째 자식으로 배치하고 싶은 경우도 생..

개발/Javascript

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

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

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

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

새창으로 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' )

개발/HTML5

html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5)

html img 태그 src 속성에 깨진 이미지 경로를 넣으면 아래와 같이 아무 이미지도 안나오게 됩니다. 하지만 이때 깨진 이미지 경로일 경우 디폴트 이미지로 설정하는 방법이 있습니다. onerror 이벤트를 활용하면 됩니다. img 태그 디폴트 이미지 설정 예시는 아래와 같습니다. // onerror 사용 예시 // or // 이벤트 핸들러 vue에서는 @error를 사용해서 처리하면 됩니다. // vue에서 사용하는 방법

개발/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 최신 스펙을 기준으로 사용되..

개발/Vue

엑심베이(Eximbay)에서 자바스크립트(Javascript)로 FGKEY 설정하는 방법

회사에서 엑심베이(Eximbay) 결제 모듈을 연동할 일이 생겨서 Nuxt.js에 엑심베이 FGKEY를 설정했을 때 사용한 코드를 공유하도록 하겠습니다. 기본적으로 엑심베이에서 FRKEY를 사용하는 이유는 가맹점과 Eximbay 사이에 전송되는 파라미터의 유효성을 확인하기 위해 사용됩니다. Eximbay에 모든 거래 요청 시, 파라미터를 SHA-256으로 Hashing 하여 fgkey 파라미터로 전달하며, 이 값은 Eximbay에서 생성된 Hashing 값과 비교하여 거래의 유효성을 확인합니다. 응답 파라미터의 fgkey는 Eximbay에서 생성하며, 동일한 방법으로 가맹점에서 거래의 유효성을 확인합니다. fgkey생성을 위해서는 승인된 key가 필요하며, 해당 key는 Eximbay로부터 할당받습니다...

개발/Vue

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

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

개발/Vue

vue.js 사용자 지정 디렉티브를 활용해서 코드를 깔끔하게 작성하는 방법 (vue custom directive)

🤚 들어가기 전에 Vue에는 기본적으로 내장된 디렉티브가 존재합니다. v-model과 v-show가 대표적인 예시죠. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수도 있습니다. 디렉티브를 잘 만들어 놓으면 굉장히 유용하게 재사용할 수 있습니다. 💻 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법에는 2가지 방법이 있습니다. 전역으로 등록하는 방법과 로컬 컴포넌트에 등록하는 방법입니다. 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜줍니다. 지역 선언 로컬 컴포넌트에 directives로 등록하는 방법입니다. 아래와 같이 지역적으로 directives를 등록하면 됩니다. 💻 훅 함수 디렉티브에는 아래와 같은 다양한 훅 함수를 제공합니다. bind 디..

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

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

개발/Javascript

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

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

카테고리 없음

자바스크립트로 페이지를 새로고침하는 방법

자바스크립트로 페이지를 새로고침하는 방법에는 여러가지가 있습니다. 아래와 같은 코드를 사용해서 페이지를 갱신할 수 있습니다. location.reload(); location.reload(true); location.href = location.href; history.go(0);

개발/Google Cloud Platform

Google Cloud Functions와 Puppeteer 그리고 Cloud Scheduler를 활용해서 자동화 크롤러 개발하는 방법 (Node.js)

Google Cloud Functions와 Puppeteer을 활용해서 크롤링하는 방법을 익혀보고 더 나아가 Google Cloud Scheduler를 활용해서 크롤링 자동화까지 구현해보도록 하겠습니다. 해당 포스팅에서는 Google Cloud Functions, Puppeteer 그리고 Google Cloud Scheduler를 기본적으로 숙지하고 있다는 가정하에 진행하도록 하겠습니다. 간략하게 짚고 넘어가면 아래와 같습니다. Google Cloud Functions Google Cloud Functions는 클라우드 서비스를 빌드 및 연결하기 위한 서버리스 실행 환경입니다. Cloud Functions를 사용하면 클라우드 인프라와 서비스에서 발생하는 이벤트에 연결되는 단일 목적의 간단한 함수를 작성할..