도서관에서 제로초님의 자바스크립트 프로그래밍도서를 보고 나서,리뉴얼된 자바스크립트 책이 나왔다고 해서 도서관에 비치희망을 하였더니 1주뒤에 예약되었다고 연락이 왔다. 세상에 역시 살기 좋은 세상이다. 기존에 빌렸던 책 프로그래밍 부분이 새로나온 책에도 겹치는게 있다고해서 이책으로 다시 시작하겠다.
여전히 자바스크립트가 익숙하지 않아 복습하는 개념으로 이 책을 통해 다시 시작해보자.
프로그래밍 사고력을 기르기 위해서는 어떤 제품이 어떤 흐름으로 흘러가는지 알아야한다. 물론 프로는 생각만으로도 코딩을 할수 있겠지만, 프로그램이 수행하는 명령에 대한 순서와 절차를 도형과 기호를 사용한 순서도를 통해 익숙해져야겠다.
기본 문법(feat.심화)
이전 책에서는 간단한 문법만 소개했던 거 같은데, 조금 더 심화된 문법(?)도 소개되어 있어 정리해보겠다.
고차 함수 사용하기
함수는 호출하면 어떤 값을 반환한다. 이 값은 문자열이나 숫자, 불 값 등으로 제한되지 않고 자바스크립트의 모든 자료형이 될 수 있다. 즉, 함수가 함수를 반환할 수도 있다.
fun()처럼 함수를 만든는 함수를 고차 함수(high order function) 라고 한다. 참고로 화살표 함수 문법에서는 함수 본문에 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다. 화살표 함수가 연이어 나와도 당황하지 말 것.
예시
배열과 함수가 객체인 이유
배열과 함수가 객체인 이유는 객체의 성질을 모두 다 사용할 수 있기 때문. 배열과 함수에도 속성들을 추가하거나 수정 및 삭제할 수도 있다. 객체는 함수와 배열을 포함하는 개념이라서 중괄호({})를 사용해 만든 객체를 구분하기 위해 객체 리터럴이라고 따로 지칭하는 것.
객체에 어떤 속성이 있는지 잘 모를 때는 ?. 연사자를 사용하자
옵셔널 체이닝 연산자(optional chaining operator) 라고 하는데, 존재하지 않는 속성에 접근할 때 에러가 발생하는 것을 막아준다.
forEach() 와 map()
forEach()
for문을 사용하지 않고도 배열에서 제공하는 메서드로 반복문 역할을 수행할 수 있음.
foreach()는 인수로 받은 함수를 배열 요소에 각각 적용.
인수로 받은 함수의 매개변수로는 요소(number)와 요소의 인덱스(index)가 들어 있음.
이때 (number, index) => {} 처럼 다른 메서드에 인수로 넣었을 때 실행되는 함수를 콜백함수라고 함.
콜백 함수의 매개변수인 number, index 워딩은 마음대로 지을 수 있다만, 첫 번째 매개변수가 배열의 요소, 두 번째 매개변수가 요소의 인덱스라는 것만 기억하자!
map()
map()은 배열 요소들을 일대일로 짝지어서 다른 값으로 변환해 새로운 배열을 반환하는 메서드이다. map()도 foreach()처럼 콜백 함수를 인수로 받지만, 새로운 배열을 반환하다는 점이 다르다.
위 코드를 보면 길이 5인 배열을 생성하고 fill(1)로 요소를 모두 1로 채웠다. 그 다음 map() 함수를 사용하여 index에 1을 더한 값으로 바꾸라는 의미이다.
위 코드를 보면 원본 배열 array는 수정되지 않는다.
find(), findindex(), filter()
배열에서 요소를 찾을 때 indexOf()나 includes() 메서드를 사용했는데 보통 2차열 배열에서는 위 메서드를 사용하는게 좋다고 함.
find() 는 콜백 함수의 반환값이 true인 요소를 찾는 메서드. true인 요소가 여러개일 경우에는 처음 찾는 요소를 반환
findIndex()는 찾은 요소의 인덱스를 반환하고, 찾지 못 했다면 -1을 반환.
filter()는 find()처럼 콜백 함수의 반환값이 true가 되는 요소를 찾지만, 하나만 찾는 것이 아니라 해당하는 모든 요소를 찾아 결과를 배열로 반환
함수를 여기다 하나씩 정리하는 것보다는 기존에 작성했던 함수 개념이 있다면 추가하는 방향으로 진행해야겠다. 이 책으로보고 함수를 하나씩 보고 있는데 생각보다 그냥 가볍게 넘어간게 많은거 같다. MDN 문서나 유튜브 등으로 확실히 개념에 대해서 이해하고 넘어가자,,,
DOM 사용하기
선택자 사용하기
자바스크립트로 HTMl을 조작하려면 DOM과 선택자에 대해 이해하고 있어야 한다.
document.querySelector('선택자') 위 두개의 메서드는 웹 브라우저가 미리 만들어 둔 것이라서 따로 선언하지 않아도 된다. documet 객체는 브라우저에 열려 있는 HTML 문서를 가리킨다. 여기서 '선택자' 라는 용어가 나오는데, 선택자(selector)는 HTML 태그를 가져오게 도와주는 문자열.
태그를 저장하는 변수명을 $로 시작하도록 규칙등을 정하는게 좋겠다. 웹 브리우저가 현재 페이지의 HTML을 자바스크립트 객체로 구성해 두었기에 document 객체를 통해 HTML 태그를 선택할 수 있다.
여러 개의 태그를 선택하는 경우
document.querySelectorAll('선택자') 
우선 NodeList를 저장하는 변수명을 $$로 시작하도록 규칙을 정한정도로 이해하자.
id 속성으로 특정 태그 선택하기
document.querySelector('#<id 속성 값>') id 속성의 값은 태그에 달 수 있는 고유한 값. 한 번 사용한 id 속성의 값은 다른 태그에 재사용할 수 없다. (자바스크립트 기준, HTML에서는 가능)
class 속성으로 여러 태그 선택하기
document.querySelectorAll('.<class 속성 값>') class 속성 값은 여러 번 사용가능하다.
태그 안의 태그 선택하기
document.querySelector('선택자 내부선택자 내부선택자') 태그의 값에 접근하기
태그 자체가 아닌 태그 내부에 있는 텍스트가 필요할 때가 있다. 즉 태그 내부의 텍스트를 자바스크립트로 가져오거나 태그 내부에 접근해 텍스트를 수정해야 하는 경우이다.
태그.textContent // 태그 내부의 문자열을 가져옴 
내부의 HTML 태그까지 전부 가져오고 싶다면, texrContent 대신 innerHTML 속성을 사용한다.
태그.innerHTML // 태그 내부의 문자열을 가져옴 
문자열뿐만 아니라 문자열을 둘러싼 태그도 함께 콘솔에 표시된다.
입력 태그의 값 가져와 변경하기
기본적으로 태그 내부의 값을 선택할 때는 'textContent'를 사용하지만 입력 태그만 value를 사용한다. input은 대표적인 입력 태그이다. 다른 입력 태그로는 select와 textarea가 있다. 현재 input 태그에는 아무런 값도 입력되어 있지 않으므로 $input.value는 ''이다.
<입력 태그>.value // 입력창의 값을 가져옴
<입력 태그>.value=값; // 입력창에 값을 넣음입력 태그를 선택할 때는 focus()라는 메서드를 사용한다. focus()는 입력 태크 내부에 커서를 위치하게 해서 사용자가 입력하기 편하게 도와준다.
<입력 태그>.focus() // 입력창을 하이라이트함
+++ 반복되는 내용이 있었다. 근데 이제서야 조금씩 이해가 되는거 같다. 오늘 느낀건 cs지식이 많이 부족한 상태에서 처음 보는 개념들은 단번에 이해하기 어려우니 반복해서 보도록하자,,!!!!!!
09.04 내용 추가
이벤트와 이벤트 리스너
자바스크립트는 이벤트를 자동으로 감지할 수 없기에 이벤트 리스너(event listener)를 추가해야 한다.
사용자가 태그와 상호작용할 때 이벤트(evnet)는 라는 것이 발생. 실제로는 사용자가 HTML 태그와 상호작용을 하는 것.
리스너 추가하기
태그.addEventListener('<이벤트 이름>', <이벤트 리스트>)
이벤트를 연결할 때는 함수명만 넣어야 하고, 소괄호까지 붙ㅌ이면 함수 자체가 실행되는 점에 유의할 것.
onClickButton() 같은 이벤트 리스너도 콜백 함수이다. addEventListener()에게 함수를 주면 클릭할 때마다 한 번씩 실행해주는,,,
변수를 사용하지 않고 아래처럼 코딩할 수 있지만, 위처럼 변수사용을 추천한다. 읽기가 더 쉽고 나중에 이벤트를 제거할 때도 재사용 가능하다.
input 태그에 글자를 입력하면 input 이벤트가 발생하게 해본 경우이다. 함수의 매개변수로 event가 존재하는데 이벤트 리스너에는 매개변수를 통해 addEventListener()가 제공하는 이벤트에 관한 정보가 전달된다. 여기서는 envet.target.value로 input 태그에 입력한 값을 알아 낼수 있다. 참고로 매개변수이기에 꼭 event라고 워딩을 한정 짓지 않아도 된다.
이벤트 리스너 제거하기
function 함수() {
태그.addEventListener('이벤트', 함수)
태그.removeEventListener('이벤트', 함수)이때 참조관계를 유지하기 위해서 변수를 사용해야 실행이된다.
const fun = (값) => () => {
console.log('고차함수입니다.', 값);
}
const fun1 = fun(1);
태그.addEventListener('이벤트', fun1)
태그.removeEventListener('이벤트', fun1)fun(1)을 fun1 변수에 저장해서 같은 함수라는 것을 보장해야한다.
고차함수인 fun()은 항상 새로운 함수를 반환하기 때문. 같은 함수가 아니므로 이벤트가 제거되지 않는다. 따라서 이벤트를 제거하고 싶다면 fun(1)을 fun1 변수에 저장해서 같은 함수라는 것을 보장해야한다.
키보드와 마우스 이벤트
넓은 범위에서 붙여지는게 좋기 때문에 보통 이벤트를 window 객체에 추가하는 것
이벤트 버블링과 캡처링
이벤트가 발생할 때 부모 태그에도 동일한 이벤트가 발생하는 현상을 이벤트 버블링이다. 이벤트가 발생한 태그가 아닌 이벤트를 연결한 태그에 접근하고 싶다면 event.currentTarget을 사용해야한다.
header 자식 태그인 input까지 영향을 주고 있다
이벤트 캡처링은 이벤트가 자식 태그로 전파되어 내려가는 현상인데, 실무에서는 여백(?)을 눌렀을 때 팝업을 닫고 싶을 때 말고는 잘 사용안한다고,,
다양한 DOM 속성
태그 속성 다루기
태그.속성 // 조회 시 사용
태그. 속성 = 값; // 수정 시 사용HTML 태그의 속성 중에 class 속성은 자바스크립트의 class와 헷갈리는 것을 막기 위해 아래 처럼 사용한다
태그.className = '클래스1 클래수2 ...';근데 기존 클래스에 새로운 클래스를 추가하거나 삭제하려면 태그.classList 객체를 사용하는 것이 좋다.
새로운 태그 만들기
const $button = document.createElement('button');
$button.classList.add('login');
$button.style.fontSize = '15px';
$button.textContent = '버튼';
document.body.append($button);window 객체
window는 웹 브라우저를 가리키는 객체로, 웹 브라우저가 제공하는 기본 객체들은 대부분 window 객체 안에 들어 있다. document, console 객체도 실제로는 window.document / window.console이다. window는 생략할수 있다.
대표적으로는 alert() (알림창 또는 경고창), confirm()(확인창), prompt()(입력창) 메서드가 있고, 수학 계산을 돕는 Math 객체와 날짜 계산을 돕는 Date 생성자 함수가 있다.
대화상자 사용하기
prompt('사용자에게 표시할 메시지') 단순히 prompt('~~~') 으로 대화상자를 띄우면 그 값을 입력해도 아무런 일이 일어나지 않기에 그 값을 저장시키려면 아래 처럼 변수를 지정하여 저장시킨다.
const number = prompt('~~~');
number;다만 prompt() 함수는 문자열이 되기 때문에 숫자값을 원한다면 아래 경우로 변경할수 있다.
const number = prompt('~~~');
Number(number);
const number = Number(prompt('~~~'));
number;confirm() 함수는 사용자에게 의사를 물어볼 때 사용.
Date 생성자 함수
날짜 계산을 할 때는 Date 생성자 함수를 사용한다. 생성자 함수이므로 new를 붙여 호출한다.
const <날짜 객체> = new Date(연, 월, 일, 시, 분, 초, 밀리초);
const <날짜 객체> =new Date(타임스탬프); 타임스탬프(timestamp)는 1970년 1월 1일 자정(런던시간기준)으로부터 지나온 밀리초를 의미한다.
현재 시간의 밀리초는 Date.now() / 타임스탬프는 사람이 읽기 어려우니 new Date()를 사용한다.
직접 시간을 지정하고 싶다면
new Date(2024, 1, 2 );
new Date(2023, 1, 2, 18, 30, 5);
차례대로 연, 월, 일, 시, 분, 초 이다. 월은 0부터 시작이다. 그래서 인수로 1을 넣었지만 2월이 된다.
setFullYear(), setMonth(), setDate(), setHours(), setMinutes(), setSeconds(), setMilliseconds() 메서드는 각각 연, 월, 일, 시, 분, 초 밀리초를 수정한다.
setMonth()에는 0부터 11까지의 값을 넣어야하는 점 다시 생각하고,,,연을 바꾸는 메서드 이름은 setFullYear() 도 유의.
현재 객체를 가져오는 거는 set대신 get으로 바꾸면 된다. 요일을 구하는 getDat()메서드는 0부터 6까지 값이 나오는데 일요일이 0이고 토요일이 6이다.
참고로 set시작하는 메서드를 사용할 때 인수로 0이나 음수도 넣을수 있는데 2024년 1월 1일의 하루 전을 구하려면 아래와 같다.
