JavaScript (46) 썸네일형 리스트형 [JavaScript] concat() 함수 사용법 / 변이 (mutation) 함수 - 사용 기술 - React(class형) / mobx - 배경 설명 - select 요소가 있다. select 를 클릭하면 option 목록이 뜬다. option 목록 중 하나를 클릭하면 select 값이 바뀐다. option 목록은 정해져 있지 않다. 서버에서 요청해서 db로부터 뽑아온다. 그 db 값들을 가지고 option 목록을 만든다. option list 에서도 고정된 값이 있기는 하다. 가장 첫 번째 값은 '전체'다. 조회하는 조건을 select 하는 건데, 조회 조건에 '전체'도 있다. 따라서 option list 를 아래와 같은 순서로 만들었다. 우선 빈 배열을 하나 만든다. 그 배열 안에 '전체' 요소부터 먼저 넣는다. 그 다음에 서버로부터 받은 리스트를 합친다. 합칠 때는 concat.. [JavaScript] 배열에서 중복되는 요소 제거하여 합치기 - 조건 설명 - 두 배열이 있다. 그 안에 있는 요소들은 서로 겹치는 요소도 있고 아닌 요소도 있다. 동시에 두 배열은 null 이거나 비어 있을 수도 있고 아닐 수도 있다. 이 두 배열에 들어 있는 모든 요소들을 합해서 하나의 배열로 통합하려고 한다. 단, 모든 요소는 한 번만 들어가야 한다. 중복되는 요소가 있어서는 안 된다. 즉, 두 배열을 통합해서 새로운 배열을 만들고 싶다. - 구상 - 처음에는 좀 어렵게 생각했다. 일단 두 배열을 합친다. 합친 배열 안에 있는 모든 요소들로부터 id 나 seq 처럼 unique 한 값만 추출해서 새로운 배열을 만든다. 이렇게 만든 id list 안에서 중복을 제거한다. 그러면 모든 요소들의 id 가 한 번씩만 들어가 있는 목록이 만들어진다. .. [JavaScript]두 배열 요소 합쳐서 return 하기 / concat 함수 null 체크 - Cannot read properties of undefined 에러가 나는 경우 - 배열 a와 b가 있다. getTotalMember(a, b) { // do somethig } 배열 a와 배열 b는 둘 다 null일지 아닐지 모른다. 근데 두 배열이 가지는 요소들을 합쳐서 return 해줘야 하는 상황이다. 당장 떠오르는 방법은 배열 a나 b에 concat() 함수를 붙여주는 방법이다. a.concat(b); b.concat(a); 그런데 이렇게 하면 null 에러가 뜰지도 모른다. > Uncaught TypeError: Cannot read properties of undefined (reading 'concat') 왜냐하면 배열 a와 배열 b는 양쪽 모두 null로 넘어올 수 있는 상황이기 때.. JavaScript ES6 문법 get/set 키워드 무한 루프 해결법 getter/setter 함수 사용법 - JavaScript 안에서 getter/setter 함수 - let user = { name: "Tom", lastName: "Holland", get fullName() { return `${this.name} {this.lastName}`; }, set name(data) { this.name = data; } } 위와 같은 user 객체가 있다. user 객체가 가지는 name 속성값을 'Hello'로 바꾸고 싶으면 어떻게 해야 할까? 간단하게 생각하자면 아래와 같은 명령어를 떠올릴 것이다. user.name = 'Hello'; 그러나 이 객체에 위와 같은 명령어를 실행하면 에러가 난다. > Uncaught RangeError: Maximum call stack size exceeded 명령어를.. [JavaScript] 걸려 있는 클릭 이벤트 핸들러 제거하기 remove Event Listener - 걸려 있는 이벤트 핸들러 제거하기 - document.querySelector('#myBtn').removeEventListener('click', getEventListeners( document.querySelector('#myBtn') ).click[0].listener ); - 대략적인 과정 - 먼저 이벤트가 걸려 있는 요소에 접근한다. const target = document.querySelector('#myBtn'); 그리고 요소로부터 이벤트 제거 함수를 꺼내 실행한다. target.removeEventListener(); 여기서 removeEventListener() 함수에 필수로 넣어줘야 하는 전달인자는 두 가지다. 하나는 이벤트 종류이고, 다른 하나는 이벤트 리스너 함수 자체다. 세.. [JavaScript] checkbox 체크박스 '전체' 버튼 선택/해제 클릭 이벤트 함수 //HTML varStatus="g"> - 만들고 싶은 기능 설명 - 화면에 버튼을 만드는 로직은 위와 같이 해두었다. contentTypeList가 넘어오고, 거기서 요소를 하나씩 꺼내서 codeId와 codeName 으로 버튼을 만든다. 만들고 싶은 기능은 이렇다. '전체' 버튼이 먼저 있고, 나머지 버튼들도 있다. '전체' 버튼을 클릭하면 나머지 버튼들도 그 값을 따라서 함께 체크되거나 해제된다. 나머지 버튼을 클릭해서 모두 선택된 상태가 되면 자동으로 '전체' 버튼도 선택된다. 나머지 버튼을 클릭해서 모두 선택된 상태가 아니게 되면 자동으로 '전체' 버튼도 해제된다. 위 기능을 구현하는 이벤트 로직을 아래와 같이 만들어 보았다. // JavaScript var checkContentHandler .. HTML 요소의 'data-' 속성 ele.dataset.? 활용하기 - HTML 요소에 속성 넣어 주는 법과 접근하는 법 - 교육 사과 HTML 요소들은 여러 가지 속성 값을 갖는다. id="--" / class="--" / style="--" / value="--" 이렇게 엘리먼트가 들고 있는 속성들에 접근할 때는 아래처럼 쓴다. const ele = document.querySelector('#target'); ele.id; // 엘리먼트의 ID 값 ele.tagName; // 엘리먼트의 tag 값 ele.style; // 엘리먼트의 style 값 ..... - HTML 요소에 'data-' 속성 넣어 주는 법과 접근하는 법 - 그중에서도 'data-' 로 시작하는 속성도 종종 보인다. data-color="red" / data-code="0016" / data-po.. 페이징 인덱스 만들기 / 페이지네이션 만드는 법 var getPagingHtml = function(param) { // 페이징 인덱스 클릭했을 때 실행할 함수 이름 var callFunc = param.callFunc; // 페이징을 넣을 html 상위 요소의 id var paginationWrapperId = param.paginationWrapperId; // 한 페이지에 게시물을 몇 개 보여줄지 var itemNumPerPage = param.itemNumPerPage; // 총 게시물이 몇 개인지 var totalItemNum = param.totalItemNum; // 페이징 인덱스를 한 번에 몇 개씩 보여줄지 var pagingSize = param.pagingSizeNum; // 현재 페이지 var currentPage = param.c.. 이전 1 2 3 4 5 6 다음
