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

개발/Javascript

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

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

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

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

자바스크립트 인스턴스 이름 가져오는 방법 (javascript get instance name)

자바스크립트 인스턴스 이름을 가져오는 방법은 constructor에 접근해서 name을 가져오면 됩니다. function FooBar() { } var foobar = new FooBar(); console.log(foobar.constructor.name); // 'FooBar'

개발/Javascript

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

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

개발/Javascript

자바스크립트로 구현한 싱글톤 패턴 (Singleton Patterns)

싱글톤 패턴(Singleton Pattern)? 싱글톤 패턴(Singleton Patterns)은 디자인 패턴을 공부하려고 할 때 가장 먼저 접하게 되는 패턴 중 하나입니다. 싱글톤 패턴은 이름에서 알 수 있듯이 애플리케이션에서 단 한번만 인스턴스화할 수 있는 객체입니다. 프로그램에서 동일한 커넥션 객체를 생성한다던지 단 하나만 존재해야되는 객체를 생성할 때 유용하게 사용할 수 있는 패턴입니다. 싱글톤 패턴이라는 단어나 사용법을 모르더라도 무의식적으로 비슷한 개념을 사용한 적이 분명히 있을 것입니다. 혹시 코드 중에 $를 보신 적 있으신가요? 여러분이 jQuery를 사용하고 계시다면, 이미 싱글톤 패턴을 사용해본 적이 있으신 겁니다. 여러분의 어떤 클래스에서든 $를 활용해서 DOM을 조작하고 이벤트도 다..

개발/Javascript

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

자바스크립트에는 추상적 같음 비교(이중 등호, 동등 연산자)와 엄격한 같음 비교(삼중 등호, 일치 연산자)가 있다. 가장 큰 차이점은 이중 등호는 두 값을 비교할 때 자동으로 형변환하여 같음을 비교하지만, 삼중 등호는 형변환을 수행하지 않고 비교한다. 이중 등호 연산자의 예시를 보자. 0 == false //true "" == false //true "" == 0 //true "0" == 0 //true [1,2] == "1,2" //true new String('hello') == 'hello' //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('hello'); } greeting();greeting 함수를 호출 할 때, 예상대로 hello 문자열이 console에 기록이 될 것이다. 하지만 함수를 선언하기 전에 실행하면 어떻게 될까? greeting(); function greeting() { console.log('hello'); }위 예시는 신기하게도 처음 예시와 동일하게 hello 문자열을 콘솔창에 기록한다. 이것이 바로 호이스팅이 동작하는 방식이다. 대부분 이 호이스팅 동작 방식을 설명할 때, 선언한 변수와..

개발/Javascript

자바스크립트에서 undefined를 체크하는 가장 좋은 방법

x === undefined변수가 선언되어 있지 않으면, 동작하지 않는다. ReferenceError: x is not defined변수가 선언되었지만, 정의가 되어있지 않을 때만 true를 return 해준다. typeof x === 'undefined'를 사용하는 편이 더 낫다.

개발/Javascript

디자인 패턴:: Simple Factory - Factory Pattern 1

팩토리 패턴은 추상화된 부모 클래스를 활용해서 다양한 파생 클래스들을 공장처럼 찍어내듯 만들어내는 것을 말합니다. real world 예시로는 자동차, 커피, 피자 등 특정 제품을 만들 때 공통된 부분을 추상화된 부모 클래스로 생성하고 제품들 마다 커스텀하게 만들어야 하는 부분들은 하위 클래스에서 지정해주는 것을 들 수 있습니다. 팩토리 패턴은 크게 3종류로 분류해볼 수 있습니다. Simple Factory Factory Method Abstract Factory 이번 포스팅에서는 Simple Factory를 다뤄보도록 하겠습니다. Simple Factory Simple Factory는 객체들의 생성을 책임지고 관리하는 팩토리를 만들어서 확장 및 관리를 용이하게 해주는 방식입니다. Simple Facto..

개발/Javascript

자바스크립트 call, apply, bind 차이점

자바스크립트 함수를 다루다 보면 this 키워드를 다뤄야 할 경우가 많이 생기게 됩니다. 이 this 키워드를 정확하게 이해하려면 함수와 메서드의 차이부터 제대로 짚고 넘어가야 됩니다. Function vs Method 함수와 메서드는 둘 다 동일한 함수이지만 존재하는 위치에 따라서 함수가 될 수 있고, 메서드가 될 수 있습니다. // 함수 const greeting = () => { console.log(this); } const module = { greeting() { console.log(this); } } greeting(); // window object module.greeting(); // module object차이점이 보이나요? greeting 변수에 할당된 함수에서의 this와 mod..

개발/Javascript

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

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

개발/Javascript

[자바스크립트] javascript - this

자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해, arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달되어집니다. this 인자는 이해하기 조금 까다롭습니다. this가 이해하기 어려운 이유는 자바스클비트의 여러가지 함수가 호출 패턴에 따라 this가 다른 객체를 참조(this 바인딩)하기 때문입니다. 아래와 같이 this 바인딩에는 3가지 패턴이 있습니다. 객체의 메소드를 호출 -> 해당 메소드를 호출한 객체로 바인딩함수를 호출 -> 전역 객체에 바인딩샘성자 함수를 호출 -> 새로 생성되는 객체에 바인딩 오늘 차근차근 이 this 바인딩에 대해서 정복해 나가도록 하겠습니다. 1. 객체를 호출할 때 this 바인딩 객체의 메소드를 호출할 경우, 메소드 내부 코..

개발/Javascript

[자바스크립트] javascript array (자바스크립트 배열) 정리 2

최근 배열 위주로 코딩을 많이 해야하는 상황을 접하며 생각보다 모르고 있던 ES5 스펙의 Array 메서드들이 많이 있음을 알게 되었습니다. ECMA Script6의 새로운 스펙들이 하나 둘 최신 브라우저에 적용되고 있는 상황에서 기존 ES5에 이미 구현되어 있는 배열의 메서드들 조차도 제대로 파악하고 있지 못하는 사람들을 위해 for 문으로 돌리기 쉬운 몇 가지 메서드들을 정리해보겠습니다. Array 객체에서 제공하고 있는, 배열 전체를 돌며 어떤 작업을 할 때 유용한 다양한 메소드들을 하나씩 살펴보도록 하겠습니다. 배열 작업을 할 때 for문이 먼저 생각나는 사람이라면 꼭 보시면 좋을 것 같습니다. join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. arr 배열에 있는 원소..

개발/Javascript

[2020 최신 ES6+] 자바스크립트 배열 기본부터 응용까지 완벽 정리

자바스크립트로 개발을 하다 보면 배열이라는 자료구조를 접하게 됩니다. 배열이란 무엇일까요? 그리고 배열은 어떤 경우에 사용이 되고 어떤 기능을 가지고 있을까요? 이번 포스팅에서는 배열을 다루기 위한 모든 것을 설명하려고 합니다. 배열이란? 배열은 모든 언어(파이썬(Python), 자바(Java), C, 자바스크립트(Javascript))에서 지원하고 있는 자료구조입니다. 배열을 간단히 설명드리면 연관된 데이터를 하나의 틀에서 관리하기 위한 자료구조입니다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있습니다. 사용하는 언어에 따라서 배열의 특성이 조금 다를 수 있지만, 기본적인 동작 원리는 동일하기 때문에 다른 언어를 사용하시더라도..

개발/Javascript

[자바스크립트] 이벤트 리스너와 콜백함수(javascript callback)

오늘은 자바스크립트 이벤트 리스너와 콜백함수를 다뤄보도록 하겠습니다. 이벤트 리스너 ? 이벤트 리스너는 쉽게 말해 어떠한 이벤트에 대해 대기중인 상태를 말합니다. 항상 리스닝(들으며) 대기중인거죠. 해당 이벤트가 발생했을 때 등록해놨던 이벤트 리스너가 실행됩니다. 위의 코드를 아마 한버 보신 적이 있을겁니다. 이 코드가 대표적인 이벤트 리스너인데요. window가 load될 때 function 부분이 실행이 되는겁니다. 그럼 load 되었다는 것을 누가 알려줄까요? 바로 브라우저가 알려줍니다.비슷한 코드로, 그리고 자주 사용하는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + "이벤트 명"으로 명명됩니다.onclick, onkeypress, onmousemove 등 처럼요. window ..