개발/Javascript

자바스크립트 FileReader async/await 처리하는 방법 (Using the FileReader API in async functions)

FileReader API를 사용하면 사용자의 컴퓨터에서 파일을 읽을 수 있습니다. FileReader API는 콜백 방식으로 지원하고 있는데, 자바스크립트 async/await 문법으로 훨씬 더 깔끔하게 코드를 작성할 수 있습니다. 사용 방법 function readFileAsync(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { resolve(reader.result); }; reader.readAsBinaryString(file); reader.onerror = reject; }); } async function processFile() { try { con..

개발/Javascript

자바스크립트 엑셀 csv 한글 깨짐 해결하는 방법 (Javascript export CSV encoding issue)

자바스크립트 xlsx 라이브러리를 활용해서 구글 스프레드시트 csv 파일을 읽어올 때 한글이 깨지는 현상이 발생했는데 이를 해결하는 방법입니다. xlsx 라이브러리 xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 6 months ago. Start using xlsx in your project by running `npm i xlsx`. There are 3330 other projects in the npm registry using xlsx. www.npmjs.com .xlsx 파일의 경우 readAsBinaryString 메서드로 잘 처리 되었지만, .csv, .tsv 파일은 한글 깨짐 ..

개발/Javascript

자바스크립트 super 제대로 이해하기

super 키워드는 상위(부모) 객체의 함수를 호출할 때 사용됩니다. 문법 super([arguments]); // 부모 생성자 호출 super.functionOnParent([arguments]); 설명 클래스의 생성자(constructor)에서는 super 키워드 하나만 사용되거나 this 키워드가 사용되기 전에 호출되어야 합니다. 또한 super 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다. 클래스에서 super 사용하는 방법 class Parent { constructor(age) { this.name = "parent"; this.age = age; } sayMyName() { console.log(this.name); } } class Child extends Parent { c..

개발/Javascript

[자바스크립트] replace 정규표현식 gi는 무엇을 의미할까?

자바스크립트에서 replace를 활용해서 정규표현식을 적용할 때 gi라는 패턴을 사용하곤 합니다. 아래 예시를 살펴봅시다. hellllo worLd 문자열에서 l을 a로 모두 치환하고 싶을 경우 아래와 같이 정규표현식을 적용하면 되는데요. const str = "hellllo worLd"; console.log(str.replace(/l/gi, 'a')); // heaaaao worad 정규표현식에 사용된 gi의 의미는 아래와 같습니다. 정규표현식 g : 발생할 모든 pattern에 대한 전역 검색 i : 대/소문자 구분 안함 그렇기 때문에 만약 위 예시에서 정규표현식에 사용된 i를 빼게 된다면, 대문자 L은 치환되지 않고, heaaaao worLd 결과를 확인할 수 있습니다. const str = "h..

개발/Javascript

[자바스크립트] 강제로 UA(userAgent) 변경하는 방법 및 간단예시

강제로 UA(userAgent)를 변경하는 방법이 좋은 방법은 아닙니다. 하지만 이러한 방식으로 UA를 조작해볼 수 있다라는 점을 참고하면 좋을 것 같습니다. 예시 const newUA = `${navigator.userAgent} helllllo!`; Object.defineProperty(window.navigator, "userAgent", { get: () => newUA }); // before // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36 // after // helllllo 값이 추가된 모습 // Mozilla/5.0 ..

개발/Javascript

자바스크립트 insertBefore() 사용법 및 간단 예제

insertBefore? insertBefore() 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 문법(Syntax) let insertedNode = parentNode.insertBefore(newNode, referenceNode); referenceNode가 null 이라면, newNode가 자식 노드의 리스트의 끝에 삽입됩니다. referenceNode는 옵션값이 아닙니다. 명시적으로 Node 나 null 를 전달해야 합니다. insertNode - 삽입되는 노드, 즉 newNode parentNode - 새로 삽입된 노드의 부모입니다. newNode - 삽입할 노드입니다. referenceNode - newNode가 삽입될 때 기준이 되는 노드 (해당 노드 앞에 새로운 ..

개발/Javascript

자바스크립트 스크롤 맨 위로/맨 아래로 올리기/내리기

자바스크립트로 스크롤 최상단, 최하단으로 이동시키기 위해 전역객체(window) scrollTo 메서드를 활용하면 굉장히 간단하게 해결할 수 있습니다. window.scrollTo(x-좌표, y-좌표) x-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 가로축입니다. y-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 세로축입니다. 맨 아래로 스크롤 이동 방법 window.scrollTo(0, document.body.scrollHeight); 맨 위로 스크롤 이동 방법 window.scrollTo(0, 0);

개발/Javascript

자바스크립트 encodeURI encodeURIComponent 차이 | URL 한글 인코딩 디코딩 방법과 예시

자바스크립트에서 인코딩 처리를 할 때 자주 사용하는 encodeURI, encodeURIComponent 함수가 있는데요. 똑같은 문자열 인코딩 처리를 하는 것처럼 보이지만 문자열 인코딩 처리 방식이 조금 다릅니다. 상황에 따라서 제대로 활용하기 위해 이번 포스팅에서 해당 구문을 정리해보도록 하겠습니다. encodeURI / decodeURI encodeURI() 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다. 이스케이프 하지 않는 문자: A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # 예시) // http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces e..

개발/Javascript

자바스크립트 모바일 키보드 닫는 방법(비활성화) | Close Mobile Keyboard & Menu on Return

모바일에서 Input 태그에 포커싱이 들어가면 자동으로 키보드가 활성화 되는데요. input 태그에 값을 모두 입력하고 return을 눌렀을 때 키보드만 hide 처리하는 방법이 있습니다. 보통 form 태그에 감싸져있는 input이라면 return을 눌렀을 때 자동으로 form submit 이벤트가 발생할 것입니다. 해결방법 해결방법은 keypress 이벤트 흐름을 중단시키고 현재 input 포커스를 blur처리를 하면 됩니다. // Javascript document.querySelector('input').addEventListener('keypress', (e) => { if (e.keyCode === 13) { e.preventDefault(); document.querySelector('inp..

개발/Javascript

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

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

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

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