본문 바로가기

프로젝트/202421

textarea 에서 enter/backspace 에 따라서 높이 늘리기 오늘은 엔터를 눌렀을 때 textarea 의 높이가 늘어나는 작업을 했다. 처음에는 주석처리 된 부분처럼 textarea 의 높이값을 구해서 그 높이에 임의의 값을 추가해서 늘리려고 했는데, 너무 부자연스럽게 늘어나고 줄어들었다. 그래서 검색해보던 중 split 에 정규표현식으로 자르는 방법을 알게됐다. $reviewTextarea.addEventListener('keyup', (event) => { const HEIGHT = 20; const textareaHeight = $reviewTextarea.clientHeight; const row = parseInt($reviewTextarea.getAttribute('rows')); let text = $reviewTextarea.value; let ro.. 2024. 1. 12.
영화 리뷰 작성하기 (localStorage) 어제까지 영화 리뷰 작성 폼 ui 작업을 하고, 오늘은 데이터 저장하는 작업을 했다. 리뷰 데이터는 localStorage에 저장하는 요구사항이 있었는데, 정말.. 너무 힘들었다. 오늘이 제일 힘들었던 것 같다.. 데이터 구조 일단 데이터를 어떻게 쌓을지부터도 굉장히 고민스러웠다. 처음에 생각했던 구조는 아래 코드처럼 배열에 객체를 담아서 movieId로 해당 리뷰를 가져오는 식으로 하려고 했었다. let data = [ {name:'홍길동', password:'123', contents:'재밌어요', id:1, movieId:253}, {name:'아무개', password:'123', contents:'재밌어요!!!', id:2, movieId:253}, {name:'루피', password:'123.. 2024. 1. 11.
검색 영역 코드 개선 [BEFORE] input addEventListener keyup에서 검색할 키워드를 담고, event.keycode === 13으로 엔터키 감지하여 검색기능 활성화 button addEventListenerclick에서 input 공백 검증 및 검색 기능 활성화 const $movieList = document.querySelector("#movieList"); const $keyword = document.querySelector("#keyword"); const $searchBtn = document.querySelector("#searchBtn"); let searchKeyword = ""; $keyword.focus(); //검색 - keyup $keyword.addEventListener(".. 2024. 1. 9.
검색 결과가 없을 때 일치하는 항목이 없을 경우 아래와 같이 결과가 없다는 문구가 담긴 영역이 추가되도록 하였는데, 결과가 없을 때마다 추가되어 계속 쌓이게 됐다... 한 번만 추가되어야 하는 영역이라 어떻게 체크해야 할지 고민했는데, querySelector로 조회했을 때 없으면 null 값이 나와서 if 문에 넣어서 해결했다. if(!document.querySelector('.no-data')){ const noDataDiv = document.createElement('div'); noDataDiv.className = "no-data"; noDataDiv.innerText = '검색 결과가 없습니다.'; $movieBox.append(noDataDiv); } 2024. 1. 5.
검색어의 공백 제거 검색할 때 검색어의 공백을 제거하여 띄어쓰기가 달라도 검색이 되도록 구현하는 중에, '반딧불이의묘'라고 검색해도 해당 영화가 노출되지 않았다. 예상했던 결과는 검색어의 공백이 삭제되어 '반딧불이의묘'라고 값이 변경되는 것이었다. 왜 계속 안되는지 로그를 계속 찍어봤는데, trim()을 사용해서 문제가 됐다. 막연하게 trim() 은 공백을 제거한다고 알고 있었는데 너무 얕게 알고 있었다. trim() trim() 메서드는 문자열의 앞, 뒤 공백을 제거한 후 원본 문자열을 훼손하지 않고 새로운 문자열을 반환한다. 그래서 문자열의 공백을 제거할 다른 방법을 찾게 되었다. split으로 공백 기준으로 문자열을 나눈다. split 으로 나눈 배열을 join으로 합친다. split() split() 메서드는 문자.. 2024. 1. 4.

티스토리툴바