보다 나은 내일, 다이어리

콜백함수? 다른 함수의 인자로 넘겨지는 함수.

매개변수로 받는 함수가 콜백함수.

익명함수로 즉석에서 만든 함수도 콜백함수.

1, 2, 4가 콜스택에 있다가 실행된 뒤에 3초뒤에 3이 콜스택으로 들어와서 실행됨. => 1, 2 4, (3초 뒤에) 3

콜백함수를 이용해서 동기적으로 코딩할 수 있음. => 1, 2, (2초 뒤에) 3, 4

함수를 인자처럼 사용하려고 콜백을 쓰는 것이라고도 생각하자.

callback.js promise.js 

Promise의 3가지 상태

: pending(준비), fulfilled(이행), rejected(거부)

Promise를 이행상태로 만들어야 then을 사용할 수 있는 것이다.

new Promise()가 처리하는 쪽 (되면 resolve, 안되면 reject)

.then()은 Promise가 resolve를 호출했기 때문에 then()으로 들어오는 것. 요청하는 쪽.

두 쪽 모두 성공하는 경우와 실패하는 경우가 있어야 함.

**fetch가 Promise이다.

만약에 함수의 매개변수와 return문의 함수에 쓰이는 매개변수가 같으면 함수만 작성해도 됨.

return과 break의 차이는?

return은 반복문을 종료시킬 수도 있지만 반복문을 감싸고 있는 함수가 있다면 함수 자체를 종료시킨다.

break는 반복문을 실행하다가 그 즉시 실행을 멈추고 반복문을 종료시킨다.

continue는 명령을 건너뛰고 다음 명령으로 이동한다.

개발자 모드에서 네트워크에서 서버와 브라우저가 통신하고 있는 것을 볼 수 있다

이고잉님 강의자료

https://docs.google.com/document/d/1bzKpUgF2fTlo3wA-qxyfg1Mqi6A5O9LhQDY-0JlXpGQ/edit#

json-server 레포지토리 사이트

https://github.com/typicode/json-server

fetch() cheetSheet

https://devhints.io/js-fetch

Json placeholder

https://jsonplaceholder.typicode.com/guide/

JSON.stringify()는 json으로 인코딩한 것이고 (객체 타입 -> 텍스트로 전환)

JSON.parse()는 원래 데이터 타입으로 디코딩한 것입니다. (텍스트 -> 객체로 전환)

JSON을 만든 사람의 사이트 주소?

https://json.org/json-ko.html

웹브라우저가 서버에게 이 데이터 타입은 JSON이라고 알려줄 때 사용하는 것?

rest API

데이터가 resource , 그 데이터를 수정하는 방법들이 method (디폴트는 GET)

데이터 중에 특정한 데이터 하나를 가지고 오고 싶다면 그 한 건은 element

함수는 1급식이지만 if문은 2급식

setTimeout(function() { alert(1); }, 1000)

함수의 인자로 전달된 함수 : 콜백함수

fetch API 

내가 사용하는 함수의 리턴값이 Promise라면?

1. promise는 then을 호출하면 된다.
2. 이 then에는 함수를 넣어주면 된다. (=콜백함수)
3. 그 함수는 이 작업이 성공했을 때 호출될 것이다
4. 그 함수의 첫번째 파라미터엔 데이터가 들어가 있다.
5. then은 두개의 파라미터가 있다. 
6. 첫번째 파라미터는 성공할 때 실행되고, 두번째 파라미터는 실패할 때 실행될 것이다.
7. 두번째 함수의 첫번째 파라미터에는 실패한 이유가 들어있을 것이다.

여기서 data는 response 객체이다. 서버가 응답한 정보들이 다 정리정돈돼서 우리에게 오는 것이다,

이 data를 JSON객체로 컨버팅해서 받고 싶다. -> 그러면 리턴한 값이 Promise이다

data.json도 비동기 작업, promise 작업이 이루어지고 then을 호출하는 것이다.

그런데, 너무 Promise로 리턴을 하게되면 then hell promise 현상이 발생할 수 있다.

생활코딩 promise 수업

https://www.youtube.com/watch?v=Sn0ublt7CWM 

생활코딩님 강의트리인 서말을 자주 이용하자...!!!!!!!!!!!!!!

https://opentutorials.org/course/3083

https://seomal.org/

FormData?

form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공함.

FormData를 구현하는 객체는 entries()대신 for..of 구조를 직접 사용할 수 있다.

생성자: FormData()

for of 반복문으로 formData의 내부를 확인해보니까 각 요소들이 배열의 형태로 k-v쌍으로 들어가 있는 걸 확인할 수 있었다. formData 자체는 반복가능한 객체이다.

참고: for..of 명령문은 반복가능한 객체에 대해서 개별 속성값에 대해서 반복함.

참고: https://developer.mozilla.org/ko/docs/Web/API/FormData

formData객체를 key-value쌍을 이루는 하나의 객체로 만들기. (더이상 반복가능한 객체가 아님) 

Array.from() ?
유사배열 객체나 반복가능한 객체를 얕게 복사해 새로운 Array 객체를 만듬

formData.entries() ?

객체에 포함된 모든 k-v쌍을 통과하는 iterator를 반환.

참고: https://developer.mozilla.org/ko/docs/Web/API/FormData/entries

저 코드 상에서 Array.from을 사용하지 않으면 에러가 나오는데 그 이유는 뭘까?

formData.entries()를 할 때 그것은 구조상 array 같아보이지만 사실 그렇지 않다.

=> 유사배열로 이해하면 될 것 같다

NodeList 유형의 프로토타입을 보면 reduce 메서드가 없다는 걸 알 수 있다. 그래서 Array.from으로 전달해준다면 적절한 배열로 반환되고 reduce, map, 등 기타 배열관련 함수를 사용할 수 있게 된다!!

참고: https://stackoverflow.com/questions/38598801/map-reduce-is-not-a-function/38598861

유사배열이란?

DOM type은 배열처럼 보이지만 타입은 object이고 심지어 배열과 비교해보면 false가 출력된다.

배열이 아닌데 배열인 척 하는 것을 유사배열 혹은 유사배열 객체라고 부른다.

선언은 객체처럼 하고 반드시 length를 가져야 한다는 특징이 있다.

참고:https://kamang-it.tistory.com/entry/JavaScript15%EC%9C%A0%EC%82%AC%EB%B0%B0%EC%97%B4-%EA%B0%9D%EC%B2%B4Arraylike-Objects

formData = {principal: 1, rate: 2, year: 3, frequency: 1}
const {principal, rate, year, frequency} = formData
{
        principal : Number(principal),
        rate: Number((rate / 100).toFixed(2)),
        year: Number(year),
        frequency: Number(frequency)
 }

객체로부터 key 값을 한번에 가져와서 각 value 값을 한번에 바꿔줄 수 있다

IIFE?

즉시 호출 함수 표현식.

주로 이름 충돌 최소화 및 private 변수 생성에 사용되는 자바스크립트 디자인 패턴 이다.

참고 사이트 : https://velog.io/@bisu8018/JS-IIFEImmediately-Invoked-Function-Expressions-%EB%9E%80

 //함수 단축 표현식으로 함수 리터럴을 사용하는데
  const time = function ()  {
    let min = 60;
    let hour = min * 60
    let day = hour * 24
    let week = day * 7
    let month = week * 4
    let year = month * 12
    
    return {min, hour, day, week, month, year};
}

console.log(time) //실행을 할 때 func로 만 출력하면 그 함수의 순수 코드내용이 보이게 된다.
// ƒ ()  {
//     let min = 60;
//     let hour = min * 60
//     let day = hour * 24
//     let week = day * 7
//     let month = week * 4
//     let year = month * 12
    
//     return {min, hour, day, week, month, year};
// }
console.log(time()) //실행을 할 때 func()로 출력해야 그 함수가 실제로 동작된 내용을 볼 수 있다.

IIFE (즉시 호출 함수 표현식)을 접했는데 이 표현식을 사용하지 않고 함수를 사용하는 방법엔 어떤 것이 있을지 뚱땅대다가 함수 단축표현식으로 함수리터럴을 만들었을 때의 사용법을 알게 됐다!

IIFE로는 time 상수를 선언한 마지막에 함수 호출 기호인 ()를 추가해주면 된다.

즉시 실행 함수는 그 즉시 실행된 뒤에 전역에서 사라진다. -> 전역변수 사용을 억제해준다

클로져를 활용한 타이머 구현하기
출처: https://webisfree.com/2015-07-07/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%ED%81%B4%EB%A1%9C%EC%A0%80%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-settimeout%EC%9D%84-%EC%8B%A4%ED%96%89%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

클로저?
외부 함수 안의 지역변수는 종료되어도, 내부 함수에서 사용될 수 있다.

외부 함수 안의 객체 안의 메서드로 된 함수도  내부함수이다.
외부 함수에 전해지는 매개변수가 있다면 이 매개변수는 외부 함수의 지역 변수가 되기 때문에 이것 또한 클로저로 작용할 수 있다 있다.

외부 함수에서 객체가 리턴됐을 때 객체의 메소드 함수가 있다면 이제 외부 함수의 지역 변수 또는 매개변수에 접근을 할 수 있는 권한은 이 객체의 메서드 함수에서만 가능한 것이다.

추가사항)
typeof 변수로  변수의 타입 값을 알기 위해서는 item typeof  string 이런 식으로 사용된다.
여기서, s가 대문자로 된 String이라면 1은 문자열이라고 인식을 안 하지만, 만약에 hi every라고 해도 문자열로 인식을 한다.
그렇기 때문에 String가 아니라 string로 표시를 해야 진정하게 우리가 원하는 문자열로(특수문자등이 포함되지 않은?) 판별할 수 있다.

공부출처: 생활코딩

DOM의 노드를 공부하다가 여러개를 시도해 봤다.
그런데 head와 body 사이에는 아무것도 없는데 대체 왜 text로 찍히는 걸까 의문점이 생겼다

text는 바로 줄건너뜀의 형식인 \n이었다...! 줄 건너뛸 때마다 text가 생긴 이유가 여기 있었구나.

nodeType은 node의 type을 상수로 리턴합니다.

출처: https://hianna.tistory.com/412 [어제 오늘 내일]

toggle( String [, force] )
하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.
출처: https://developer.mozilla.org/ko/docs/Web/API/Element/classList

firstChild vs firstElementChild
firstChild -> 요소노드, 텍스트 노드, 주석 노드로 반환한다
firstElementChild -> 요소노드로만 반환한다
그래서 HTML code 반영을 위한 접근을 위해서는 firstElementChild를 쓰자

animate의 속성들 알아보기 - fill mode에 대해서

innerHTML vs textContent

엘리스 수업떄 들었던 파일들을 하나하나 깃랩에 커밋했다. 그런데 js 폴더에서 .git을 해버려서 그전의 강의에서 했던 파일들도 깃랩에 업로드를 하고 싶었다. 그래서 push를 하려고 하니까 이런 오류가 계속 떴다

https://iambeginnerdeveloper.tistory.com/entry/github-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-error-failed-to-push-some-refs-to-warning-LF-will-be-replaced-by-CRLF-in-%EA%B0%95%EC%A0%9C-push-%ED%95%98%EC%A7%80%EB%A7%88%EC%84%B8%EC%9A%94%EC%A0%9C%EB%B0%9C

구글링하다가 위 사이트에게 도움을 많이 받았다...!

https://sosoeasy.tistory.com/406

위 사이트는 내가 난 오류가 왜 난 건지 그림으로 자세히 설명해주셨다!

일단 js 폴더에서 origin을 제거하고 .git 폴더를 삭제해줬다. 

그리고 web 폴더에서 깃랩의 http코드를 clone해주고, pull 해줬다. 

각종 블로그글을 찾아봤을 때 원격저장소에 있는 파일과 로컬저장소의 파일이 다를 때 저런 오류가 뜬다고 했다.

그래서 일단 web폴더의 파일을 원격저장소와 같게 만들어줬다. 그리고 add하고 commit을 해줬다.

그런데 이렇게 했는데도 git push가 되지 않았다. 

**해결책

git pull origin master --allow-unrelated-histories

pull만 하는 게 아니라 뒤에 옵션도 더 붙였어야 했다. (로컬저장소와 원격저장소의 병합을 허용한다는 의미, 강제로 pull하겠다!)

master -> FETCH_HEAD에서 오류가 났다는 메시지.

FETCH_HEAD가 뭔지 궁금해서 검색해 봤다.

FETCH_HEAD => 원격 저장소에서 가져온 내용을 추적하기 위한 단기 참조.

git pull은 git fetch와 git merge를 합친 동작이라고 배웠다. 

FETCH_HEAD는 원격저장소에서 가져온 분기의 끝을 가리킨다. 그 다음 git merge FETCH_HEAD를 호출해서 FETCH_HEAD를 현재 분기에 병합하는 방식으로 동작한다. 그래서 원격저장소의 마지막 commit을 로컬 저장소의 commit 로그 맨 앞으로 받아온다.

기본적으로 merge는 원격저장소와 로컬 저장소가 공통으로 가지고 있는 commit 지점이 존재해야 한다. 그 지점부터 병합을 시도하기 때문이다! 그런데 애초에 나는 공통되는 commit이 없기 때문에 pull 을 사용할 수 없는 것이다..

해결책: 공통된 커밋 포인트가 없기 때문에 pull 명령어에 옵션을 추가해 강제로 pull하는 방식

참고: https://jobc.tistory.com/177

이렇게 하고 add,commit하고 push를 하니 잘 작동이 되었다! 아싸