본문 바로가기

JavaScript8

[javascript] 리뷰 삭제 (localStorage) 리뷰 등록에 이어 리뷰 삭제 기능을 구현하였다. 기능명은 리뷰 삭제지만, localStorage의 데이터를 업데이트하는 방식이다. 작성된 리뷰에서 삭제 버튼을 누르면 아래와 같은 비밀번호 확인 모달창이 나온다. [리뷰 삭제 시 비밀번호 확인 모달 html 소스] 리뷰 삭제 비밀번호 확인 취소 확인 [비밀번호 확인 모달 띄우기] //비밀번호 확인 모달 노출 const confirmPasswordModal = () => { $modal.style.display = "flex"; $checkPassword.focus(); }; //리뷰 삭제 버튼 이벤트 $commentList.addEventListener("click", (event) => { if (event.target.className === "btn-.. 2024. 1. 15.
검색어의 공백 제거 검색할 때 검색어의 공백을 제거하여 띄어쓰기가 달라도 검색이 되도록 구현하는 중에, '반딧불이의묘'라고 검색해도 해당 영화가 노출되지 않았다. 예상했던 결과는 검색어의 공백이 삭제되어 '반딧불이의묘'라고 값이 변경되는 것이었다. 왜 계속 안되는지 로그를 계속 찍어봤는데, trim()을 사용해서 문제가 됐다. 막연하게 trim() 은 공백을 제거한다고 알고 있었는데 너무 얕게 알고 있었다. trim() trim() 메서드는 문자열의 앞, 뒤 공백을 제거한 후 원본 문자열을 훼손하지 않고 새로운 문자열을 반환한다. 그래서 문자열의 공백을 제거할 다른 방법을 찾게 되었다. split으로 공백 기준으로 문자열을 나눈다. split 으로 나눈 배열을 join으로 합친다. split() split() 메서드는 문자.. 2024. 1. 4.
Set 자료구조 Set 란? 배열과 다르게 순서 없이 저장하며, 고유한 값들의 집합을 다루는 자료구조 이므로 중복을 허용하지 않는다. 순서가 없기 때문에 index로 값에 접근할 수 없다. new Set() 생성 Set는 클래스이기 때문에 new 키워드를 사용하여 생성한다. 4를 두 개 넣었는데 한 개만 추가된 걸 볼 수 있다. const set1 = new Set([1,2,3,4,4]); //Set(4) {1, 2, 3, 4} add() 추가 add() 메서드를 사용하여 추가한다. set1.add(9); //Set(5) {1, 2, 3, 4, 9} set1.add('가나다'); //Set(6) {1, 2, 3, 4, 9, '가나다'} delete() 삭제 삭제를 성공하면 true, 실패하면 false를 반환한다. se.. 2024. 1. 4.
배열 메소드 - slice(), includes(), find(), indexOf() arr.slice(n,m) : n 부터 m 까지 반환 m 은 포함하지 않는다. slice에 n,m 을 넣지 않을 경우 그대로 복사된다. let arr = [1,2,3,4,5]; console.log(arr.slice(1,4)); //[2,3,4] let arr2 = arr.slice(); console.log(arr2); //[1,2,3,4,5] 그대로 복사됨. arr.includes() : 포함하는지 확인 인덱스가 필요없고 포함하는지만 확인하려면 includes() 를 사용한다. let arr = [1,2,3]; console.log(arr.includes(2)); //true console.log(arr.includes(5)); //false arr.find(fn) : 조건에 만족하는 첫 번째 요소를.. 2024. 1. 3.
호이스팅 호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전에 모든 선언에 대해서 수집하는데, 이때 변수, 함수 등의 선언을 선언된 위치에서 제일 최상단의 위치로 올려서 실행하는 것처럼 하는 것을 말한다. 예를 들어 아래와 같은 코드가 있다고 할 때, showText3('안녕'); function showText3(text){ console.log(text); } console.log(num33); var num33 = 332; 위 코드는 이렇게 실행된다. //호이스팅 적용된 코드 function showText3(text){ console.log(text); } var num33; showText3('안녕'); console.log(num33); //undefined num33 = 332; 선언이 호출보다 위에.. 2024. 1. 2.
spread operator 전개 구문 spread operator 는 es6 문법 중 하나이다. '...변수명' 의 형태로 사용한다. 나머지 매개변수 (rest parameter) 와 생김새는 비슷하지만 사용할 수 있는 위치에 대한 제약이 다르다. 나머지 매개변수는 꼭 맨 뒤에 위치해야 하지만 전개 구문은 어느곳에 있어도 상관이 없다. {...user, 3, ...color} 이런식도 가능하다. 객체 활용 객체에 사용하면 객체를 쉽게 복사할 수 있다. let user = { name : 'jin', age : 33 } let user2 = {...user}; console.log(user2); let newUser = { name : 'jin', age : 33, favorite : { color : 'red', animal : 'dog' .. 2023. 12. 29.
data attribute / dataset / getAttribute() 사용자 정의 속성 활용 네이버 바로가기 나는 레드 html 코드에 위 코드와 같이 data-* 을 사용하여 사용자정의 속성을 추가할 수 있다. 사용자 정의 속성 가져오기 (data-*) data-* 은 두 가지 방법으로 가져올 수 있다. dataset 프로퍼티와 getAttribute()이다. 1. dataset 프로퍼티 data-text-size와 같이 - (대시)가 두 번 연달아 있을 경우에는 카멜케이스를 사용하여 가져올 수 있다. const $p = document.querySelector('.text'); console.log($p.dataset.color); //red console.log($p.dataset['color']); //red console.log($p.dataset.textSize.. 2023. 12. 28.
getElementsByClassName 과 querySelector textarea 의 value 에 값을 넣을 때 대상이 되는 요소를 가져오는데 getElementsByClassName 로는 안되고, querySelector 로 가져올 때 정상작동이 되어 차이점을 알아보려고 한다. getElementsByClassName 동일한 class를 갖고 있는 모든 요소 목록의 HTMLCollection 을 반환 console.log(parent.getElementsByClassName('comments-area')); 결과 HTMLCollection 이란? 요소의 문서 내 순서대로 정렬된 일반 컬렉션을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다(배열과 유사한 모습) 문서가 바뀔 때 실시간으로 업데이트 된다. querySelector 단 하나의 요소만 반환.. 2023. 12. 27.