본문 바로가기

Programming/Javascript18

[Javascript] <script> 태그 속성 종류 ● type- 스크립트 MIME 타입 지정- 기본값 'text/javascipt'- 보통 생략async- 스크립트를 비동기적으로 로드- 다른 페이지 요소들과 병렬로 로드defer- 스크립트 실행 연기- HTML 파싱 완료 후 실행- 주로 외부 스크립트 파일과 함께 사용integrity- 스크립트 파일 서명(SRI)를 제공하여 파일 무결성 확인crossorigin- CORS(Cross-Origin Resource Sharing) 설정- 외부 리소스가 다른 도메인에 있을 때 사용nomodule- ES6 모듈을 지원하지 않는 브라우저에만 해당 스크립트를 로드 nonce- CSP(Content Security Policy)와 함께 사용되는 속성- 안전하게 스크립트 삽입 2024. 7. 22.
[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.
[Javascript] Cookie, jQuery로 로그인 ID 저장하기 기능 구현하기 ● 쿠키(Cookie)란? - 브라우저에 저장되는 작은 크기의 문자열 - 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달 - 서버는 쿠키를 받아서, 사용자의 정보를 추적하거나, 사용자의 환경 설정을 저장하는 등의 용도로 사용 - Ex) 사용자 환경 설정 저장, 로그인 상태 유지, 광고 개인화, 사용자 행동 추적 - ❗안전하지 않는 데이터를 저장하는 데 사용해서는 안 됨. (Ex : 사용자 비밀번호) ● 구현 필요 부분 1. 로그인 폼 - ID 입력 칸(input text), ID 저장 체크박스(checkbox) 필수 ID PW 아이디 저장 LOGIN 2. 로그인 페이지 로드 시 쿠키에 저장된 아이디 값 확인 $(func.. 2023. 12. 7.
[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] class 내 비동기 함수에서 this를 현재 class로 설정하는 방법 ● 문제 - Class 내부에서 ajax나 axios와 같은 비동기 함수 사용 시 success, then과 같은 콜백 영역에서 this가 현재 class로 인식하지 못함 - ajax : jQueyr Ajax 객체 자체를 가리킴 "context" 옵션을 통해 명시적으로 컨텍스트 지정 가능 - axios : then 내부에서 this는 axios의 콜백 함수에서의 컨텍스트를 가리킴 기본적으로 "undefined"로 설정 됨 ● 해결 1) 화살표 함수(Arrow Function) 사용 // ajax 방식 $.ajax({ url: "/api/data", success: response => { console.log(this); // 원하는 컨텍스트를 참조 // ... }, error: error => { co.. 2023. 6. 12.
[Javascript] Ajax async(동기 처리)가 먹히지 않을 때 ● Ajax(Asynchronous JavaScript and XML) * 자바스크립트의 라이브러리 중 하나 * 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 * 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 * 자바스크립트를 사용한 비동기 통신 * 클라이언트와 서버간에 XML 데이터를 주고받는 기술 ● Ajax async 옵션 * 동기(false) : 웹에서 서버측에 데이터를 요청하고 데이터의 수신이 완료될 때까지 기다리는것 * 비동기(true) : Ajax를 이용하여 데이터의 수신을 기다리지않고 바로 다른 작업을 실행 - 페이지의 로딩을 기다리지않으므로 웹의 속도가 빠르게 반응 가능 - async 옵션을 따로 지정해주지 않을 경우 true로 기본 설정됨 ● Aja.. 2023. 5. 15.
[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.
반응형