너와 나의 프로그래밍

알고리즘 문제를 풀 때나 현업 프로젝트에서도 정렬은 거의 필연적으로 만나게 된다. 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..

실무에서 사용하는 Next.js의 Version이 9.x.x 대의 Old Version이라 이번에 큰맘(?)을 먹고 Next.js 12 Verison으로 Upgrade를 시켜주기로 결심했다. 사실 기존 프로젝트의 Package들의 Version을 올리면 발생하는 각종 다양한 문제들이 많아 굉장히 고심을했는데 역시나 많은 문제가 발생했고 그러면서 프로젝트에서 사용하고 있는 Typescript의 Type들의 문제, 각종 오픈소스 라이브러리들의 문제등 여러가지 문제들은 해결했다만 JSX관련 'Component' cannot be used as a JSX component 문제가 발생했고, 이 문제를 도저히 해결하기가 너무 힘들었다. 'Component' cannot be used as a JSX compone..

Redirects를 공부하면서 아주아주 괜찮은 Rewrite의 소개를 해보려고 한다 물론 이번에도 노마드코더 니콜라스님의 강의를 참고하면서....(https://nomadcoders.co/nextjs-fundamentals/lobby) Watch Now – 노마드 코더 Nomad Coders nomadcoders.co How to Rewrites in Next.js ?🤔 Redircts는 특정 URL을 직접 입력하면 Redirect로 다른 URL로 이동시키는 기능이라면 Rewrites는 특정 URL을 직접 입력하면 다른 URL로 이동을 하지만 사용자에게는 마치 이동이 되지 않은 것 처럼 보여준다. 특정 URL을 Masking하면서 다른 URL을 보여주는 것이다. 이게 정말 좋았던 것이 외부 API 통신을..

노마드코더 니콜라스님의 유튜브를 보던 중 무료로 강좌가 있다고 해서 Next.js 개발을 하면서 많은 도움이 되지 않을까 싶어 무작정 니콜라스님의 Next.js 강의를 보았다.(https://nomadcoders.co/nextjs-fundamentals/lobby) Watch Now – 노마드 코더 Nomad Coders nomadcoders.co 그 중 Redirect and Rewrite라는 흥미진진한 강의를 보면서 이런게 있는지 몰랐구나! 라는 신세계를 경험했다. Next.js로 개발을 하면서 왠만한 사용법은 거의 다 익혔다고 생각했다만, 역시 배울게 아직도 많구나... 라는 자기 반성도 하게 되었다.😂😂😂 How to Redirects in Next.js ? 지금까지 개발을 할 때는 Redirec..

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