본문 바로가기

JavaScript19

고차원 배열 1차원으로 변경 (spread operator) 개요: concat()을 쓰다가 자주안쓰면 자꾸 까먹어서 다른 더 쉬운방법 적고싶었음 spread operator 로 구현의 장점: 쓰기편함. 동작은 같은데 작성할 때 시간이 빨라짐 spread operator 로 구현의 단점: 나 한정으로 헷갈릴 수 있음. 예시 // 예시 const arr = [[1,2], [3,4], [5,6]]; // acc = 누적값, cur = 현재값 const result = arr.reduce((acc, cur) => { return [...acc, ...cur]; }) // [1,2,3,4,5,6] console.log(result); // 다른 예시 (배열 합치기) let arr1 = [1]; let arr2 = [2,3,4]; arr1 = [...arr1, ...arr.. 2024. 4. 18.
promise 를 이용한 함수 병렬처리 개요: 회사 어플을 이용하는 20000명 고객을 모든 수술에 대하여(7000개) 계산한 후, 보험금 데이터를 저장하려 함. 그러나, 1명당 1개의 수술에 대해 보험 데이터 계산하고 가져오는데, 0.1 초가 걸림 (실제 데이터를 가져오는데엔 0.01초 정도 걸릴텐데 렌더링 + 로그 확인까지 하면 0.1초 정도 소요되는거 같음). 그말은 즉슨, 비동기적으로 전처리를 하지 않는 이상, 시간이 많이 소요가 될 수밖에 없는 상황이옴... (대략 계산해보니, 20000명 * 7000개의 수술 * 0.1초 = 162일 이상) 162일 동안 함수를 돌릴수도 없고, 최대한 빠른시간안에 처리가 될 비동기와 메모리 오류를 내지 않을 배치 작업이 필요함. 그렇다면, 한명의 고객을 7000개 수술에 한번에 보험금을 계산한다면?.. 2024. 4. 15.
computed property 개요 반복문을 돌며, 회사이름마다 맵형식으로 데이터를 씌운 뒤, 배열에 넣어야 하는 상황이 생겼다. 그런데 object의 key값을 변수로 넣어지지 않아 이를 해결하고자 구글링 해서 얻은 지식. computed property - computed property는 ES6부터 사용되었으며, 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티 명을 할당할 수 있게 해준다. - computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다! 예시 selectableCompanies.forEach(company => { const companyName = company.companyName; const companyObject = { compan.. 2024. 1. 25.
이벤트 흐름 제어 (버블링과 캡처링) 개요 ionic, cordova 를 이용하여, 하이브리드 앱을 제작 중, android(겔럭시 스마트폰) 기기의 뒤로가기 버튼을 제어 할 상황이 생겼다. 이를 ionic에서 지원하는 backbutton addEventListener를 이용하여 제어하였지만, 설계와 다르게 함수가 조금 더 이르게 동작하는 현상을 발견했다. 1. 캡쳐링: 이벤트가 최상위 노드에서 시작하여 목표 요소까지 이동함 이벤트 핸들러가 루트 노드에서 시작하여 목표 요소에 이르기까지 순차적으로 호출됨. 2. 버블링: 이벤트가 목표 요소에서 시작하여 최상위 노드까지 이동함. 이벤트 핸들러가 목표 요소에서 시작하여 루트 노드에 이르기까지 역순으로 호출됨. 위의 말로만 봐선 잘 이해가 안될수 있다. 아래코드와 함께 보면, 예시코드 privat.. 2024. 1. 17.
웹에서 안드로이드 운영체제 뒤로가기 버튼 제어 드디어 해결했습니다.. ㅠㅠ 말 그대로 웹에서 안드로이드 운영체제 기반의 기기에만 있는 뒤로가기 버튼을 제어했습니다. 대충 설명 하자면, 웹에서 안드로이드 운영체제 뒤로가기 버튼을 막는건 안됩니다. 원래는.. 그래서 구글링과 여러 사이트를 찾으면서 고안한 결과, 웹 뒤로가기 버튼을 감지하고 그걸 제어하는 거죠. 여러 방법들을 이용해 봤습니다. 1. 데코레이터를 이용(@HostListener('popstate')) 2. window.onpopstate 3. window.addListener 각 자 프로젝트마다 적용되는 게 다르겠지만, 저는 window.addListener를 이용했습니다. 1. 우선 함수를 선언합니다. // angular.js 를 이용해서 작업했기 때문에, angular 식으로 쓸게요. /.. 2023. 9. 13.
JavaScript는 값이 아닌 참조로 개체를 비교하므로 이 조건은 항상 'false'을(를) 반환합니다. 오랜만에 글을 쓰네요. 일을 시작하니 글쓸 시간이 많이 없어서 오랜만에 들어왔는데, 다른 분들은 다들 열심히 글도 작성하시고 열심히 하시는것 같아서 자극받고 글하나 작성할게요. 위 제목으로 들어간 내용은, 배열을 비교문을 이용해 비교하려니 나왔던 오류이다. 이후 찾아보니, '배열은 객체의 일종이며, 참조로 저장되므로 배열을 참조 비교하는 것은 요소를 비교하는것과 다르다.' 즉, === 나 ==를 사용하여 배열을 비교하면 배열의 내용이 동일하더라도 항상 false를 반환하게 된다. 예시 코드와 함게 보자면 // 무조건 false가 나는 구문 // ts에선 다행히도, 값을 보여주지 않고 false만 일어나는 오류라고 에러를 내준다. // js 라면 계속 달라용 만 출력될것임 companys = ['KB라이프.. 2023. 8. 29.