본문 바로가기
반응형

All List226

초간단 lodash 사용하여 list 배열 정렬하기(feat. react) #Lodash Document Lodash Documentation_(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primitilodash.com 지난 번에 lodash를 사용하여 배열의 중복을 제거하는 방법을 알아봤는데, 이번에는 lodash를 이용하여 초간단 배열 정렬하는 방법에 대해서 알아볼까 한다. 지난 번.. 2024. 4. 29.
list 배열을 reduce로 묶기 (feat. javascript, js) api에서 처음부터 데이터를 묶어서 전달해주면 좋겠지만,api에서 하는 일이 많거나 해당 데이터를 난잡하지 않고, 간결하게 등등 여러가지 이유로 화면에서 데이터를 묶어서 처리를 해야 할 때,reduce를 사용하여 묶는 방법에 대해서 알아보겠다. 예제const list = [{word: '가', no: 1}, {word: '나', no: 3}, {word: '나', no: 2}]const rtnList = list.reduce((acc, val) => { const { word, no } = val; if (!acc[word]) acc[word] = []; acc[word].push(no); return acc;}, {});// { 가: [1], 나: [3, 2] } 배열 내, 중복제.. 2024. 4. 26.
키보드 한글 자음, 모음을 영문으로 변환하기 (feat. react) 간혹 영문자를 입력해야 하는 상황에서 한글로 되어 있어서 한글로 써진 매우 안타까운 상황이 발생하곤 한다.누가 옆에 있다면, "한글한글"을 외쳐본 적이 있다거나 외침을 받아본 적이 있을 것이다.그래서 준비해봤다.바로 치환할 수도 있겠지만, 한글을 입력해야 하는 상황도 있을 수 있으니 유틸로 한번 만들어봤다.모든 케이스를 적용하진 못했지만, 이렇게도 할 수 있다는 걸 보여주기 위해 작성해봤다.해당 예제는 react로 작성했지만, ref로 dom을 받아서 처리한 부분을 제외하곤 거부감이 없으리라 생각된다.    1 import { useRef } from 'react';    2     3 const ConvertUtils = () => {    4   const inputRef = useRef();.. 2024. 4. 25.
리스트 정렬하기(feat. js) JavaScript에서 배열을 정렬하는 방법은 Array.prototype.sort() 함수를 사용한다. 해당 함수는 배열의 요소를 정렬할 때, 기본적으로 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬한다. 보편적인 예제// test list const list = [ { data: '가', seq: 2 }, { data: '나', seq: 1 } ]; // 오름차순 정렬 list.sort((a, b) => a.seq - b.seq); // 결과: [{data: '나', seq: 1}, {data: '가',seq: 2}] // 내림차순 정렬 list.sort((a, b) => b.seq - a.seq); // 결과: [{data: '가', seq: 2}, {data: '나',seq: 1}]위.. 2024. 4. 24.
Object List를 lodash uniqBy로 간단하게 중복 제거하기 (feat. react) list 내 object 형태로 된 데이터의 중복을 제거하기 위해 lodash를 사용해보자. 테스트 환경npm,  react <span style="font-f.. 2024. 4. 2.
유치원생 강추템 시크릿 캐비닛 언박싱(?) 당함(feat. 유치원생) 언박싱부터 하려고 했으나, 택배 개봉하자마자 언박싱이 순식간에 눈 앞에서 이루어지는 바람에 박스랑 일부 사진만 뽑아서 소개한다. 언박싱까지 하고 싶은 사람들은 아이들 없을 때 뜯기를... 오늘 소개할 장난감은 데코데코 시크릿 캐비닛! 딸아이가 유튜브로 캐비닛 장난감을 보고 타브랜드 제품을 사달라고 했는데, 검색을 해보니 비슷한 가격대에 다른 재미요소와 빠른 배송의 장점으로 딸아이에게 +요소로 주문을 하게 되었다. 박스 박스 안에 시크릿 박스 2개 A, B가 있다. A박스에는 쿠폰, 스티커, 노트들이 있고, B박스에는 바스켓, 노트 꽂이, 머리빗 등이 있다. 이렇게 뭔가 아이들의 궁금증을 자극하는 요소들로 아이들은 흥분의 도가니... 박스 뜯어서 일사분란하게 앙증맞은 손으로 스티커를 붙이면서 꾸미기를 이미.. 2024. 4. 1.
기프티콘 스타벅스 교환권 사용 방법 (사이렌오더 in 스타벅스 앱) 스타벅스 기프티콘이 생겼다. 줄서서 주문하기보단 앱으로 주문하는 게 여러모로 편한 시대가 되었다. 그래서 준비했다. 스타벅스 앱으로 간편 기프티콘 사용방법! 준비스타벅스 앱, 기프티콘 앱 1. 기프티콘 앱에서 교환권을 다운받는다. 2. 스타벅스 앱에서 사이렌 오더로 주문 시, 교환권을 등록하여 사용한다.교환권을 등록하기 위해 주문 시, 쿠폰 및 할인 영역에서 "모바일 상품권"을 선택한다. 쿠폰이라고 생각해서 미리 등록하여 사용하고 싶은데, 주문 시에만 적용되어 사용하는 것 같아서 번거롭지만, 그래도 주문 줄 기다리면서 하는 것보단 더 낫다고 생각한다. 다음에 또 유용한 정보로 만나요~ 안녕~ 2024. 3. 14.
공기청정기 필터 수명 늘리기 팁 with 삼성전자 블루스카이 3100 집에 공기청정기를 1대 더 들였다. 돈이 남아돌지 않은 이상 공기청정기를 굳이 고가를 쓰지 않아도 된다는 1인이다. 옷방이 부엌과 붙어있어서 냄새에 취약하고, 대저택이 아닌 쪼매난 빌라에 사는 입장에서 5식구가 오손도손 모여 살기에 옷방은 옷으로 가득하여 외부와 단절되어 있어서 공기청정기가 필요했다. 그래서 하나 더 구입하게 되었다. 공기청정기 소개가 주목적이 아니지만, 또 온 김에 사진은 많이 찍어놔서 사진으로 소개를 대신하겠다. 언박싱은 이미(?) 되어 있어서 내부를 빠르게 훑어보겠다. 필터는 별도로 오지 않고, 안에 포장이 되어 껴져 있었다. 포장지를 뜯어서 다시 부착한다. 필터를 빼보면, 안에 팬과 연결된 공기구멍이 보인다. 필터는 숯 필터와 집진 필터가 합쳐져 있다. 숯 필터를 물로 세척 후, .. 2024. 3. 6.
쉐이크쉑(쉑쉑) 버거 할인 받기(feat. 페이코) 오랜만에 쉑쉑버거를 먹으러 왔다. 가격대가 있는 만큼 할인 정보를 찾아보니, 아니, 이런?! 할인을?! 그래서 소개해보자. 기존 사용자라면 편리하게 할인받을 수 있는 페이코 포인트 결제로 최대 5천원 할인받기! 할인 금액 보기결제 시, 5천원인 할인된 금액만 결제하면 된다. 주문한 메뉴 스모크쉑 싱글 10,6 프라이 4,6 치킨 바이트(6c) 5,9 쉐이크 6,5 * 2 할인받을 준비포인트 + 충전 PAYCO페이코 라이프 하세요www.payco.com1. 충전을 선택 2. 원하는 방식을 선택 하여 포인트를 충전한다. 오프라인 결제앱 하단 바에 결제를 클릭해서 여러 결제 수단 중, 포인트 카드 결제를 선택하여 결제를 하면, 제일 상단에 인증한 영수증과 같이 5천원을 할인받을 수 있다. 모두 할인받고, 기분.. 2024. 2. 19.
[속성공부] 페이지 로드 후, 읽을 script는 defer로! 주의사항까지 속성 정리! defer는? 웹 페이지의 스크립트 실행을 지연시키는 데 사용한다. 이를 통해 HTML 문서의 파싱이 진행되는 동안 스크립트가 실행되지 않고, 문서의 구성이 완료된 후에 스크립트가 실행되어 페이지 로딩 성능을 향상시키고, 스크립트의 실행이 다른 자원들에 미치는 영향을 최소화하는 데 도움이 된다. 사용 방법 defer 사용 유무 차이점 사용하지 않을 때, 스크립트가 문서 파싱 중에 다운로드되고 실행되기 때문에, 스크립트의 실행이 완료될 때까지 페이지의 로딩이 중단된다. 스크립트가 실행되는 동안에는 페이지에서 다른 동작이 차단될 수 있다. 사용하게 되면, 스크립트가 문서 파싱 중에 비동기적으로 다운로드되지만, 파싱이 완료된 후에 순서대로 실행된다. 페이지의 로딩이 중단되지 않으며, 스크립트가 실행되는 동안에.. 2024. 1. 17.
반응형