본문 바로가기

JavaScript16

[Chrome] 개발자 도구 - 로컬 스토리지 ● 웹 브라우저     - 사용자의 컴퓨터에 웹사이트 사용 정보들을 저장하고 필요할 때마다 그 정보들 조회          => 사용자 개인화 가능(= 사용자별로 저장 가능)           => 속도 및 사용자 경험 개선      - Ex) 자동 로그인 기능, 로그인 없이 장바구니 상품 유지 ● 로컬 스토리지     - Client Side Storage 방식 (= 사용자 측에 저장)          => 데이터 저장을 사용자 컴퓨터에 하겠다는 의미           => 내 컴퓨터 브라우저에만 한정적으로 적용      - 세션 스토리지에 저장된 데이터 : 페이지 닫을 때 사라짐            vs 로컬 스토리지에 저장된 데이터 : 새로고침 및 브라우저 종료 시에도 내 컴퓨터 동일 브라우저 내에.. 2024. 6. 8.
[Javascript] localStorage와 sessionStorage ● localStorage와 sessionStorage의 공통점 - 웹 브라우저에서 클라이언트 측 데이터를 저장하는 데 사용되는 웹 스토리지 메커니즘 ● localStorage와 sessionStorage의 차이점 localStorage sessionStorage 유지 기간 · 영구적으로 데이터 저장 · 브라우저를 닫아도 데이터 유지 · 세션 기간 동안 데이터 저장 · 브라우저 세션 유지 동안만 데이터 유지(닫으면 유지 끝) 액세스 · 동일한 도메인 내 모든 페이지에서 액세스 가능 · 세션 간 데이터 공유 불가 · 동일한 세션 내에서만 액세스 가능 저장 형식 · 브라우저의 로컬 파일 시스템에 데이터 저장 · JavaScript 객체 형식으로 데이터 저장 저장 용량 · 도메인당 5MB 제한 · 브라우저마다.. 2024. 4. 20.
[Javascript] video 태그 관련 명령어 1. 재생 / 일시정지 - 재생 : play() - 일시정지 : pause() 2. 소리 조절 (0.0 ~ 1.0) - 소리 크기 : volume 3. 현재 상태 확인 (초 단위, 숫자를 입력할 경우 해당값 적용) - 현재 재생 시간 : currentTime - 총 재생 시간 : duration 4. 재생 속도 조절 (default 1.0) - 재생 속도 : playbackRate 5. 이벤트 처리 - 비디오가 재생되었을 때 호출되는 이벤트 핸들러 : play - 비디오가 일시 정지되었을 때 호출되는 이벤트 핸들러 : pause Ex ) id가 myVideo인 video 태그의 영상 제어 /********************** 1. 재생 **********************/ // 1-1. 재생 .. 2024. 4. 18.
[Javascript] null 병합 연산자(Nullish Coalescing Operator, ??) ● ?? - null 병합 연산자(Nullish Coalescing Operator) - 피연산자 중 첫 번째가 null 또는 undefined일 때, 두 번째 피연산자로 대체 - a ?? b 는 (a != null && a != undefined) ? a : b 와 동일 2024. 1. 10.
[Javascript] 현재 페이지 URL 정보 가져오기 ● window.location - 현재 페이지의 URL을 나타내는 객체 ● 속성 종류 속성명 설명 href 전체 URL 문자열 protocol 마지막 ':'를 포함한 프로토콜 정보 host ':'과 포트번호를 포함한 URL의 호스트명 hostname ':'과 포트번호를 제외한 URL의 호스트명 port 포트 번호 pathname '/' 뒤 경로 search '?' 뒤 쿼리스트링 ● 예시 - https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=javascript 속성 사용방법 결과 href window.location.href 'https://search.naver.com/search.naver?where=.. 2023. 12. 12.
[Chrome] 개발자 도구 - 콘솔 사용 시 주의사항(let, const 선언) ● 크롬 개발자 도구 - 사용자와의 원활한 상호작용과 편리한 코드 테스트를 위해 표준 문법에서 벗어난 기능을 제공 => let과 const의 재선언이 가능 HTML 삽입 미리보기할 수 없는 소스 - 이유 : 콘솔창이 REPL 모드에서 예외로 처리하기 때문 1) 스크립트에서 const 재선언하는 경우 => 오류 발생 const a = 1; const a = 2; 2) 콘솔에서 const를 따로 따로 재선언하는 경우 => 오류 미발생 3) 콘솔에서 const를 한 번에 재선언하는 경우 => 오류 발생 4) 다른 키워드로 재선언 => 오류 발생 - Ex ) const로 선언한 변수를 let으로 재선언 참고 제주코딩스베이스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 콘솔 주의사항(let, const 선언) .. 2023. 12. 10.
[Javascript] jQuery TableDnD를 이용하여 테이블 순번 바꾸기 ● jQuery TableDnD(Table Drag and Drop) - HTML 테이블의 행을 Drag and Drop 하여 재정렬할 수 있게 하는 jQuery 플러그인 - jquery.tablednd.js 스크립트 추가 필요 ❗ 프론트단에서만 사용할 경우 "3-1. tableDnd 플러그인 적용 및 옵션 설정 "까지만 봐도 됨 ❗ DB 상에서 테이블 순번을 바꿔야 하는 경우 끝까지 확인 필요(아래 예제는 Spring 사용) ● 사용방법 1. 라이브러리 가져오기 - 다운로드 : https://github.com/isocra/TableDnD 소스 다운로드 후 TableDnd/js/jquery.tablednd.js 파일 사용 2. HTML 테이블 생성 - table 및 각 row 마다 id 필요 Row 1.. 2023. 11. 2.
[Javascript] Debounce와 Throttle의 차이 Debounce Throttle 공통점 - 과도한 이벤트 발생으로 인한 성능 저하 방지 예방하기 위해 이벤트를 제어(제한)하는 방법 - ex : input text에 키보드가 입력될 때 마다 DB 조회를 하게 된다면, 서버 부하를 야기할 수 있음 - 일정 시간 간격을 두고 이벤트 호출 - 별도의 스크립트 호출 없이, 순수 바닐라 스크립트로 구현 가능 차이점 - 동일 이벤트 발생 시, 가장 마지막 이벤트 실행 - ex : 1000ms 동안 동일 이벤트 발생 시, 입력이 끝날 때 가장 마지막 이벤트만 실행 - 마지막 이벤트에서 일정 시간동안 이벤트가 발생한다면, 또 일정 시간을 기다림 - 동일 이벤트 발생 시, 일정 시간 동안 한 번만 실행 - ex : 1000mx 동안 이벤트 실행을 막고, 한 번만 실행 .. 2023. 11. 1.
[Javascript] 전개 연산자(Spread Operator) ● 전개 연산자(Spread Operator) - JavaScript에서 데이터를 확장하거나 복사할 때 사용 - 주로 배열과 객체를 다룰 때 사용 - ES6 (ECMAScript 2015) 문법 - "[Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce)" 에서 소개된 문법 ● 배열에서의 전개 연산자 예시 1. 배열 병합 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] const arr3 = [7, 8, 9]; const mergedArray2 = [...arr1, ...arr2, ...ar.. 2023. 10. 28.
[Javascript] val()과 attr("value")의 차이 ● $("").val() - DOM 요소의 현재 입력된 값을 반환 - 사용자가 입력한 내용이나 JavaScript 코드를 통해 동적으로 변경된 값을 가져옴 - input, textarea, select와 같은 입력 요소의 값을 가져올 때 사용 ● $("").attr("value") - DOM 요소의 초기 속성(attribute) 값을 반환 - HTML 속성으로 정의된 초기 값을 가져옴 - 요소의 속성(attribute)를 가져올 때 사용 ! 일반적으로 입력 요소(input)의 초기값과 실제 입력값이 다를 수 있음 ! val()을 사용하여 실제 입력값을 가져오는 것이 일반적 ! 초기 속성값을 가져오고 싶을 때 attr("value") 사용 2023. 8. 24.
[Javascript] jQuery Datepicker 특정 날짜만 선택 가능/불가능 설정 ● jQuery UI Datepicker를 사용하여 Calendar 기능을 구현할 때 특정 날짜(들)만 선택 가능 또는 불가능하게 하는 방법 - beforeShowDay : 각 날짜마다 호출되면서 해당 날짜를 표시할지 여부를 결정하는데 사용 - 선택 가능 또는 불가능하게 할 날짜를 배열에 담아 차례대로 돌리면서 선택 가능하게 하려면 [false], 가능하게 하려면 [true]를 반환 * 참고 return true : true라는 boolean 값을 반환. true로 인식. return [true] : true라는 값을 포함하는 배열을 반환. 길이가 1인 배열의 첫번째 요소로 true가 포함되어 있는 상태. - 방법은 2가지(객체를 사용하여 초기화 하는 방법 / option 메소드를 사용하여 옵션을 업데이.. 2023. 8. 22.
[Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce) 1. concat() 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = arr1.concat(arr2); console.log(combined); // [1, 2, 3, 4, 5, 6] 2. Spread 연산자 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] 3. push() 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; for (let i = 0; i < arr2.length; i++) { arr1.pu.. 2023. 7. 17.
[Javascript] 두 배열의 겹치는 값을 제외한 배열 추출하기 1. filter 메소드를 사용하여 배열 a의 각 요소 검사 2. includes 메소드를 사용하여 b에 현재 요소가 포함되어 있는지 확인 3. 포함되지 않은 요소만을 남기기 위해 ! 연산자 사용 const a = [1, 2, 3, 4, 5]; const b = [3, 4, 6]; // 배열 a에서 배열 b와 겹치는 값들을 제거한 배열 c 생성 const c = a.filter(item => !b.includes(item)); console.log(c); // [1, 2, 5] 2023. 7. 6.
[Javascript] context path 가져오는 방법 1. window.location.pathname 이용하는 방법 (비추) // 1. split 사용하는 방법 const pathArray = window.location.pathname.split('/'); const contextPath = pathArray[1]; console.log(contextPath); // 2. substring 사용하는 방법 const contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2)); console.log(contextPath); => contextPath가 '/' 일 경우에 원하는 결과를 얻지 못할 수 있다. 따라서 2번 방식을 추천한다. 2. sessio.. 2023. 6. 23.
[Javascript] 문자열 표현 시 '(작은 따옴표), "(큰 따옴표), `(억음 부호) 차이 ● 문자열 표현 방식 1) '(작은 따옴표) 사용 const str = 'abcd'; 2) "(큰 따옴표) 사용 const str = "abcd"; 3) `(억음 부호 : backtick) 사용 const str = `abcd`; ● 방식별 차이 * '(작은 따옴표)와 "(큰 따옴표)의 차이는 거의 없음 * `(억음 부호)의 경우엔 개행 처리가 가능 - 개행 처리를 하기 위해서는 '(작은 따옴표)와 "(큰 따옴표)는 \n을 직접 넣어줘야 함 * `(억음 부호)의 경우, 변수 작성 시 ${} 태그로 값을 부여가 가능함 * 문자열 상수를 표현하기 위해 \" \' 같은 escape 필요 없음 - 사실 '(작은 따옴표)로 묶을 경우 "(큰 따옴표)를 사옹하고, "(큰 따옴표)로 묶을 경우 '(작은 따옴표)를 사.. 2023. 5. 12.
[Javascript] 숫자 천 단위로 ,(콤마) 찍는 방법 ⊙ 아래 방식은 정규식을 이용한 방식으로 ⊙ 여러 블로그들을 참고했을 때 가장 깔끔하고 간단한 방법이였다. function numberWithCommas(val) { return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } ※ 더 다양한 방법을 통해 구현하고 싶을 경우, 아래의 링크 참고 https://hianna.tistory.com/441 참고 쥬리리리 - [Javascript] 천 단위(숫자 3자리) 콤마 찍기 https://s-yeonjuu.tistory.com/48?category=967890 2023. 5. 11.
반응형