이모저모 일상들

Set이란? Set은 JavaScript에서 중복 없는 값들의 집합을 저장할 수 있는 구조입니다.배열과 비슷하지만, 다음과 같은 차이점이 있습니다.1. 중복된 값을 자동으로 제거 2. 삽입된 순서를 유지 3. 빠른 검색 (has) 가능 const numbers = [1, 2, 2, 3, 4, 4];const uniqueNumbers = new Set(numbers);console.log(uniqueNumbers); // Set(4) {1, 2, 3, 4} 관련 메서드 add(value)값 추가delete(value)값 삭제has(value)포함 여부 확인clear()모두 삭제size원소 개수 반환 예제const tags = new Set();tags.add('JavaScript');tags.add('Ja..

설명할 것이 딱히 없는 내용이라 불필요한 글은 쓰지 않겠습니다.function proc(){ const fields = [ { id: "title", message: "제목을 입력해주세요." }, { id: "writer", message: "작성자를 입력해주세요." }, { id: "writer_email", message: "이메일을 입력해주세요." }, { id: "content", message: "내용을 입력해주세요." } ]; for (const field of fields) { const el = document.querySelector(`#${field.id}`); if ..

개발을 하다보면 HTML테이블 데이터를 엑셀로 내보내야 하는 일이 종종 있을 수 있습니다. 엑셀 추출은 많은 라이브러리가 존재하지만, 라이브러리 없이 HTML 데이터 표를 엑셀로 만들 수 있는 방법이 있습니다.(핑프들, 귀찮으신분들 강추) 아래는 기본 예제입니다.See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen. 위의 예제는 스타일 없이 단순히 데이터만 추출합니다.아래 소스를 통해 활용할 수 있습니다. See the Pen 라이브러리X 활용 by sodium casein (@xyyhsawg-the-selector) on CodePen.코드 설명 1. document.getElementById("example-table"..

소스 See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen.

join(연결 문자) 배열 객체 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환 let arr = ['김씨','정씨','이씨']; console.log( arr.join('') ); // 김씨정씨이씨 console.log( arr.join(',') ); // 김씨,정씨,이씨 console.log( arr.join('-') ); // 김씨-정씨-이씨 reverse() 배열 객체의 데이터 순서를 거꾸로 바꿈 let arr = ['김씨','정씨','이씨']; console.log( arr.reverse() ); //['이씨', '정씨', '김씨'] sort() 배열 객체의 데이터를 오름차순으로 정렬 let arr = ['김씨','정씨','이씨']; console.log( arr.sort() ); //..

속성 탐색 연산자 속성 탐색 연산자는 선택한 요소를 기준으로 일치하는 요소를 선택하는 선택자. 종류 Jquery Vanilla 설명 (요소[속성]) $("a[href]") document.querySelector ("a[href]") a태그의 href값이 있는 요소를 가져옴 (요소[속성=값]) $("a[title='element']") document.querySelector ("a[title='element']") a태그의 title속성 값이 element인 요소를 가져옴 (요소[속성^=값]) $("a[href^='http://']") document.querySelector ("a[href^='http://']") a태그의 href속성 값이 http://로 시작하는 요소를 가져옴 (요소[속성$=값])..

1. 템플릿 리터럴(Template literals) ES6버전부터 도입된 템플릿 문자열 ES6이전에는 줄바꿈을 이용할 때는 \n같은 줄바꿈을 넣어줘야했고, 여러 변수들을 연결할 때는 +를 통해서 하나하나 연결해줘야 했다. 템플릿 리터럴을 사용하지 않은 예시 let tag= ""; tag += "" tag += "home" tag += "cart" tag += "" let name="사과"; let text = "안녕하세요\n "+name+"입니다."; /* 안녕하세요 사과입니다. */ 템플릿 리터럴을 사용한 예시 백틱(`)문자를 사용 let tag = ` home cart `; let name="사과" let text = ` 안녕하세요 ${name}입니다. ` /* 안녕하세요 사과입니다. */ 2. N..

구글에 자바스크립트로 날짜 구하기를 검색해보면 new date 문법으로 날짜를 구하는게 많다. new date형식의 문법의 대략적인 문제점은 다음과 같다고 생각한다. 요즘은 UTC형식으로 날짜를 출력하는데 new date는 현재 거의 사용하지 않는 RFC형식으로 현재 날짜를 출력한다. 그리고 만약 현재 날짜를 출력하고 싶으면 쓸데없이 많은 함수들을 가져와서 써야한다. See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen. 현재 날짜를 가져오기 위해서 얼마나 많은 함수를 써야하며 또한 new date의 자바스크립트의 월은 0~11기준으로 되어 있기 때문에 5월을 뽑으려면 getMonth()함수의 +1을 해줘야 현재의 올바른 날짜..

설명은 필요 없고 소스만 바로 붙여서 나오는게 좋겠다면 소스 아래 그대로 복사 붙이기 해서 카카오 API 키값만 기재하면 주소 출력이 됩니다. 주의사항 카카오 API 키값 필요. HTTPS환경에서만 실행 됨. 그래도 안 나온다면 1. 사이트 정보 보기 2. 위치 권한을 승인 결과물 (참고) 정확한 위치는 아니지만 대략적인 위치는 비슷하게 나오거나 조금 떨어질 수 있습니다. navigator.geolocation.getCurrentPosition(success, error, [options]) success, error는 콜백함수입니다. 저는 함수 선언하기 귀찮아서 그냥 그대로 함수 만들어서 넣었습니다. 자세한 문서는 아래에서 참고해주세요. Geolocation.getCurrentPosition() - W..