본문 바로가기

Programing/JavaScript64

포매팅 함수 - 데이터를 원하는 형식으로 변환하기 상황원본 데이터 날짜 형태가 2022-08-31T12:49:00.000Z이러한 형태로 저장되어 있어 데이터를 fetch 해 와서 렌더링 시킬 때 저대로 렌더링 됨.이것을 2024년 6월 17일 과 같은 형태로 변환하고자 함. 이 외에도 금액이 100000과 같이 나오는 것을 세 자리수 마다 콤마를 찍는 포매팅 함수 등도 여러 가지 알아보고자 함.포매팅 함수 작성YYYY년 MM월 DD일const formatDate = (dateString) => { const options = { year: 'numeric', month: 'long', day: 'numeric' }; const date = new Date(dateString); return date.toLocaleDateString('ko-KR',.. Programing/JavaScript 2024. 6. 17.
로컬스토리지 기본 사용법 1. 데이터 저장localStorage.setItem(key, value)를 사용하여 데이터를 저장할 수 있다. 여기서 key는 문자열로 된 키, value는 문자열로 된 값이다.localStorage.setItem('username', '장원영');2. 데이터 읽기localStorage.getItem(key)를 사용하여 데이터를 읽을 수 있다. 해당 키가 존재하지 않으면 null을 반환한다.let username = localStorage.getItem('username');console.log(username); // 장원영3. 데이터 삭제localStorage.removeItem(key)를 사용하여 특정 키의 데이터를 삭제할 수 있다.localStorage.removeItem('username');.. Programing/JavaScript 2024. 5. 23.
HTML 화면에서 반복되는 리스트 한 번에 추출하기 상황강의를 듣다 강의 전체의 이름을 가져와서 작업을 해야 하는 상황이다.한 줄 한 줄 li 태그로 묶여 있고, unit 이라는 클래스로 지정되어 있는 듯하다.해결웹 브라우저에서 개발자 도구를 연다콘솔에 아래 명령어를 입력한다.const listItems = document.getElementsByClassName('unit');// 임의의 변수를 만들고 해당 클래스명을 가진 요소를 전부 찾아온다.const texts = Array.from(listItems, item => item.textContent);// 여러 개이니 배열로 반환되었을 건데, arr.from 메서드로 textContent만 순회하면서 가져온다.// 이를 다시 새로운 배열에 할당한다.console.log(texts);// 최종 완료된 .. Programing/JavaScript 2024. 5. 13.
자바스크립트 이벤트 객체 공부한 이유사용자가 키보드를 눌렀을 때 특정 코드를 실행시키고 싶어 아래와 같이 작성했다.그런데 작성하면서도 이벤트 리스너의 콜백 함수로 event라는 매개 변수가 들어가는데, 무엇을 의미하는지 알지 못하고 그냥 외워서 사용했다.이것 말고도 이 event 객체는 부트캠프에서 두 번이나 썼다. 리로드 되는 페이지에서 버튼에 달린 이벤트 리스너가 풀리는 것을 방지하기 위해 리로드 되지 않는 상위 부모 태그에 이벤트 리스너를 다는 이벤트 위임을 할 때, 영화 카드를 눌렀을 때 현재 누른 카드의 ID 값을 찾아올 때.document.addEventListener('keydown', function(event) { // 13은 enter의 keyCode if (event.keyCode === 13) { .. Programing/JavaScript 2024. 5. 11.
HTML 요소에 단축키로 이벤트 주기 (input으로 포커스 옮기기, 버튼 클릭하기) 상황간단하게 위와 같이 지출번호를 입력하고 버튼을 클릭하면 이벤트 리스너가 동작하여 문서를 만들어주는 웹 페이지를 만들었다.하단으로 쭉 HTML이 작성되는데, 끝까지 확인한 후 다시 위로 가서 다른 지출번호를 입력해서 다른 문서를 확인하는 이 과정 자체를 줄이고 싶다.해결 방법top 버튼을 만들어 하단에서 최상단으로 버튼 클릭 한 번에 이동한다. --> 그런데 스크롤은 위로 한 번에 올라가더라도 어쨌든 input 클릭 한 번 하고 버튼을 또 눌러야 하기 때문에 이벤트가 크게 줄진 않을 것 같다.단축키를 만들어서 한 번에 포커스를 input으로 옮기고, 지출번호를 타이핑한 뒤 단축키를 또 만들어서 버튼을 눌러 이벤트 리스너를 동작시킨다. --> 이벤트 횟수 자체는 줄지 않았지만 적어도 마우스를 안 잡아도 .. Programing/JavaScript 2024. 5. 11.

티스토리툴바