어제의 이야기

어제 공부한 것

그저께 4시간동안 100쪽밖에 못봤다고?? 했는데
어제 하면서 4시간 동안 100쪽.. 맞는듯 싶었다.

소인수 분해 알고리즘을 퇴근 전에 풀다가
그것도 소수...찾아야하는 거라
골드 바흐의 추측 어차피 ㅠㅠ 저번에 마지막에 풀던거라
확인해서 소수 찾고 했는데 시간 초과 뜨길래

대체....
소수 어케 빨리 찾는거임...

했고...

어제 110쪽 가량 봄...
(그리고 이제보니 node js 책 본건 어제 정리 안했더라)

시간은 좀 더 많이 하긴 했는데
그저께보다 개념이 좀 어려운 것도 있었고
이제 실습 파트에 들어간 터라.

(그리고 정리 적는 것도 시간이 듦.)

객체 리터럴

구조분해 할당

• 객체 속성 이름과 대입하는 변수명이 같으면 한번에 선언 가능.
  const { name } = person; 처럼.
  이미 선언된 변수도 가능. [a, b] = [b, a]

유사 배열 객체

• 배열과 생김새가 유사하나 배열 method를 사용할 순 없는 객체.
  (진짜 배열은 아니라서.)
  사용하려면 Array.from(array).indexOf... 처럼 바꿔야함.

함수를 인수로 받는 배열 method

forEach()와 map()

• 배열.forEach(함수)로
  for문을 사용하지 않고도 인수로 넣은 함수를 배열 요소에 각각 적용.
  매개변수로는 요소(element),와 요소 인덱스(index)가 있다.
  이렇게 method에 넣어서 실행되는 함수를 콜백함수라고함.
  사용하지 않는 매개변수는 안 써도 되고 이름은 편하게 써도됨.
  (두번째 매개변수는 첫번째 매개변수를 받아야만 쓸 수 있긴 함.)

• 배열.map(<콜백함수>)
  일대일로 짝지어 다른 값으로 변환해 새로운 배열을 반환.

find(), findIndex(), filter()

• 배열.find(콜백함수);
  콜백 함수 반환값이 true인 요소를 찾는 method.
  true에 해당하는게 많아도 처음 찾은 요소만 반환.
  또, includes는 객체가 똑같이 생겨도 다르기때문에
  find()로 찾는게 좋음.(조건식으로 찾게 되겠지.)
• 배열.findIndex(콜백함수);
  찾은 요소의 인덱스를 반환, 못 찾으면 -1.
  IndexOf와 유사.
• 배열.filter(콜백함수);
  true가 되는 요소를 모두 찾아서 배열로 반환.

sort()

• 배열.sort(비교함수);
  비교함수 형태는
  (a,b) => 반환값.
  (앞을 인수로 받아서 반환을 어떻게 할지 쓰는 것.)
  sort는 원본 배열을 정렬하니, 원본 배열을 남겨두고 싶다면
  얕은 복사후 사용할 것.

reduce()

• 배열의 요소들을 하나의 값으로 합침.
  초기값이 없으면 배열의 첫번째 요소가 초기 값이 됨.

배열.reduce(( 누적 값, 현재 값 ) => {
	return 새로운 누적값;
	} , 초기값 )

배열의 요소가 그때그때 현재 값이 된다고 생각하면 됨.

every(), some()

• 모든 요소가 조건에 해당하는지 판단.
  배열.every(조건함수);
• 하나라도 조건에 해당하는지 판단.
  배열.some(조건함수)
• 일반 반복문 보다, 일단 바로 판단이 되는 순간 멈추니 효율적.

클래스

공장 함수와 생성자 함수.

• 객체를 반환하는 함수를 공장함수 라고 함.
• 객체의 속성을 this에 대입하고,
  함수 호출시 함수 이름 앞에 new를 붙여 늘 새로운 객체를 생성하는 함수를
  생성자 함수 라고 함.
  생성자 함수 이름은 보통 대문자로 시작.
• 이러한 함수에 객체로 method를 생성할 경우,
  내부에 method를 정의할 수 있지만,
  계속 생성하게 되어 비효율적이라
  함수 외부에 빼서 함수로 만든 후
  그 method를 공유하면 좋다.
• 생성자 함수로 만들 경우,
  함수명.prototype.새로만들method명 = function () {};
  형식으로 만들 수 있다.
  prototype은 생성자 함수로 만들면 생기는 속성이고,
  객체들이 모두 공유하게 되는 속성이다.

this 이해하기

• this는 기본으로 window 객체를 가리키지만
  (그래서 new를 붙이지 않으면 window 객체를 고치게 됨.)
  아닐때가 있다.
• 객체 method로 this를 사용하면 해당 객체.

객체 = {
	method() {
		this....}

• 함수의 this는 bind() 메서드로 값을 바꿀 수 있다.

function method() {
	this...}
method.bind(obj)(); ... 

면 method안의 this는 obj 객체를 가리키게 됨.

• 객체 내 method를 화살표 함수로 하면 그 const만 가리키나,
  함수 선언문(function.. 그거.)을 하면 window 객체가 됨.

클래스로 객체 생성하기

• 형식은 이런식.

class 클래스 이름 {
	constructor(매개변수...) {
	} 
  }

• 클래스는 객체와 method를 한데 쓰기에 좋다.
  ex)

class Monster { 
	constructor(name...) {
		this.name  = name;
	}
	attack(monster) {...

...

클래스 상속하기

• 공통 부분을 모아 만든 클래스를 부모 클래스,
  상속 받는 클래스를 자식 클래스라고 함.
  자식 클래스가 상속받을때는 extends 라는 예약어를 사용.
  공통 속성은 super()로 처리.

class <자식 클래스> extends <부모 클래스> {
	constructor(매개 변수...){
    	super(인수, ...); // 부모 클래스 생성자 호출
        this.매개변수 = 값; // 자식 클래스만의 속성
     }
     메서드(매개변수..) { //부모 클래스 메서드만 호출하면 생략.
     	super.메서드(); // 부모 클래스 메서드 호출
        //이후 동작
     }
    메서드(매개변수...) {
    // 자식 클래스만의 동작
    }
    }

비동기와 타이머

• setTimeout(함수, 밀리초);
  함수가 밀리초 이후 실행.
  시간이 딱 정확하진 않음.
  동기 코드가 모두 실행 되고 난 뒤 실행되어 비동기 코드라고 함.
• setInterval(함수, 밀리초);
  정한 시간마다 주기적으로 지정한 함수를 실행.
• 위 두 함수는 웹페이지가 닫을때까지 계속 실행되어
  중간에 끄는 함수가 필요.
  위 두 함수는 아이디를 반환하므로 그걸로 지워준다.
  clearInterval(아이디);

스코프와 클로저

• 모든 변수는 scope, 범위가 있다.
  var은 함수 스코프, let은 블록 스코프를 가짐.
  함수를 경계로 접근 여부가 달라지고, 블록에 따라 접근 여부가 달라짐.
  블록은 {}, 중괄호로 나뉨.
  const도 블록 스코프를 가짐.
  각 스코프 밖일 때 내부 변수도 사라진다고 생각하면 좋음.
• 클로저(closure)는 외부값에 접근하는 함수.
  모든 함수는 클로저가 될 수 있음.
• 함수가 선언된 위치에 따라 접근할 수 있는 값이 달라지는 현상을
  "함수는 정적 스코프를 따른다" 라고 하고,
  선언이 아니라 호출된 위치에 따라 달라진다면 "동적 스코프를 따른다"라고 한다.

let과 var이 그래서 다른 이유를
for문으로 예시를 든다.
for문에서 let은 블록 별로 변수가 지정되어 잘 되지만
var은 블록으로 나뉘어지지 않아 i가 전역 변수처럼 이미 바뀌어져있음...

for문 대신 forEach등을 쓰는 것도 방법이며
case를 {}로 감싸주는 것도 변수 충돌 예방책.

호출 스택과 이벤트 루프

• 태스크 큐 -> 호출 스택으로 옮기는 이벤트 루프.
  호출 스택이 비어있어야 태스크 큐에 옮김.

재귀 함수

• 호출 스택 최대 크기보다 더 크게 재귀를 하고 싶다면
  비동기 함수를 쓰면 해결.
  예를 들어, setTimeout()으로 감싸고 시작하면 이벤트루프가 처리해줌.

프로미스와 async/await

프로미스

• Promise라는 클래스를 사용하는 문법.
  new를 붙여 Promeis 클래스를 호출,
  인수로 콜백함수를 넣는다.
• 콜백 함수 매개변수는 resolve(), reject().
  콜백 함수 내부에서 함수 둘중 하나를 호출해야함.
  전자는 성공시 호출, 후자는 실패시 호출.
  둘다 호출시 먼저 호출한 함수만 유효.

const <프로미스 객체> = new Promise((resolve, reject) => {
	resolve();
	reject(); 
	});

• 객체에는 then()이나 catch()를 붙일 수 있음.
  <프로미스 객체>.then(콜백함수);
<프로미스 객체>.catch(콜백함수);

전자로 선언을 하고,
이후 then이나 catch로 resolve 등에 넣은 값 받아와서 가능.

• then이나 catch는 연달아 사용도 가능.
  앞선 콜백함수 반환값이 다음 then의 매개변수로 전달됨.
• finally() 메서드도 존재. then, catch 실행이 끝난 후에
  무조건 실행 됨.

프로미스 콜백함수가 그냥 콜백함수보다 우선순위가 높음.

async/await

• 프로미스 객체에 await를 쓰면
  프로미스가 resolve()할 떄까지 기다린다.
  (그냥 비동기 코드에 await가 적용되진 않음.)
  (또 함수 내부에 await만 쓰면 보통 안되므로
  함수 자체를 async 함수로 만들어주어야함.
  async function main() {...같은 형식.)
  화살표 함수도 async 지정 가능.

try-catch 문으로 에러 처리하기

• await에는 에러 처리가 없으므로 try, catch를 쓴다.
  catch는 안 쓴다면 생략은 가능.
  finally문도 가능.

const p1 = new Promise((resolve, reject) => {
	reject('에러!');
    });
 try {
 	await p1;
    } catch {
    console.log('에러인 경우');
    } finally {
    console.log('성공이든 에러든 마지막에 실행됩니다.');
    }

HTML, DOM

• HTML 태그보다 script 태그가 아래에 있어야한다.
  위에서 그려져야 조작할 수 있기때문!

DOM

선택자 사용하기

• document.querySelector('선택자')
  로 HTML 태그를 가져온다.
  모두 사용하고 싶다면 document.querySelectorAll().
  배열처럼 보이지만 NodeList라는 특수한 객체임.
  선택자는 HTML 태그를 가져오게 도와주는 문자열이다.
• 웹브라우저가 현재 페이지 HTML을 자바 스크립트 객체로 구성해두며,
  이를 DOM, document 객체로 조작할 수 있게함.
• id는 재사용이 불가.(자바스크립트 기준이며 HTML은 가능.)
  선택자 id '#아이디'
  선택자 class '.class'
  태그 안 다른 태그 '선택자 내부선택자 ...'

태그의 값에 접근하기

• 태그.textContent 내부 문자열.
  태그.innerHTML 내부 HTML 태그까지 전부 가져오기.
• 입력태그.value 입력 태그의 값을 가져오기.
  입력태그.focus() 입력 태그를 선택. 태그 내부에 커서를 위치하여 입력을 용이하게함.
• input, select, textarea는 value,
  button, div, span은 textContent

이벤트와 이벤트 리스너

• HTML에서 발생하는 이벤트 감지시키는 이벤트 리스너.
• 태그.addEventListener('이벤트 이름', 이벤트 리스트)
  이벤트 연결은 함수명만 넣을것. 소괄호는 넣으면 안됨.
  이벤트 리스트...안에 들어가는 함수도 콜백 함수임.
• 이벤트 리스너는 함수의 매개변수로 event가 존재하며,
  event.target.value 등으로 태그에 입력된 값을 찾을 수도 있음.
• 이벤트 리스너는 타이머와 다르게 일정 시간 뒤에도 백그라운드에서 안 지워지며,
  전체 코드도 종료되지 않음.
  전체 코드를 종료하고 싶다면 이벤트 리스너를 제거하면 된다.
  removeEventListener()로 제거 가능.
  단, 연결한 함수와 제거하는 함수가 같아야함.
  (그래서 연결하는 함수 자체를 변수에 저장해야함.)

키보드/마우스 이벤트

• keyup 키보드를 손에서 뗄 때 발생.
  keydown 키보드를 누르고 있을때 발생.
  그래서 후자는 누르고 있으면 계속 발생하므로 전자 기준이 나음.
  어떤 키를 눌렀는지는 event.key 속성에서 나옴.
• mousemove 마우스 움직임.
  mousedown 오른쪽이나 왼쪽 버튼 클릭.
  mouseup 클릭했다가 뗄때.
  마우스 이벤트 속성에서, x,y 좌표를 얻을 수 있음.
  좌표의 종류는... 책을 봐라 쓰기 귀찮다.
• 마우스의 경우는 클릭한 순간 좌표를 기준으로 삼아,
  뗐을때 좌표와 비교해서 방향을 판단.
• 마우스 좌클릭 이벤트는 click
  우클릭 이벤트는 contextmenu.
  기본 메뉴를 띄우기에 이걸 막으려면 event.preventDefault()메서드를 호출.

이 외데모 모바일 기기는 터치,
마우스 드래그, 스크롤 등의 이벤트도 있다.

이벤트 버블링과 캡처링

• 이벤트 발생시 부모태그에도 동일한 이벤트가 발생하는 현상을
  이벤트 버블링이라고 함.
• 버블링 현상으로 이벤트 처음 발생한 태그가 바뀔 수 있으므로,
  이벤트에 연결된 태그에 접근 시 event.currentTarget을 사용.
• 이벤트가 자식 태그로 전파되어 내려가는 현상을
  이벤트 캡처링이라고 함.

다양한 DOM 속성

• 태그 속성을 자바스크립트로 다를수있음.
  태그.속성 = 값;으로 변경 가능.
  <태그 속성="값">같은 형식으로 되어있음.
• 단, HTML의 class와 자바스크립트의 클래스는 다르므로
  태그.className = '클래스...' 같은 형식 사용.
  그러나 이와 같은 형식은 기존 클래스도 수정할수 있으므로
  태그.classList 객체를 쓸 것. 메서드도 여러가지임.
• 태그.classList.add('클래스'..)
태그.classList.replace('기존 클래스', '수정클래스')
태그.classList.remove('클래스'..)
• style 속성으로 태그의 css 수정도 가능.
  태그.style.css속성 ='값';
• 또 태그별로 자바스크립트에만 속성이 고유하게 존재하기도 함.

부모와 자식 태그 찾기

• 현재 부모태그 찾기
  document.querySelector('').parentNode;
document.querySelector('').childern; 자식 노드 찾기.
  자식은 여럿이 가능하며, 반환되는건 유사배열 객체로 HTMLCollection으로 나옴.
• querySelector()을 연달아 써서 찾을수도 있음.
• HTML에서 form,
  사용자에게 정보를 받아 서버로 정보를 전송하는 양식인 태그를 쓰면
  <폼태그>.<태그 속성값> 등으로 접근 가능.
  $form.name; 같은 형식.

새로운 태그 만들기

• document.createElement() 태그를 만듦.
  document.createTextNode() 텍스트를 만듦.
  이 태그를 기존의 태그 내부에 추가해야 보임.
  부모태그.appendChild(자식태그) 하나만 넣을 수 있음.
  부모태그.append(자식태그, 자식태그...) 여러개 가능.
  후자에서 바로 문자열을 넣어도됨.
• 단 append를 앞에서 호출하면
  create할때마다 화면을 다시 그리기때문에 호출 횟수가 늘어나므로
  다른 태그에 추가하는건 최종적으로 하는게 좋음.
• 명확한 부모 태그가 없다면,
  documentFragment 라는 가상의 태그로 추가하고
  이후 진짜 부모태그에 가상의 태그를 추가하는 방식도 가능.

window 객체

• window는 웹브라우저를 가리키는 객체로,
  웹 브라우저가 제공하는 기본 객체는 대부분 window 객체 안에 있음.
  alert(), confirm(), prompt(), 수학 계산의 Math 객체, 날짜 계산을 돕는 Date 생성자 함수.
• prompt로 값을 받아 반영 가능.
  단, 문자열로만 받으므로 숫자로 쓰고 싶다면 형변환 필요.
• confirm 함수는 확인을 받으면 true, 취소를 받으면 false 받음.
• Math는
  올림 .celi 반올림 .round 내림.floor 을 씀.
  최댓값 .max 최솟값.min 제곱근.sqrt
  무작위 숫자 생성 .random
  단 random 함수가 진짜 무작위는 아니라서 보안으로 쓰면 위험.
  windo.crypto.getRandomValues()를 쓰자.
• 날짜 계산은 Date 생성자. 생성자이므로 new 쓸 것.
  new Date();로 현재 시간 확인 가능.
  월은 0부터 시작함.
  수정하는 함수는 set~ 가져오는건 get~ 검색해라.

이후 실습 파트는
끝말잇기, 계산기까지 진행.

소감

...
이론 정리에 딱 2시간 걸림
하...

근데 이제 다시 보니
이해가 되는 부분이 있다.
역시 복습은 중요해...

오늘의 계획

변경 사항 및 일정

없음.

오전

자객 오륙칠을 봤다...
시즌 3을 다 봤다

낮

공부 해야지 했는데
설문 제출하고
일기 좀 적고

고양이와 두 시간 잤다

저녁

7시에 도착은 했는데
방 청소하고 화장실 청소하느라
강의실 도착은 8시 정도.

목이 좀 칼칼해서
종합 감기약을 먹었고

아마 어제 공부한 거 정리만 해도 2시간은 갈수도 있음
그럼 알고리즘 좀 풀고

컨디션 생각해서 좀 더 하고 싶어도 일찍 자기.

오늘의 다짐

늘 이 단락 오면 멍 때리게 됨