오늘 동기랑 이야기를 하는데, javascript의 객체와 배열에 대한 이야기가 나왔다. 이러한 상황에서 객체를 쓰는게 좋냐, 배열을 쓰는게 좋냐 라는 이야기였는데 뭔가 개발을 하면서 느낌은 오는데, 막상 입으로 하려니 바로바로 안나오는 상황이.. 그래서 한번 정리해본다. 배열(Array) vs 객체(Object) 어떤 걸 사용하는 게 좋을까? 우선 배열과 객체의 차이점에 대해 간단히만 알아보자. ( 진짜 간단히만.. ) 배열(Array)와 객체(Object)의 차이 우선 배열은 key와 value로 이루어지지 않은 나열 된 값을 의미한다. 물론 key와 value를 이룰수는 있지만, 좋은 방법은 아니기 때문에, 특정한 상황을 빼면 사용되지 않는다.. // 배열 arr을 선언 var arr = [1,2,..

결론만 말하자면 [파일명].js : 소스를 분석할 수 있도록 공백을 포함하는 개발자용 파일 [파일명].min.js : 대역폭을 보존하기 위해 기존 .js를 압축한 버전 => 공백 및 주석을 제거 (개발하기 힘듦..) 실제 운영환경에서는 min.js를 사용하는 것이 좋다. 샘플 라이브러리 비교 git에서 제공하는 sortable.js와 sortable.min.js를 비교해보자. 제이쿼리가 가장 많겠지만.. sortable.js sortable.min.js 그냥 이번에 쓸 일이 있어 git에서 sortable.js를 가져오는데 sortable.js와 sortable.min.js 2개가 보이길래 정리해보았다..

같이 일하던 선임이 Vanilla 스크립트를 가지고 XML을 JSON으로 변환하는 것을 보고 신기해서 나도 해보는 글.. 보통은 이런 작업은 라이브러리를 활용할 수 있으면 그게 베스트이다. 라이브러리를 사용할 수 있는 환경이라면 라이브러리를 사용하도록 하자. 오늘은 1. Vanilla 스크립트를 통해 XML을 JSON으로 변환하는 방법 2. 라이브러리를 활용하여 XML을 JSON으로 변환하는 방법 2가지에 대해 알아보도록 하자. 우선 XML데이터는 공공데이터포털 API를 통해 가져오도록 하겠다. 그리고 테스트 해 볼 사람은 공공데이터포털에서 인증키를 받아 아래 코드를 그대로 붙여놓고, 인증키값만 바꿔주도록 하자. 난 그냥 HTML에서 한거라, 따로 프록시서버를 태웠으니 그것도 생각하고 실행해보도록 하자...

이번에 사업을 하면서 고객이 요청을 하여 배열을 정리할 일이 생겼다. 근데 며칠전 선임이 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나..

옛날 신입이 시절에 정리해야지 라고 생각하고 임시저장 해놨던 걸 이제서야 정리해본다. 그때 구현했던 게, 클릭한 텍스트에 fontWeight를 두껍게 주는 기능이었는데.. 해당 코드는 현재 VueJs의 클래스바인딩으로 변경되었으니, 올려도 되겠지 싶어 그냥 올린다. 1년이 넘어 기억은 안나지만, 대충 아래와 같은 기능을 구현하려고 짠 코드 같음.. 1. 제이쿼리 선택자를 활용한 CSS 변경 2. Event.target을 활용한 Style 변경 그래서 오늘은 2가지에 대해 알아보자. 그럼 바로 시작해보자. testFile.html 클릭해보세요 이 html을 가지고 연습해보자. 1. 제이쿼리 선택자를 활용한 CSS 변경 기본문법 $([클래스명 or 아이디명]).css([propertyName], [value..