이 글은 자바스크립트 프로그래밍을 참고하여 작성되었습니다.
- Math.random()은 보안과 관련된 작업을 할 때 사용하면 위험하다. 이럴 때는 window.crypto.getRandomValues() 함수를 이용해야 한다.
- 배열 vs 객체
단순한 값들의 나열이면 배열을 사용하고 값에 이름이 붙는다면 객체를 사용한다.- 배열이름.includes : 배열 안에 요소가 존재하는지 알려준다.
- Set('').size : Set은 중복을 허용하지 않는 배열이다. 따라서 Set의 요소 개수를 세면 중복된 값이 아닌지 확인할 수 있다.
ex) 4개의 배열을 Set에 넣었을 때 3이 나오면 하나가 중복된 것이다.
- indexOf, includs : 배열이나 문자열에 원하는 값이 있는지 찾는 메서드.
원하는 값이 들어 있다면 해당 인덱스를 알려주고 들어있지 않다면 -1을 반환한다. includes는 true/false를 반환한다.
- 입력창이 있으면 폼 태그로 감싸서 submit 이벤트를 사용하는 것이 좋다. submit 이벤트는 버튼을 클릭하지 않고도 enter 누르면 값을 제출할 수 있다.
- event.preventDefault() : 폼 태그의 기본 동작을 취소하는 코드. 폼 태그는 submit 이벤트가 발생할 때 기본적으로 브라우저를 새로고침한다. 따라서 초기화되는 경우를 방지하기 위해 사용한다.
- alert는 undefined를 반환한다. undefined는 if문에서 false로 처리하기 때문에 return undefined와 return false는 같다.
HTML5를 이용한 검증 기능
<input required // 입력값 필수 type="text" // 입력값이 문자열로 인식된다. id="input" minlength="4" maxlength="4" pattern="^(?!.*(.).*\1)\d{4}$"> // 중복되지 않은 4자리 숫자를 의미하는 정규식
- document.createElement : 태그를 만드는 메서드
- document.createTextNode : 텍스트를 만드는 메서드
둘 다 다른 태그에 append나 appendChild 하기 전까지 화면에 보이지 않는다.
cf) textContent는 기존 내용이 사라진다.
appendChild와 append
: document.createElement, document.createTextNode로 만든 태그나 텍스트를 선택한 태그의 자식 태그로 넣는다.
- appendChild : 하나의 텍스트나 태그를 화면에 추가
cf) append : 여러 개를 추가(텍스트와 태그를 동시에 추가할 수 있다.)
append로 텍스트를 추가할 때는 document.createTextNode대신 문자열을 바로 넣어도 된다.
forEach와 map
- forEach : 반복문 효과를 내는 배열의 메서드.
인수로 함수를 넣고 이 함수가 각각의 배열 요소들에 순서대로 적용되는 구조이다.const array = [1, 3, 5, 7]; array.forEach((number, index) => { console.log(number, index); });
- map : 반복문 역할을 하지만 반환점이 있다는 점에서 forEach와 다르다. 기존 배열의 요소를 일대일로 다른 값으로 바꾼다. 단, 기존 배열의 값이 바뀌는 것이 아니라 새로운 배열을 만든다.
const array = [1, 3, 5, 7]; const newArray = array.map((number, index) => { console.log(number, index); return number + 1; }); console.log(array); // [1, 3, 5, 7] console.log(newArray); // [2, 4, 6, 8]
