02-18 학습! 🟥🟧🟨🟩🟦🟪🟫⬜⬛🫢🔔😎😊🤔😭⭐
AJAX ⭐⭐⭐
Asynchronous JavaScript and XML
비동기로 처리되는 JavaScript와 XML
화면 갱신 없이 클라이언트와 서버간 XML, JSON, HTML 등 정보 교환
비동기⭐⭐
원래의 흐름과 개별적 동작
Promise
Promise 🟧
callback hell에 대한 대책으로 비동기 작업이 종료된 이후에 결과값과 실패 사유를 처리하기 위한 API
결과값 = fulfilled
실패 사유 = reject
pending 실제 작업을 위한 준비 단계로 Promise 객체 생성 및 fulfill, refect 상황에서 호출할 handler 함수 바인딩
fulfilled 동작이 성공적으로 완료된 상태
rejected 동작이 실패한 상태
promise 객체의 생성과 호출
비동기 작업을 정의하는 producing code와 결과를 활용하는 consuming code로 구분
Promise 함수: 생성자에 executor 함수를 파라미터로 받음
Producing code 🟨
Promise 생성자의 파라미터인 executor 함수 작성
Consuming code 🟨
약속의 결과로 호출되는 코드로 비동기 작업의 결과를 활용하는 코드
Promise#catch(onrejected)
각각의 콜백은 파라미터를 하나씩 받는데 onfulfilled는 Promise가 resolve 되었을 때의 값, onrejected는 Promise가 reject된 이유
promise chaining 🟩
then, catch, finally 함수는 다시 Promise를 리턴 하므로 지속적인 chaining 가능
handler가 특정 값이나 fulfilled 된 promise를 반환하는 경우 - 성공의 case
반대 - 실패의 case
handler가 새로운 promise를 반환하는 경우
promise의 이행 여부와 결과값에 따라 다음 then/catch handler 연결
async~await 🟦
then hell 유발을 막기 위해!
async : 비동기 함수를 동기 함수로 만들 때 사용되며 async가 적용된 함수는 자동으로 Promise가 됨
await : 비동기 코드를 호출할 때 사용
비동기의 동작원리 🟪
JavaScript는 기본적으로 single thread model
EventLoop 와 TaskQueue의 동작으로 비동기 작업 처리
결국 multi thread 처럼 동작하는 것은 브라우저에서 처리하는 것이다
fetch API
JavaScript에서 네트워크 요청을 수행하기 위해 사용하는 API로 Promise 기반으로 비동기 요청 처리
fetch API 요청 🟫
input : 필수 속성으로 정보를 가져올 대상의 URL
init : 옵션 객체로 요청 시 추가로 전달할 내용 설정
fetch API 응답 처리 ⬜
1단계 Response 객체 수신 단계 - 🫢서버가 반응하면 fulfilled 상태!
2단계 Response에서 본문 내용 추출 단계
CORS 오류 처리 ⬛
SOP (Same Origin Policy)
CORS (Cross Origin Resource Sharing)
서버는 Access-Control-Allow-Origin 헤더를 통해 특정 origin에서 오는 요청을 허용하도록 함
강사님 수업 🫢🔔😎😊🤔⭐😭
프론트엔드
XHR 1.open 2.send 3.callback
AJAX 들어가면서 용어가 달라짐
동기 - ssp/servlet
요청이 들어오면 받을때까지 아무것도 안하는 게 동기 (화면이 딸깍딸깍)
요청 순서대로
HTML 이 날라오는 것
VS
비동기
검색창에 입력하면 드랍다운이 쫙 나오는 것 (진짜 서버에는 갔다 온 것임)
요청 순서 상관 없음
단계 단계로 앞의 영향을 받으면서 간다면 비동기 GOOD
데이터 만 날라오는 것
모든 것의 원인 callback - event
(then, 실패)
fetch, AJAX, Axios
전부 promise
데이터가 오는 걸 감지하면
DOM
🤔 다음 중 display block인 건?
옆으로 붙는애들 inline
밑으로 떨어지는 것은 block
🫢 Selector 공부...
🤔 서버와 프론트엔드를 구분하고 동작을 구분해서 이해해야 한다
서버에서 데이터를 만들어서 frontend에 던질텐데 다시 서버에서 처리하는 경우가 있다
생성하는 곳과 소비하는 곳이 다를 때 생기는 것 => 크로스 도메인 - 해결하는데 CORS
크로스 오리진
restful의 약속 동기는 get하고 post
파라미터를 클라이언트에서 서버로
get 방식은 파라미터 깨짐 길이제한 조심
파라미터가 숨어있는 것은 post
form 태그 사이에 submit input
1개의 pk 날릴때만 get 방식 다 보여지고 깨짐 위험 땜시
모든거 찾아 한놈 찾아 get Select
업데이트는 푸시
put update
delete DB 데이터 날려
/ path variable
? parameter variable
fetch의 리턴값은 promise
이해 안되는 개념들 다시 공부하기.. 😭
숙제
프로그래머스 연습
B형 시험 준비
멘토링 하기
졸업식 공가 처리하기
리마인드 설문 제출
