숫자에 금액 단위 형식을 적용하면 어떻게 될까요? 돈(금액)을 화면에 보여주다 보면 단순히 숫자로 10,000원 이렇게 표기되는 것보다, 1만원이라고 표기되는 게 단위를 세지 않아도 되어 읽기가 편합니다. 돈의 단위를 숫자에 적용하면 가독성이 좋다는 건 사람마다 주관적인 부분이라 다르게 생각할 수 있는 부분이니 이게 꼭 옳다고 이야기는 어려운 부분이네요. 숫자 금액 단위 형식 적용하면? - 원, 만, 억, 조, 경 일반적으로 숫자에 포맷 형식을 적용하면 천 단위를 기준으로 "," 를 사용해 표기를 합니다. 하지만 금액(돈)을 셀 때는 만, 억, 조, 경 단위를 붙여 읽습니다. 위에서 제시한 결과처럼 말이죠 처음에 금액에 단위 형식을 적용하면 가독성을 높이고 문자의 길이가 짧아져서도 좋을 거라고 생각했는데..
이번에는 Javascript의 Array가 가진 groupBy() 함수의 정의와 사용 방법에 대해 알아보겠습니다. groupBy() 함수는 알아두면 컬렉션(Collection)을 다룰 때 유용하게 쓸 수 있기 때문에 기본적인 사용 방법뿐만 아니라 알아두면 활용하는 부분도 예제 코드로 확인해보겠습니다. 그리고 자바의 스트림 API에서도 groupBy() 기능을 사용할 수 있어요. groupBy() 정의 Array.prototype.groupBy ( callbackfn[, thisArg] ) MDN에서 groupBy() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다고 정의합니다. 조금 말이 어렵다고 생각되는데요. groupBy() 함수가 주로 사용되는 용..
이번 글에서는 자바스크립트의 map() 함수를 만들어보겠습니다. 이전에 filter()를 구현했던 것과 같이 map()을 직접 정의해보면서 map() 함수에 대해 알아가 보도록 하겠습니다. map() 함수도 filter() 함수처럼 구현하는 내용이 어렵지 않기 때문에 글 내용을 따라 코드를 작성해보시기를 추천드립니다. map()를 사용하는 이유 map() 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수입니다. 객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다는 점을 알아주세요. 예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터 사용해야 하는 상황이 발생한 경우에 map()을 사용할 수 있습니다. map()은 주어진 값을 새로운 값..
이번 글에서는 자바스크립트의 filter() 함수를 직접 만들어보겠습니다. 가벼운 내용이지만 자바스크립트가 가진 filter() 함수를 구현해본다면 이전보다 filter() 함수에 대해 잘 이해할 수 있을 뿐만 아니라 함수형 프로그래밍이 가진 멋진 장점을 알 수 있습니다. filter()를 사용하는 이유 filter() 함수는 의미 그대로 "거르다"를 하기 위해 정의된 함수입니다. 예를 들어 특정 사용자 데이터(이름, 나이)가 주어지고 그중에서 특정 조건을 만족하는 대상들을 찾는 경우에 filter()를 사용할 수 있습니다. 선언적인 프로그래밍 방식으로 이 문제를 해결한다면 for문 혹은 while문을 사용해서 다음과 같은 방식으로 코드를 작성할 수 있습니다. const users = [ { name: ..
자바스크립트를 통해 사용자의 위치 정보를 알아내는 방법은 Geolocation를 사용하는 것입니다. Geolocation API는 사용자의 현재 위치를 가져오는 API로 주로 사용자 위치를 지도에 표시할 때 사용하거나 사용자 위치 기반의 서비스를 제공하는 경우에 사용됩니다. 또한 사용자의 위치 데이터는 개인 정보와 관련되어 있기 때문에 사용자의 동의 없이는 사용할 수가 없습니다. 이번 글에서는 Geolocation을 이용해서 사용자의 위치를 일회성 혹은 실시간으로 확인하는 방법에 대해 알아보도록 하겠습니다. 사용자의 위치를 확인하는 방법 geolocation를 이용해 사용자의 위치를 확인하는 방법은 간단합니다. getCurrentPosition()을 이용해 성공, 실패 콜백 함수를 등록하면 됩니다. 사용..
순수 함수(Pure Function)란 무엇일까요? 순수 함수에 대한 정의를 내리자면 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)입니다. 함수라면 당연한 거 아니냐 라고 생각하실 수 있지만 가장 기초적이면서 지키기 어려운 개발이 순수 함수를 만들고 그 함수들을 조합해 확장성, 재사용성을 높이는 코드를 작성하는 것입니다. 오늘은 자바스크립트를 통해 함수형 프로그래밍을 하는데에 있어 쉽지만 지키기는 순수 함수에 대해 이야기해볼까 합니다. 막상 내일 책상 앞에서는 일정에 쫓겨 잊겠지만, 적어도 오늘보다는 멋진 프로그래밍을 할 수 있기를 바라보면서 말이죠 순수 함수의 정의 - Pure Function 순수 함수의 정의는 서문에서 말한 것과 같이 동일한 매개변수가 주어지면 항상 동일한 결..
Promise를 한 마디로 정의한다면 비동기 작업을 나타내는 객체입니다. 조금 더 풀어서 설명하면 비동기 작업을 쉽게 사용할 수 있도록 적의 된 객체입니다. Promise는 ES6(ES2015)에 표준으로 등록된 사양이고, 모던한 Javascript에서는 가진 역할과 책임이 더 중요해졌습니다. 그럼 이번 글에서는 콜백 지옥(Callback hell)을 벗어나는 방법을 통해 Promise가 가진 장점을 알아보도록 하겠습니다. Promise를 사용하는 방법 먼저 콜백 지옥을 벗어나는 방법을 알아보기 전에 Promise의 사용 방식을 알아보려고 합니다. Promise의 사용 방식은 생각보다 중요한데요. 그 이유는 바로 Promise는 비동기에 Callback을 전달하지 않고 첨부하기 때문입니다. 말로는 이해하..
일반적으로 Javascript의 배열의 요소에 접근하는 경우 index를 사용합니다. 예를 들면 array.length를 사용해서 말이죠. 하지만 at()라는 함수를 사용하면 조금 더 멋진 방법으로 배열(Array)의 요소를 다룰 수 있습니다. 이번에는 at()을 이용해 index 없이 배열을 사용하는 방법에 대해 알아보겠습니다. index를 이용한 배열 요소 접근 방법 배열의 요소에 접근하는 방법으로 주로 사용되는 방법은 바로 index를 사용하는 방법입니다. index는 위치를 기준으로 정의된 값입니다. 배열에서의 index는 배열 시작으로부터 몇 번째에 위치하느냐를 가리키는 위치 값입니다. 그렇기 때문에 배열의 첫 번째 요소를 가리키는 경우 index의 값으로 0을 사용합니다. const numbe..
HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열로, HTTP 통신을 할 때 값을 주고받을 수 있도록 만들어진 보조적인 수단입니다. 기본적으로 HTTP 프로토콜은 상태가 없으며(stateless), 제한적이지만 쿠키를 이용해 값들을 주고받을 수 있게 정의된 개념입니다. 정확한 명세는 RFC 6265에 정의되어 있습니다. HTTP 쿠키의 정의를 알아보자. 쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 전달받은 내용(데이터)을 저장하는데 이를 쿠키라고 이..
이번에는 디바운스(debounce) 혹은 디바운싱(debouncing)이라고 불리는 개념을 알아보도록 하겠습니다. 이 글에서는 debounce라는 단어를 사용하여 개념을 설명합니다. Debounce의 개념 debounce는 한 문장으로 요약정리하면 처리해야 하는 일들을 미루어두었다가 한 번에 실행하는 방법을 말합니다. 의미 그대로 하나의 방법이기 때문에 표현하는 방법이나 설명하는 방식은 여러 형태로 존재하지만, 단순히 이벤트 핸들러 혹은 이벤트 처리하는 기술에 국한되는 것이 아니라 포괄적인 개념으로 실행해야 하는 일련의 일들을 한 번에 처리한다고 이해하시면 좋을 것 같습니다. 위 그림은 일반적인 일을 수행하는 시점과 debounce를 적용한 일을 수행하는 시점을 시각화한 내용입니다. 처리해야 할 일이 생..
자바스크립트 ES6에서 새롭게 추가된 내용 중 화살표 함수(arrow function)는 함수를 단축해서 사용하는 방법으로 유용한 문법입니다. 함수를 단축해서 사용하는 문법이 화살표 함수라고 말했지만, 사실 화살표 함수(arrow function)가 일반 함수(function)와는 결을 달리 합니다. 그럼 오늘은 자바스크립트 ES6에 새롭게 추가된 화살표 함수를 알아보도록 하겠습니다. 화살표 함수를 선언하는 방법 화살표 함수는 일반 함수와 다른 점이 몇 가지 있습니다. 대표적으로는 선언하는 방법과 this의 범위입니다. 오늘은 먼저 화살표 함수를 선언하는 방법을 알아보겠습니다. function fn1() { return 'Hello World!' } const arrowFn1 = () => 'Hello ..
화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다. 팝업(Popup)은 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능이고, 모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. 모달은 Winform에서 말하는 Dialog와 같은 개념이기도 합니다. 오늘은 자바스크립트를 사용해서 모달 창을 만드는 방법을 알아보도록 하겠습니다. 자바스크립트로 모달(Modal) 만들기 Modal Modal 띄우기 먼저 CSS를 사용해서 Modal이 되는 대상의 position을 absoulte로 설정하고, ..
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.
