알고리즘 문제를 풀이하다가 [1, 2, 1, 2, 1, 2, 1] 이렇게 생긴 배열이나 [1, 1, 2, 2, 3, 3, 4]와 같은 배열이 필요했다. 제출한 문제는 for문을 사용해 해결했는데 forEach 배열 메서드로 해당 배열을 만들어 보고 싶었다. 작성한 코드는 아래와 같다. let n = 2; let arr = ["hello", "one", "even", "never", "now", "world", "draw"]; // 이 배열과 대응하는 정수 요소의 배열을 생성하는 것이 목적이다. const newArr = new Array(arr.length); const result = []; newArr.fill(1); newArr.forEach((_, idx) => { if ((idx + 1) % n..

바닐라 자바스크립트로 웹사이트를 만들고 있는데, 외부 HTML 파일을 가져와 화면에 렌더링 하고자 하였다. 이때 Ajax처럼 기존에 렌더링 된 화면은 그대로 두고 원하는 부분만 새로 렌더링 하고 싶었다. 결과적으로 적용한 코드는 다음과 같다. // ID에 렌더링 function openContent(htmlFileName) { const h = `` document.querySelector("#showContents").innerHTML = h; loadHtml(); // 외부 HTML 파일 로딩 호출 } // 외부 HTML파일 로딩 함수 function loadHtml() { window.addEventListener('click', function() { var allElements = documen..

1. 더미 데이터 생성 https://json-generator.com/ JSON Generator – Tool for generating random data Generate any random data you want with power of agile templates and save it to our servers for later use. json-generator.com 2. 언더스코어가 붙은 "_id" JSON Generator에서 생성한 더비 데이터를 가지고 JavaScript DOM 실습 중이다. 아래는 해당 더미 데이터 중 하나인데 아이디 키가 "_id"와 같이 언더스코어가 붙어있다. 대수롭지 않게 생각하고 실습을 진행 중이었는데 문제가 생겼다. { "_id": "632561efe6b7..

Javascript의 select에서 checked인 모든 요소를 삭제하려고 했는데 하나씩 선택 삭제는 잘 작동하는데 둘 이상인 경우 삭제가 아니라 2배로 늘어나는 기적(?)이 일어났다. 처음에는 문자열인 고객사 명만 배열로 관리했는데 인덱스를 찾아 삭제하는 것보다 객체의 키값을 찾아 삭제하는 것이 효과적일 거라는 판단이 들어 배열 내에 객체 형식으로 고객사를 등록했다. 객체의 고유한 키의 값을 사업자 번호로 삼았고 그걸 가지고 checked 된 경우 찾아 삭제하고자 했다. 삭제 방식은 checked 되지 않은 요소(고객사 객체)만 새로운 임시 배열에 push 한 후 기존 고객사 배열에 덮어 버리는 방식을 이용했다. 그랬더니 삭제하려고 했던 요소가 2배로 늘어나버렸다. 정확히는 "checked 된 수 *..

const regexpEmail = /^([a-z]+\d*)+(\.?[a-z]*)+@[a-z]+(\.[a-z]{2,3})+$/; if (!regexpEmail.test(email)) { return alert("올바른 형식의 Email을 입력하세요."); } 정규식과 조건문에는 아무런 문제가 없었다. 다시 보고 또다시 봐도 그랬다. 그런데 왜 정규식에 부합하는 input값을 넣어도 [그림 1]과 같이 alert이 뜨는 것일까? 황당하게도 email 관련 DOM 처리 시 trim함수에 ()를 붙이지 않아서였다. const email = document.querySelector("#email").value.trim; // .trim -> .trim() console.log를 찍어보니 입력한 email 값이 ..

"카이 호스트만. (2021). 무던한 개발자를 위한 모던한 자바스크립트(우정은, 역). 한빛미디어" 위 책 60쪽 01번 연습문제 풀이 후 잘 기억해야 할 내용이라 판단되어 정리하였다. + 연산자를 정수에 사용 + 연산자를 정수에 사용하면 산술 연산자로 작동하며, 결과는 다음과 같다. > 0+NaN 0+Infinity 0+undefined 0+false 0+true 0+null ''+NaN ''+Infinity ''+undefined ..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 이 책은 자바스크립트 "입문자"에게 훌륭한 선택이다! 9, 10장을 통해 다지게 된 점은 다음과 같다. 9장 폼 1) name 값을 사용해 폼 요소 안에 있는 텍스트 필드에 접근하려면 의 name값과 텍스트 필드의 name값을 사용한다. document.의 name값.텍스트 필드의 name값 document.forms["의 name값"].elements["텍스트 필드의 name값"] // 이렇게도 접근할 수 있다. 2) id, class, name 속성도 없을 경우 폼 배열을 사용해 폼 요소에 접근할 수 있다. document.forms[0].elements[0].value // 현재문서의.첫 번째 form의.첫 번째 요소의.값 ..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 자바, 파이썬을 공부한 적이 있다. 그래서 자바스크립트를 배울 때도 웬만한 문법의 개념은 익숙했다. 하지만 DOM은 낯설다. 다른 책을 통해 이를 먼저 접했는데 상당히 많은 내용을 담고 있었다. 그게 장점일 수 있지만 처음 배우는 입장에서는 중압감이 컸다! 반면 이 책은 핵심만 간결하게 잘 담은 인상이다. 잘 구조화되어 있어 기억도 잘 된다. 차근차근 따라가다 보면 어느새 quiz-2를 풀고 있다. 8장을 통해 다지게 된 점은 다음과 같다. 8장 문서 객체 모델(DOM) 1) DOM - 웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법. 2) DOM 트리 표현 - 태그: 요소 노드 ..