이번에 사업을 하면서 고객이 요청을 하여 배열을 정리할 일이 생겼다. 근데 며칠전 선임이 sort함수 쓴 게 기억이 나서 갖다 써서 헛수고 하지 않고 해결한 김에 정리해본다. sort함수 sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. - 출처 : MDN 기본구문 arr.sort([compareFunction]) 예제 1. 오름차순 정렬 //샘플배열 var numbers = [4, 2, 5, 1, 3]; //샘플코드 numbers.sort(function(a, b) { return a - b; }); 2_1. 개체 속성 ( 정수값으로 정렬 ) //샘플배열 va..

핵심 1. 클래스명 추가 html요소.classList.add('추가할 클래스명'); 2. 클래스명 삭제 html요소.classList.remove('제거할 클래스명'); 3. 클래스명 변경 html요소.className = [변경할 클래스명]; // 기존 클래스명은 사라지니 주의! 4. 클래스명 확인 html요소.classList.contains([존재하는지 확인 할 클래스명]); // 반환값은 boolen 연습 보통 클래스명을 통해 css로 스타일을 주는 일이 많은데.. 버튼을 클릭했을 때 색상을 바꾸거나 폰트 굵기를 두껍게 하거나 하는 경우가 대표적이다. 제이쿼리의 .css함수나 event.target으로 스타일을 줘도 상관은 없지만 ( 링크 참조 ) 보통 스타일은 css파일에 정의해놓고 각 id나..

HTML에 모듈을 import하여 해당 HTML에서 Vue에서 인스턴스나, 컴포넌트에서 사용하듯 접근하여 사용하고 싶어 구글링을 하다가 방법을 찾아서 정리한다. import한 모듈 ( 여기서는 common )을 window에 module이라는 객체를 추가하여 넣어준다. window.module = common { alert(makKind); } } mapFunc = new mapFunc(); export var mapFunc = mapFunc; common.js // basisMap.js, mapFunc import import {basicMap} from './components/basisMap.js'; import {mapFunc} from './components/mapFunc.js'; export..

DOM이 랜더링 되면 바로 해야 할 작업 ( 변수 생성, 함수 호출 ... )이 있을 때 자주 사용하는 녀석인데 제이쿼리 : Ready 순수자바스크립트 : DOMContentLoaded 둘의 차이점은 아래와 같다. 1. Ready가 DOMContentLoaded보다 먼저 실행된다. 2. Ready는 여러번 실행되지만, DOMContentLoaded는 단 한번만 실행된다. 필요한 녀석을 골라쓰자. 아래 샘플 코드를 적어놓음 ( 근데 Ready는 사용을 피하는 게 좋다고 한다.. ) JQuery버전 $(document).ready(function(){ // 실행할 기능을 정의해주세요. }); 순수 javascript 버전 document.addEventListener("DOMContentLoaded", fu..

javascript에서 객체를 생성하는 3가지 방법에 대해서 정리해보려 한다. 1. Object 생성자 함수 사용 2. 객체 리터널 방식 사용 3. 생성자 함수 사용 이렇게 3가지 방법이 있는데, 내가 객체를 생성할 때 가장 많이 쓰는 방식은 객체 리터럴 방식이다. 각 장단점이 있겠지만, 가장 좋은 방식은 객체 리터널 방식이지 않을까 싶다. 우선 직관적인 게 첫번째 이유, 그리고 객체를 생성함과 동시에 프로퍼티를 할당하기 때문에 속도가 빠르다는 게 두번째 이유이다. 그럼 각 방식에 대해서 자세히 알아보자. 1.Object 생성자 함수 사용 //비어있는 객체 생성 var student = new Object(); //student 객체의 프로퍼티를 할당 student.name = 'michelle' stu..

코드만 필요한 사람은 아래 코드를 갖다가 쓰도록 하자. 브라우저의 종류 및 버전 확인 위의 코드 실행결과는 아래와 같다.. ( 크롬이랑 엣지밖에 설치되어 있지 않아, 2개로만 테스트 해봄.. ) 해당 코드를 사용하려는 사람은 가져다 쓰되, 반드시 설정에서 실제 버전과 맞는 지 확인 하길 바람! 크롬 엣지