본문 바로가기

자바스크립트49

JavaScript - Intl.NumberFormat을 이용하여 숫자 표현하기 / 내장 함수를 이용해 천단위 콤마 찍기 안녕하세요. 고코더 입니다. 이전 시간에 자바스크립트에서 3자리마다 콤마를 찍어 금액을 표현하는 정규식을 만들어봤습니다. 그런데 최신 브라우저에서는 복잡한 정규식을 쓰지 않아도 NumberFormat 함수를 이용해 각 나라에 맞는 통화 방식으로 숫자를 표현할 수 있습니다. 한번 실습해보겠습니다. ● 1. 가장 기초적인 방법입니다. 아무런 옵션을 주지 않으면, 해당 통화 기호는 US가 되고 우리나라와 같이 천 단위마다 콤마를 찍어 반환 합니다. let num = new Intl.NumberFormat().format('10000000000') console.log(num); ● 2. 결과 화면입니다. 이제 천단위 콤마를 한 줄로 해결이 가능합니다. ● 3. 그럼 다른 나라에 통화로 표현해보겠습니다. 독일과.. 2021. 11. 1.
JavaScript - 자바스크립트에서 trim() 기능 사용법 / 문자열 양쪽 공백 제거 안녕하세요. 고코더 입니다. trim()은 문자열 처음과 끝에 불필요한 공백을 제거하는 함수입니다. 자바에서도 ASP에서 많이 사용하는 문자열 기능이었습니다. 하지만 자바스크립트에서는 아쉽게도 trim 기능이 없습니다. (jQeury에는 존재하지만) 그래서 이번 시간에는 이가 없으면 잇몸으로 trim을 사용하는 방법을 알아보겠습니다. ● 1. 정규식을 이용해 간단하게 문자열에 공백을 제거해보겠습니다. 함수로 만들어 사용도 가능하지만 tirm()처럼 간단하게 문자열에 붙여 바로 사용할 수 있도록 코딩을 해보았습니다. let data = ' gocoder '; data.replace(/^\s+|\s+$/g,"") ● 2. 결과는 우리가 알던 그 기능처럼 잘 사용 됩니다. 2021. 11. 1.
JavaScript - 1000자리(3자리) 마다 콤마 찍기 안녕하세요. 고코더 입니다. 자바스크립트에서 보통 금액을 나타낼 때 "000" 있을 때마다 쉼표를 찍어서 표현합니다. 이 방식을 정규식을 이용해 한번 표현해보도록 하겠습니다. ● 1. 함수를 만들어 사용하도록 코딩을 하였습니다. 특정 숫자가 들어오면 이를 정규식을 이용해 "0"이 세 개가 있을 때마다 쉼표를 찍어줍니다. function setCommas(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } ● 1. 결과 화면처럼 큰 숫자가 들어와도 정확히 세 자리마다 콤마를 찍어주므로, 쉽게 금액을 표현할 수 있습니다. 2021. 11. 1.
JavaScript - 현재 시간이 오전, 오후인지 알아내기 안녕하세요. 고코더 입니다. 코딩을 하다 보면은 현재 시간이 오전인지? 오후인지? 알아내서 로직을 만들어 가는 경우가 있습니다. 그럴 경우 아주 간단하게 현재가 오전인지 오후인지 알아낼 수 있는 방법을 알아보겠습니다. ● 1. 우선 Date() 함수를 확장시켜 사용해보겠습니다. 해당 코드를 입력합니다. Date() 함수에 ampm이라는 기능을 확장하여 현재의 시간을 바라보고 am, pm 값을 반환합니다. Date.prototype.amPm = function() { let h = this.getHours() < 12 ? "am" : "pm"; return h; } ● 2. 사용하는 방법은 아래와 같습니다. Date를 새로운 객체를 만들어 amPm 기능을 호출하면 현재 시간에 오전, 오후 여부를 쉽게 알아.. 2021. 10. 31.
JavaScript - 자바스크립트 날짜 표시 "yyymmdd"를 "yyyy-mm-dd" 로 나타내기 / "19000101" -> "1900-01-01" 안녕하세요. 고코더 입니다. 실무를 하다 보면은 날짜 데이터를 커스텀해서 사용하는 경우가 많습니다. 그중에서도 가장 자주 만나는 형식은 "yyymmdd"를 "yyyy-mm-dd"로 변경하는 패턴입니다. ex) "20210101" -> "2021-01-01" 방법은 다양하지만 저는 쉽게 가는 방법부터 배워 보겠습니다. ● 1. substr를 사용하는 방법입니다. 문자열을 4자리 2자리 2자리를 잘라서 합쳐서 사용하는 가장 쉽고 좋은 방법입니다. let Today = "20210101" Today.substr(0, 4) + '-' + Today.substr(4, 2) + '-' + Today.substr(6, 2); ● 2. 다음은 정규식을 사용하는 방법입니다. let Today = "20210101" To.. 2021. 10. 31.
JavaScript - 배열 숫자 데이터 정렬하기 / sort(); 자바스크립트 배열 숫자 정렬 방법 안녕하세요. 고코더 입니다. 오늘은 자바스크립트에서 배열에 담긴 데이터를 정렬할 수 있는 함수를 한번 알아보려고 합니다. 내장 함수로 있는 바로 sort()가 그 주인공입니다. 오늘은 그중에서도 문자와 숫자를 정렬하는 방법을 알아보겠습니다. ● 1. 먼저 정렬할 배열을 선언합니다. data라는 변수에 정렬되지 않은 데이터를 입력하였습니다. var data = [1, 11, 12, 2, 3, 4]; ● 2. 이제 sort()를 기본으로 사용해 정렬해보겠습니다. 결과 값을 보시면 알겠지만 숫자도 문자 순서대로 정렬되어 뒤죽 반죽이 되었습니다. 1 다음 11이 오는 특징을 확인할 수 있습니다. data.sort(); // 결과값 [1, 11, 12, 2, 3, 4] ● 3. .. 2021. 4. 1.
Vanilla js - 바닐라 JS란? 무엇일까? / vanilla-js.com/ 바닐라 JS는 순수 자바스크립트다? 안녕하세요. 고코더 입니다. ● 1. 자바스크립트, 커피스크립트, 타입스크립트, 제이쿼리 등등 스크립트라는 이름도 참 많습니다. 요즘은 리액트, 뷰 까지 js 라는 이름이 들어간 네이밍이 많고 많습니다. 그중에서도 가장 특이한 이름을 뽑으라고 하면 아마도 "Vanilla JS" 바닐라 JS 라는 말은 좀 더 낯설 것입니다. 이 단어는 개발자도 모르는 경우가 많습니다. 도대체 맛있어 보이는 바닐라 JS는 무엇인지 한번 알아보겠습니다. ● 2. 해당 바닐라 JS를 알려주는 홈페이지를 방문해보겠습니다. 빠르고 가볍고 믿을 수 있는 자바스크립트라고 소개하고 있습니다. http://vanilla-js.com/ ● 3. 그리고 아래에는 다운로드 할 수 있는 버튼이 보입니다. 원하.. 2021. 2. 13.
JavaScript - setInterVal() 이란? / 반복 실행 메서드 / clearInterval() 스케줄러 실행 메서드 setInterVal() 안녕하세요. 고코더 입니다. ● 1. 오늘은 일정 시간을 두고 실행을 반복하는 메서드인 setInterVal에 대해 알아보겠습니다. 현업에서도 이 메서드는 자주 활용되는 기능입니다. 사용자의 상태를 체크하거나 매 초마다. 브라우저에 변화를 나타내기도 합니다. 대표적인 게 타이머 기능을 만들 때는 이 함수를 사용하게 됩니다. ● 2. 기본 사용방법 2번 라인 : 실행 코드를 넣습니다. 3번 라인 : 반복 실행 시간을 입력합니다. 1,000은 1초입니다. 100은 10/1 초입니다. setInterval( 실행코드, 1000 ); ● 3. 사용 시 주의할 점은 큰따옴표 묶어서 사용해야 제대로 동작합니다. setInterval("console.log('Timer .. 2021. 1. 24.
React.js - JSX에서 주석 사용하기 JSX에서 주석 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX에서 주석을 사용하는 방법을 알아보겠습니다. JSX는 자바스크립트 기반입니다. 그러므로 주석도 스크립트에서 사용하는 방식입니다. 주석은 개발자들의 흔적을 남길 수 있고 지우는 대신에 주석을 처리함으로 실행되지 않게 할 수 있습니다. ● 2. 단일 행을 처리하는 주석입니다. 한 줄 한줄 사용 가능합니다. //단일행 주석 ● 3. 복수행을 처리하는 주석입니다. 여러 줄을 처리하는 복수행 주석을 사용합니다. /* 복수행 주석 */ ● 4. 예제 소스를 함께 살펴보겠습니다. 3번, 4번 라인 : 복수행 주석을 사용하여 2개의 줄을 한 번에 주석 처리했습니다. 5번 라인 : 중괄호 안에 자바스크립트에도 사용 가능 6번 라인 : 단일행을 주석.. 2021. 1. 20.