JavaScript
-
[JS] localStorage와 sessionStorageJavaScript 2022. 6. 14. 11:00
localStorage와 sessionStorage 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 둘 다 저장공간. 단, 차이점은 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다. 대부분의 데이터의 경우 DB에 저장하므로 로컬 및 세션 스토리지가 사용되는 곳은 그리 많지 않다. 글 작성 중간중간에 잃어버리지 않기 위한 임시저장 용도 장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우 방문자의 이동경로를 저장하였다가 이동할 경우 그 외 서버에 반드시 저장할 필요가 없는 경우 localStorage sessionStorage 오리진이 같은 탭, 창 전체에서 공유된다. 오리진이 같은 브러우저 탭, i..
-
[JS] 객체 속성 추가, 삭제JavaScript 2022. 6. 13. 14:44
object의 속성 추가,삭제 동적으로 객체 속성 추가 객체 먼저 생성 후, 속성을 추후에 추가 let objData = {}; // 빈객체 선언 objData.name = 'amy'; objData.age = '22'; objData.phone = '01012345678' 정적으로 객체 속성 추가 객체 생성 할 때 속성도 함께 생성 배열이 포함된 객체의 속성 추가 // 정적 추가 let obj = { add: "Incheon", age: 20, name: "amy" }; // 배열 추가 obj.dog ['뭉치', '콜라']; console.log(obj) {add: "Incheon", age: 20, name: "amy", dog: ['뭉치','콜라'] } 객체 순회하면서 조건문에 따라 속성 추가 //..
-
[JS] input박스에 숫자만 입력되도록 설정JavaScript 2022. 6. 9. 09:15
input박스에서 숫자만 입력되도록 설정 type을 number로 지정 oninput이벤트, 정규식, replace() 활용 pattern 속성 활용 1. type을 number로 지정 숫자만 입력받을 수 있다. 2. oninput 이벤트, 정규식, replace()함수 oninput 이벤트는 input form의 값이 바뀌면 발생한다. 숫자만 입력할 수 있는 정규식을 적용하여 숫자가 아닌 값이 입력되면 replace()함수를 이용하여 값을 대체 3. pattern 속성 활용 input에 pattern 속성을 지정하고, 입력한 값을 검증할 정규식을 입력한다. css에 input:invalid속성을 지정하면 input 에 입력한 값이 pattern에 맞지 않으면 즉시, css를 적용하여 input 테두리의..
-
[JS] splice() 함수JavaScript 2022. 6. 8. 09:28
splice() 함수 splice()함수는 배열의 기존요소를 삭제/변경/추가 할 수 있다. 이 함수는 원본 배열 자체를 수정한다. splice(start[, deleteCount[, item1[, item2[, ...]]]]) start: 배열의 변경을 시작할 인덱스 deleteCount: 배열에서 제거할 요소의 수 생략 : 모두제거 0 : 제거안됨 0 이하의 수 : 제거안됨 item1, item2: 배열에 추가할 요소 생략 : splice()는 요소제거만 수행함 자바스크립트의 배열(Array) 객체에서 제공되는 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있습니다. 먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보겠습니다. 예를 들어, 먼저 a라는..
-
[JS] 배열 초기화(빈 배열)JavaScript 2022. 6. 8. 09:25
배열 초기화 빈 배열 할당 배열의 길이 설정 splice() pop() 1. 빈 배열 할당 let arr = [1, 2, 3]; arr = []; 2. 배열의 길이 설정 let arr = [1, 2, 3]; arr.length = 0; 3. splice() splice()함수는 배열에 원소를 추가/삭제 하기 위한 함수이다. splice(변경을 시작할 배열의 시작index, 입력받은 파라미터 숫자만큼 원소삭제, 시작index에 추가 할 값) let arr = [1, 2, 3]; arr.splice(0, arr.length); --------------------------------- // splice 2번째 파라미터를 생략하면 첫번째 파라미터로 받은 index이후의 모든 값이 삭제됨. arr.aplice..
-
[JS] 객체 내부의 key값 이름변경JavaScript 2022. 6. 7. 14:28
객체의 프로퍼티 이름 변경 변경 할 프로퍼티가 객체에 존재하는지 확인 변경 할 프로퍼티를 새로 생성 후 변경 전 프로퍼티 값을 선언 기존의 프로퍼티를 delete() userNm을 userName으로 수정하려면? // key값 수정 let tempArr = { userNm : 'amy' } if(tempArr.hasOwnProperty('userNm')){ tempArr.userName = tempArr.userNm; delete tempArr.userNm } console.log(tempArr) { userName : 'amy' } ----------------------------------------------- // 배열을 순회하며 key값 수정 for(let idx in tempAdd) { if..
-
[JS] 배열에서 중복값 제거 / 오름차순 정렬JavaScript 2022. 6. 7. 13:31
배열 중복 제거 / 정렬 Set indexOf() includes() Set Set객체는 중복을 제거한 값들의 집합이다. set을 사용해 중복제거 후 배열형태로 변환해줘야 정상적으로 데이터를 확인 할 수 있다. add : 중복된 값이 없을 경우 추가 delete: 값 삭제 has : 값 존재유무 확인 clear : Set내부의 모든값 삭제 size : 값의 수를 확인(length) let set = new Set(); // set생성 ------------------------------------------ const arrData = [1,2,3,1,2]; const set = new Set(arrData); const uniqueArr = [...set]; // set객체를 배열형태로 저장해야 정상..
-
[JS] replace 문자변환, 치환JavaScript 2022. 5. 12. 14:04
replace()함수는 특정문자를 직접입력하거나 정규표현식을 사용하여 다른문자로 치환할 수 있다. 정규표현식(Regular Expression) 정해진 규칙을 사용해 모든 문자를 변환할 수도... 숫자만 변환하거나 맨 처음 또는 맨 뒤만 변환할 수도 있다. string.replace('찾을 문자', '치환할 문자') 단, replace()함수는 문자열에서 변경하려는 문자열이 여러번 반복될 경우, 첫번째로 발견한 문자열만 치환해 준다. string.replace('찾을 문자', '치환할 문자') let string = 'red, yellow, green, blue'; let result = string.replace('yellow', 'black'); // 'red, black, green, blue' 정..