너와 나의 프로그래밍

Intl?🤔 최근 Youtube 알고리즘으로 Javascript Intl 관련 강좌들이 많이 나오기 시작했다. 꽤 오래전에 나왔던 것인데 이제와서 Youtube를 통해 알게됬다는게 뭔가 뒤쳐지고 있다는 생각도 들었다;; 무심코 본 영상에서 정말 신기하다고 생각해서 나도 직접 MDN을 참고하면서 공부했고 그 중에서 Intl의 장점과 사용법을 간단하게 공유해볼까 한다. moment.js 라이브러리 라든지 new Date()를 사용하면서 개발하는 시대가 점점 끝나가는게 아닐까 싶다. ✏️Intl.DateTimeFormat DateTimeFormat은 브라우저 언어에 맞는 날짜와 시간 서식을 적용하기 위한 객체다. 기존에는 날짜와 시간 서식을 사용하려면 복잡한 로직이라든지 문자열을 이어 붙이거나 문자열 리터럴로..

알고리즘 문제를 풀 때나 현업 프로젝트에서도 정렬은 거의 필연적으로 만나게 된다. Javascript에서 이미 Array.prototype.sort 라는 메서드를 제공하긴 하지만 그리 간단한 정렬들만 만나기는 참 쉽지 않고 이 정렬 메서드는 굉장히 많은 활용성을 가지게 된다. 그 중 배열 안에 있는 객체의 대해서 정렬을 하는 다양한 방법을 소개해볼까 한다. const items = [ { name: 'Edward', score: 1 }, { name: 'Sharpe', score: 2 }, { name: 'And', score: 3 }, { name: 'The', score: 3 }, { name: 'Magnetic', score: 4 }, { name: 'Zeros', score: 5 } ]; ✌️ 객..

Intro...😇 프로젝트를 진행하다보면 체크박스(Checkbox)는 정말 필연적으로 만나게 되는 것 같다. 보통 체크박스로 선택한 Value들로 처리를 하는 방식이 많은데 가장 많이 질문하는 것이 다중 선택 후 Check 된 값들의 추출방식이 아닐까 싶다. Checkbox는 기본적으로 다중선택이 가능하다. 5개가 있으면 5개 모두 체크가 가능하고 10개가 있으면 10개 모두 된다. 하지만 10개의 Checkbox중에 오직 한가지만 선택할 수 있도록 해야한다면 과연 어떻게 하면 좋을까? How To Only One Check!?🤔 제일먼저 type인 checkbox의 input Element를 넣어주고 id를 Setting 해준다. const selectOnlyOne = (id) => { for (var..

앱에서 회원가입을 할 때나 카드번호, 비밀번호, 생년월일 입력을 할 때 자주 사용되는 Input Element를 입력 후 자동으로 다음 Input으로 이동하는 Action을 많이 사용한다. 특히 모바일 환경에서 자주 볼 수 있는데, 비밀번호를 한 자리씩 입력 후 다음 자리를 입력하는 식, 또는 Backspace는 눌러 전 단계의 입력 Input으로 넘어가야되는 일이 발생할 수 도 있다. 하나의 Input을 사용했을 때는 커서 이동없이 바로바로 처리하면 되지만 부득이하게 Input을 여러 개 사용할 때의 이동 스크립트를 공유하려고 한다. 먼저 Input에 name Attribute를 추가해 주고 onkeydown 이벤트에 function에 event 매개변수를 추가해 Binding 해준다. 특히 maxle..

최근 추가된 Javascript 문법중 optional chaining은 객체를 검증할 때 사용한다. 평소 개발을 하다 보면 항상 object에 접근했을 때 해당 값이 없을 때 항상 오류를 발생하는 경우가 굉장히 많다. 이럴때 앱이 멈추지 않고 단순 undefined를 리턴하는 값을 출력해주는 optional chaining 문법을 사용하면 좋다. optional chaining는 문법은 "object?.key"로 물음표와 콤마를 합성해 주면 된다. 보통 object에 key 값을 접근할 때는 단순히 콤마(.)를 사용해서 접근했지만 물음표와 같이 사용하여 객체에 접근하는 것은 굉장히 생소할 것이다. 이 문법이 생기기전에는 이러한 오류를 사전에 검증하기 위해 조건문에 AND(&&)을 사용하여 객체가 있는지..

[Javascript] 두 배열의 대한 비교 방법 실무에서나 알고리즘의 대한 공부를 할 때 두 배열의 대한 비교나 교집합(Intersection), 차집합(Difference)은 정말 많이 사용되는 것 같다. 특히 알고리즘을 풀 때 단골 문제가 아닐까 싶다. 실무에서 작업하는 도중 갑자기 차집합의 대한 문제가 있어 Stackoverflow에 아주 좋은 설명이 있어서 정리하려고 한다. 먼저 두 배열의 대한 제일 간단한 비교는 JSON.stringify를 통해 문자열로 변경해 준 뒤 비교하는 방법이 있다. 아마 이게 제일 간단할 것 같다. 교집합과 차집합 같은 경우엔 Array의 filter와 includes prototype Method로 간단하게 비교할 수 있다. 교집합(Intersection) arr2..