일상지식 더하기

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] } 배열 내, 중복제..

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}]위..

list 내 object 형태로 된 데이터의 중복을 제거하기 위해 lodash를 사용해보자. 테스트 환경npm,  react <span style="font-f..

들어가기 전에...사이트 분석을 하면서 돔에 걸려 있는 이벤트를 쉽게 찾기 위한 방법이 뭐가 있을까? 예전에는 웹사이트 하면 php, jsp, ...를 많이 생각했었는데, 요즘에는 react, vue, angular, ... 등등 여러 언어로 개발을 하고 있다. jsp, jquery로 되어 있는 웹에서 이벤트 찾을 때는$._data(element, 'events');위와 같이 찾았는데, 요즘에는 확장프로그램도 충분히 좋아진 건지 이제 본 건지... 개발자 도구를 좀 눌러보니 아니 이벤트 리스너(event listeners)가 있네?? 사용해보자예를 들어, 11번가에서 상품상세 화면에 "쿠폰보기"가 있다. 한번 개발자도구로 까보자.2개의 이벤트가 걸려 있는 걸 확인할 수 있다. 아! 여기서 디폴트로 상위가..

문제 프로젝트 history.back 문제를 해결하면서 history.replaceState를 사용하였다. document.referrer를 이용하여 history.back 했을 때 이전 페이지를 불러올 수 있도록 처리하는데, 해당 처리하는 화면에서 스크롤을 내려서 다시 현재 화면으로 오게 되면 스크롤이 내려가서 이전 페이지를 불러오는 현상이 생겼다. ex) A -> B,history.replaceState(null,null,document.referrer) -> C, history.back() -> A 스크롤 중간 해결 document.body.scrollIntoView(true); 해당 스크립트를 화면 이동하기 전에 스크롤을 최상단으로 이동시킨 다음 이전 페이지로 돌아왔을 때 스크롤이 내려가 있던 문..