이모저모 일상들

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..

체크박스를 선택할 때 체크박스 데이터를  출력하는 법See the Pen chekcboxoutput_vanila by sodium casein (@xyyhsawg-the-selector) on CodePen.

설명할 것이 딱히 없는 내용이라 불필요한 글은 쓰지 않겠습니다.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"..

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() ); //..

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..

이전 게시물에 이어서 진행하겠습니다. [React] react 프로젝트 생성하기 React는? Facebook에서 만든 자바스크립트 라이브러리. 웹앱을 만들기 위해서 사용하며 페이지를 다시 로드하지 않고 데이터를 변경할 수 있다. 국내에선 대부분 React 혹은 Spring 안쓰면 큰일나는 줄 jdk0.tistory.com 프로젝트를 만들었다면 app.js에서 헤더부분을 지워줍니다. function App() { return ( /* 이 부분 다 지우기 Edit src/App.js and save to reload. Learn React */ ); } 사전에 설치해야 할 라이브러리 (npm start하는것 처럼 vs 터미널에서 실행하면 됩니다.) //부트스트랩 설치 npm install react-boo..

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