이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 가장 많이 쓰이는 함수 중 3 대장이라고 할 수 있는 것이 map, filter, reduce인데요. 그중 filter는 활용도가 높은 편이라 어디라고 정해진 곳 없이 사용되는 편입니다. 자 본격적으로 array의 filter 함수를 알아보러 가시죠. filter 정의 Array.prototype.filter ( callbackfn [ , thisArg ] ) filter는 해석 그대로 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. SQL로 치면 where절에서 하는 행위를 하는 함수입니다. EC..
오늘은 Javascript의 Array가 가지고 있는 map의 정의와 사용법 그리고 활용 방법에 대해 이야기해보려고 합니다. 일단 Array가 가진 map 함수가 어떤 함수인 지부터 살펴보도록 하죠. map 정의 Array.prototype.map ( callbackfn [ , thisArg ] ) 주로 주어진 배열의 값을 재정의 할 때 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다. 예제 코드를 통해 map의 사용법을 살펴보겠습니다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => number * num..
자바스크립트에서 특정 문자를 찾아 원하는 문자로 치환할 수 있는 replace()라는 API를 제공합니다. 오늘은 replace() 함수를 통해 문자 치환하는 기능을 다루어보겠습니다. replaceAll() replace()를 알아보기에 앞서 replaceAll() 함수에 대해 먼저 알아보겠습니다. 일단 Javascript의 내장 기능 중 replaceAll()은 없다고 생각하시는 게 좋습니다. ECMA-262 12th(2021) 스펙을 기준으로 replaceAll() 기능이 추가되었기 때문에 최신을 바탕으로 하는 개발 환경이 아니라면 replaceAll()은 사용하기가 어렵습니다. See the Pen repalceAll by yongdae (@yongdae) on CodePen. replace() 본..
null과 undefined은 존재하지 않는 것을 나타내는 자바스크립트가 가진 특별한 타입입니다. null은 Java 나 c# 같은 다른 언어에서도 사용되는 리터럴이기 때문에 사용하는 게 어렵지 않지만 undefined라는 타입은 기존에 null을 사용하던 프로그래머와 처음 자바스크립트를 마주한 사람에게는 혼란을 야기시키는 내용 중 하나입니다. null과 undefined의 차이는 무엇이고 어떻게 사용하는 게 좋은 걸까요? null과 undefined 알아보기 결론적으로 null과 undefined의 의미는 둘다 값의 존재 유무를 표현하는 타입입니다. 자바스크립트에서는 세밀한 부분의 의미는 달라도 문맥적 의미로는 같은 의미를 가진 가진 타입을 2개로 분리해서 정의하다보니 프로그래머 입장에서는 애매모호함을..
이번 글에서는 이전에 학습한 Javascript의 Date() 객체를 활용해서 문자 시계(Text Clock)를 만들어 보겠습니다. 자바스크립트의 내장 객체인 Date와 타이머 함수인 setInterval()을 사용하면 년, 월, 일, 시간을 보여주는 시계를 만들 수 있습니다. 문자 시계(Text Clock) 만들기 화면에 날짜와 시간을 표시하기 위해서는 Date객체의 날짜 및 시간 데이터 값을 가져오는 함수가 필요하고 일정 시간을 주기로 화면에 보이는 값을 갱신하기 위해서는 setInterval() 함수를 사용합니다. 이렇게 Date 객체의 날짜 및 시간 제공 함수와 특정 주기 반복 실행 함수를 가지고 쉽게 문자 시계(Text Clock)를 만들 수 있습니다. : . . 예제로 작성한 코드는 첨부파일로..
이번 글에서는 Javascript의 Date 객체를 이용해 서로 다른 날짜를 비교하는 방법에 대해 알아보려고 합니다. 날짜를 비교하는 방법은 이전에 학습한 날짜 형식 맞추기나 날짜 설정하는 것에 비해 비교적 간단합니다. 기본적으로 비교 연산자를 사용해 서로 다른 날짜의 차이를 알 수 있습니다. 날짜 차이 또는 날짜 비교 혹은 날짜 계산 const january = new Date(2021, 0, 1); const february = new Date(2021, 1, 1); // true console.log(january february); Date 객체는 비교 연산자를 이용해 값의 차이를 비교할 수 있고, 이를 통해 이전 날짜..
이번에는 Javascript의 Date 객체가 가진 format 형식 지정과 toString에 대해 이야기해보려고 합니다. Javascript의 Date 객체는 날짜의 형식과 관련해 편리함 없이 불편한 기능들을 제공합니다. 기본적으로 7가지의 형식을 정의하고 있으며, 앞서 말했듯 이 기능들은 편의성이 떨어져 잘 사용되지 않습니다. Date 기본 날짜 형식 지정 및 출력 Date 객체는 기본적으로 7가지의 형식 출력을 제공합니다. const today = new Date(); today.toString(); // Mon Apr 19 2021 23:02:18 GMT+0900 (Korean Standard Time) today.toDateString(); // Mon Apr 19 2021 today.toLoc..
오늘은 Date 객체가 가진 get, set 함수를 통해 날짜 및 시간 데이터를 가져오고 설정하는 방법에 대해서 이야기하려고 합니다. Date 객체를 사용하는 기초적인 부분을 아직 잘 모르시거나 조금 더 알고 배워보고 싶으신 분은 먼저 이전에 작성한 글을 통해 학습 후 이 글을 통해 조금은 더 능숙하게 Date 객체를 다뤄보시기를 추천드립니다. Javascript - Date 기초 배우기 [new Date()] 맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨 7942yongdae.tistory.com 날짜 설정하기 const nextYear =..
맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨어집니다. 그래서 Javascript 같은 경우 내장하고 있는 Date보다는 Moment와 Date-fns와 같은 별도의 라이브러리를 통해 Date(날짜 및 시간)를 사용합니다. 오늘은 어렵지만 알아두면 좋은 Javascript의 Date를 전반에 걸쳐 살펴보도록 하겠습니다. Date의 Timezone 자바스크립트 Date는 2개의 시간대를 고려하고 만들어졌습니다. - Local time: 현재 실행되고 있는 환경을 기반으로 한 시간대입니다. - UTC(Coordinated Universal Tim..
줄여쓰지 않는다. (축약 금지) 이 규칙이 가지는 의미 int numCnt = 4; for(int i = 0; i < list.size(); i++) { ... } String btnText = "hello world"; 프로그래밍을 하다 보면 자주 보게 되는 변수명들이 있는데 생각이 나는 대로 적어보면 다음과 같다. 코드를 작성하다 보면 클래스명이나 메서드명 아니면 변수 명의 이름을 줄여서 쓰고 싶은 욕구를 느끼게 된다. 그 이유는 주로 이곳저곳에서 값들을 가져와서 사용하다 보면 구분을 짓기 위해 접두사를 사용하게 되는데 그 접두사를 이어 붙이다 보면 이름의 길이가 길어져서 한글 자라도 줄이고자 count는 cnt, index는 i, button은 btn 같이 이름을 함축적으로 줄여 쓰게 된다. 또한 ..
Port 8080 was already in use 에러와 원인과 해결 방법 메시지 *************************** APPLICATION FAILED TO START *************************** Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that's listening on port 8080 or configure this application to listen on another port. Process finished with exit code 1 원인 이 에러가 발생하는 경우는 서버를 구동하려고 할 때 서버가 사..
Photo by Xiaofen P on Unsplash 한 줄에 점 하나만 찍는다. "한 줄에 한 점만 사용"이라는 규칙은 코드를 작성할 때 한 줄(Line)에 "." 하나만 사용하자는 이야기입니다. 단순하게 코드 한 라인에 "." 하나를 사용하는 규칙을 적용하면 코드의 가독성이 좋아집니다. 간단하게 예를 들면 자바에서 람다식을 무자비하게 사용한 코드들에 "한 줄에 한 점만 사용" 이 규칙을 적용하면 코드를 이해하기 쉬워집니다. 하지만 "한 줄에 한 점만 사용" 규칙은 디미터의 법칙이 말하는 "Don't talk to stranger"(낯선 사람과 대화하지 마라), 바꿔 말하면 친구 하고만 말을 하라는 의미도 가지고 있습니다. 일반적으로 한 줄에서 "."이 하나 이상인 경우에는 한 가지 이상의 일을 하고..