드디어 평일 마지막 금요일..!
다음주 월요일까지 과제제출인데.. api만들다가 벽느껴서
2일차엔 개인과제를 멈추고 강의를 들었었다.
오늘부터 부랴부랴 주말 포함 개인과제 제대로 스타트!!

오늘의 목표

1. 개인과제 api 해결하기
2. 기본 구조는 다 만들기
3. 만약 아주 만약 기능구현 다 끝내면 css 신경쓰기

*

css 전체 선택자
태그,속성명,속성값,클래스,아이디 등 모든 요소가 선택됨
but 속도를 느려지게 해 사용을 피하는 것이 유리

boxing-sizing

보통 boxing-sizing : border-box / content; 두가지가 많이 사용

content는 따로 설정한 width * height 크기만큼 형성
즉, border나 padding을 추가하면 정해진 box크기가 그만큼 더 커진다

border-box같은 경우 전체 box크기는 그만큼 커지진 않고 사용자가 지정한 너비나 높이만큼 길이에 맞춤. 즉 지정한 width값이나 height값에 포함

margin:0, padding:0

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
// body {} 안에 넣어도 가능

box-sizing을 border-box로 넣었기 때문에 큰 틀의 전체여백을
지우기 위해 margin:0, padding0으로 적용했음

padding - border까지가 요소인데 요소 내의 내부 여백
margin - border밖의 외부 여백

id, class 차이

class - 같은 유형으로 반복되는 태그들을 유형별로 분류할 때 사용
id - 전체 페이지에서 단 하나의 요소에만 지정이 가능

innerHtml

HTML에 JS언어로 만든 데이터를 출력하려면 관련 명령어를 사용

document.write()
:()안에 것을 화면에 출력하는 메서드
window.alert()
:경고창을 띄워 ()안의 것을 출력하라는 메서드
innerHTML=""
:ex) 홍길동이라고 출력한 html요소를 이순신으로 바꿔 출력하게 만드는 속성 / js에선 이 html요소에 접근하려면 document.getElementById 메서드 함께 사용

innerHtml / innerText

innerText - html코드가 문자열 그대로 element에 포함

innerHtml - html element(요소)가 element안에 포함
QuerySelector로 가져온 document 오브젝트 내용이나, 내부 Html 코드를 js코드에서 변경할 수 있음
ex) 홍길동 -> 이순신으로 출력

QuerySelector

Jquery문법 / 당장 과제에 적용하면 안되니 나중에 또 나오면 제대로 다룰 예정 ㅠㅠㅠ(당장 익힐게 너무 많다..)

export, import

설명 전 코드 크기가 커지면 파일을 여러개로 분리해야 하는 시점이 옴. 이때 분리된 파일 각각을 모듈이라 부르는데,
대게 모듈은 클래스 혹은 특정 목적을 가진 복수의 함수로 구성된 라이브러리로 구성
예를들어 A라는 js에서 만든 변수를 밖으로 내보낼 때 export, B라는 js에서 A에 있는 변수를 사용할 때 import 사용

JS에서 함수, 객체, 원시 값을 내보낼 때 사용 / 다른 프로그램에서 import문으로 사용

지금 배울게 많은데 벌써 모듈까지 생각하면 머리가 아프므로,
일단은 이정도 개념까지만 생각해두겠다.

async, await

동기

위쪽의 코드가 끝나면 그 다음 코드 이런식으로 순서대로 작동하는 방식(하나가 끝나면 그다음)
요청을 보내고 응답을 받아야만 다음 동작이 이뤄짐

비동기

특정 코드 끝날때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행
(하나가 안끝나도 그 다음 코드도 동시에 실행 할 수 있음)
요청을 보내고 응답의 수락 여부와 상관없이 다음 동작이 이뤄짐(콜백함수 관련)
비동기적 처리를 위해 콜백 패턴을 사용하면 중첩되어 복잡도가 높아지는 콜백지옥이 발생

콜백지옥

가독성 나쁘고 실수 유발하는 원인

Promise

비동기 처리를 <ex)콜백함수 패턴>의 단점을 보완하면서 비동기 처리 시점을 명확하게 표현할 수 있음

promise 생성자 함수를 이용하는데,
이 함수는 비동기 작업을 수행할 콜백 함수를 인자로 받으며,
resolve와 reject 함수를 인자로 전달받는다

const promise = new Promise((resolve, reject) => {
	if(//비동기 작업 수행 성공) {
    	resolve('result');
    } else { //비동기 작업 수행 실패
    	reject('failure reason');
	}
});    

자 굉장히 빡센 이론 개념 정리 드간ㄷ~~!!!

promise는 개발자로서 따로 규정한 약속이 있는거라 생각하자
(함수를 이용하면 결국 new Promise 객체를 도출하는거라 생각)
첫번째 인자 resolve는 성공시 콜백함수
두번째 인자 reject는 실패시 콜백함수
라고 인지하면 된다.
promise를 api쪽으로 연관지어 생각하면,
언제 그 코드의 응답 수락여부를 돌려줄지 모르는데 막 다른거 먼저 실행되면 에러가 뜰 수 있으므로 제어를 할 수 있다고 생각하자

후속 처리 메소드 중

then

두 개의 콜백함수를 인자로 전달 받음
첫 번째 콜백 함수는 성공 시 호출,
두 번째 콜백 함수는 실패 시 호출
then 메소드는 promise를 반환한다!!!

catch

예외 상황이 발생하면 호출됨. promise를 반환!!

async

function 앞에 사용 해당 함수는 항상 promise를 반환
promise가 아닌 값을 반환하더라도 이행된 promise가 반환되도록 함

await

async 함수 안에서만 동작
promise가 처리될 때 까지 기다리는 역할
결과는 그 이후 반환

async await 에러 제어

try... catch를 사용함
(나중에 다시 다루기)

//## ul, li, ol
ul - 순서가 중요하지 않은 리스트
ol - 순서가 중요한 리스트// 다시 검색

ul,ol {list-style: none;}

list-style : none으로 하면 앞에 점이 사라진다

script src="01.js" type="module"

여기서 type=module이 들어간 이유는 분석해보건데,
js쪽에서 비동기 -> 동기적 처리를 위해서 async / await 메소드를 사용했는데,
그 비동기를 동기적 처리를 구현하기 위해 기재했다고 생각하자!

오늘 한 일

1. 이전에 해결못한 1,2,4 해결

   1)가장 상단 '내배캠 ~~콜렉션' 부분의 배경에 파란색 배경이 살짝 나와있다
   2)영화 검색 : 이후 띄어쓰기 없이 input이 나온다
   3)영화 이미지가 밑줄 이후 띄어쓰기 없이 바로 나온다
   4)영화 api구현이 안된다
   5)구현이 안되어서 카드 정렬도 못하고 있다

2. promise, 비동기,동기 쪽 나름 개념 확보!!!!

주말동안 할 일

과제 마무리(검색기능 / 카드 정렬)

오늘의 성장

비동기, 동기쪽, promise, async 쪽 개념 어려웠지만 나름 많이 알게되었고, api 코드를 주변의 도움을 받아서 실행했지만, 나름 코드를 보고 분석은 될 수준까진 된 것 같다.

앞으로 익혀야 할 것들

dom 강의 듣기
grid, bearer, addEventLisner(unsubmit), onclick 알아보기

앞으로 목표

하나를 완벽히 파는게 아닌 조금씩 조금씩 다양한 개념들을 흡수하면서 성장형 개발자가 되려고 노력하기