너와 나의 프로그래밍

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 } ]; ✌️ 객..

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

개발에 빠질 수 없는 Toggle 기능은 기본적으로 state을 true/false로 변경하면서 show, hide를 하는 것이 일반적이지만 보고 싶은 글만 보거나 대댓글 쓰기 기능을 구현할 때는 부분 Toggle을 사용할 때가 많다. 일반적인 show, hide는 구현방법이 쉽지만 부분적인 Toggle 같은 경우에는 어떻게 하면 좋을 지 공유하려고 한다. stackoverflow에 아주 좋은 예시가 있어 이 예시로 설명! const { useState, Fragment } = React; const SearchResults = props => { const [shownComments, setShownComments] = useState({}); const toggleComment = id => { se..

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

React.js는 프론트엔드 기술의 대표적인 자바스크립트 라이브러리다. 전형적인 SPA(Single Page Application) 방식이며 CSR(Client Side Rendering)으로 동작한다. React.js가 나오고 나서부터 국내의 최신 프로젝트들은 React.js를 기반으로 하는 프로젝트들이 너무나도 많고 실제 React.js를 쓰고 있는 기업들도 굉장히 많다. 과거에 HTML, CSS, Javascript(jQuery)를 사용하던 옛날시대에서 이제는 React.js라는 최고의 자바스크립트 라이브러리로 성능은 물론 UI/UX에서도 많은 변화를 일으킬 정도로 정말 대단한 라이브러리다. 하지만, 이 마저도 만족스럽지 못했던 것이 바로 SPA 단점에서 부터 시작되었다. SPA 방식은 첫 사이트에..