숫자에 금액 단위 형식을 적용하면 어떻게 될까요? 돈(금액)을 화면에 보여주다 보면 단순히 숫자로 10,000원 이렇게 표기되는 것보다, 1만원이라고 표기되는 게 단위를 세지 않아도 되어 읽기가 편합니다. 돈의 단위를 숫자에 적용하면 가독성이 좋다는 건 사람마다 주관적인 부분이라 다르게 생각할 수 있는 부분이니 이게 꼭 옳다고 이야기는 어려운 부분이네요. 숫자 금액 단위 형식 적용하면? - 원, 만, 억, 조, 경 일반적으로 숫자에 포맷 형식을 적용하면 천 단위를 기준으로 "," 를 사용해 표기를 합니다. 하지만 금액(돈)을 셀 때는 만, 억, 조, 경 단위를 붙여 읽습니다. 위에서 제시한 결과처럼 말이죠 처음에 금액에 단위 형식을 적용하면 가독성을 높이고 문자의 길이가 짧아져서도 좋을 거라고 생각했는데..
ESNext는 다음 버전의 자바스크립트를 말합니다. 처음에 이 단어를 접했을 때는 "이건 뭐지?"라고 했었는데, 다음의 Javascript를 가리킨다니 어떻게 보면 재미난 용어인 것 같기도 합니다. ESNext의 정의 ESNext에 대한 명확한 정의는 Mozila의 문서에서 확인할 수 있습니다. 본문 내용을 해석해본다면, ESNext는 작성 시점에 다음 버전을 가리키는 역동적인 이름이다. ESNext 기능들은 제안이라고 부르는 것이 더 정확하다. 정의에 따라 사양이 아직 확정되지 않았기 때문에라고 설명되어 있습니다. 즉 ESNext는 단순히 신규 버전의 자바스크립트로 생각하기보다는 앞으로 발전할 자바스크립트를 통칭하는 단어라고 말할 수 있을 것 같습니다.
이번 글에서는 자바스크립트의 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()을 이용해 성공, 실패 콜백 함수를 등록하면 됩니다. 사용..
자바스크립트의 eval() 함수는 문자열로 이루어진 스크립트 코드를 실행하는 함수입니다. 그렇기 때문에 eval()을 잘 활용하면 동적으로 Javascript 실행문을 만들어서 실행할 수도 있지만, 보안에 취약하다는 문제점도 있는데요. 오늘은 eval()의 사용방법을 통해 어떤 점이 좋고 나쁜지 알아보도록 하겠습니다. 문자를 실행시키는 eval() console.log('2 + 2'); // output: '2 + 2' 일반적으로 함수의 매개변수로 문자 값을 사용하면 문자 리터럴로 인식되고 있는 리터럴로 사용됩니다. 위의 예제처럼 말이죠. 하지만 eval()을 사용하면 재미있는 결과를 만들어 낼 수 있습니다. console.log(eval('2 + 2')); // output: 4 eval()은 매개변수..
순수 함수(Pure Function)란 무엇일까요? 순수 함수에 대한 정의를 내리자면 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)입니다. 함수라면 당연한 거 아니냐 라고 생각하실 수 있지만 가장 기초적이면서 지키기 어려운 개발이 순수 함수를 만들고 그 함수들을 조합해 확장성, 재사용성을 높이는 코드를 작성하는 것입니다. 오늘은 자바스크립트를 통해 함수형 프로그래밍을 하는데에 있어 쉽지만 지키기는 순수 함수에 대해 이야기해볼까 합니다. 막상 내일 책상 앞에서는 일정에 쫓겨 잊겠지만, 적어도 오늘보다는 멋진 프로그래밍을 할 수 있기를 바라보면서 말이죠 순수 함수의 정의 - Pure Function 순수 함수의 정의는 서문에서 말한 것과 같이 동일한 매개변수가 주어지면 항상 동일한 결..
Promise를 한 마디로 정의한다면 비동기 작업을 나타내는 객체입니다. 조금 더 풀어서 설명하면 비동기 작업을 쉽게 사용할 수 있도록 적의 된 객체입니다. Promise는 ES6(ES2015)에 표준으로 등록된 사양이고, 모던한 Javascript에서는 가진 역할과 책임이 더 중요해졌습니다. 그럼 이번 글에서는 콜백 지옥(Callback hell)을 벗어나는 방법을 통해 Promise가 가진 장점을 알아보도록 하겠습니다. Promise를 사용하는 방법 먼저 콜백 지옥을 벗어나는 방법을 알아보기 전에 Promise의 사용 방식을 알아보려고 합니다. Promise의 사용 방식은 생각보다 중요한데요. 그 이유는 바로 Promise는 비동기에 Callback을 전달하지 않고 첨부하기 때문입니다. 말로는 이해하..
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로 설정하고, ..