작업(101)
-
21.10.15 Promise
Promise : Callback chain을 쓰지 않고도 비동기 코드를 깔끔하게 쓸 수 있게 해줌. 비동기 실행이 완료된 후에 .then .catch .finally 등의 핸들러를 붙여 데이터처리로직, 에러처리로직, 클린업로직을 실행한다. promise 객체는 fulfilled, pending, rejected 세 가지 상태가 있다. fulfilled : 비동기 실행이 성공한 상태 pending : 비동기 실행이 끝나기를 기다리는 상태 rejected : 비동기 실행이 실패한 상태 Multiple Promise handling : Promise.all() 모든 프로미스가 fulfilled되기를 기다린다. 하나라도 에러 발생하면 모든 프로미스 요청이 중단. Promise.allSettled() 모든 프로..
2021.10.15 -
21.10.15 동기vs비동기 예제 / Callback Hell 체험
동기 비동기 실행과 콜백 기본적인 자바스크립트의 함수 실행 Synchronous callback Asynchronous callback -> 이렇게 하면 Callback으로만 함수를 짜게 된 것. (함수를 부르고 그 안에서 또 부르고..) Callback Hell 예제 UserStorage라는 클래스를 정의 다음과 같은 작업을 수행 id, password를 받아옴. 꾸진 백엔드라고 가정하고 login과 role를 받아올 때 각 2초,1초가 걸린다고 set login role Callback pattern : 비동기 처리 후 실행될 코드를 Callback function으로 보내는 것. Callback Hell)등이 단점으로 부각됨. 따라서 Promise라는 것을 활용해 비동기 처리의 순서 조작, 에러 핸..
2021.10.15 -
21.10.15 자바스크립트 동기 vs 비동기/ main thread /task queue/ /call stack/event loop/ AJAX
자바스크립트 동기 비동기란 웹의 발전 과정 서버에서 모든 데이터를 로드, 페이지 만듦(비동기X) -> AJAX(Asynchronous JavaScript And XML) 기술로 Client-Side로 서버 요청을 보내 데이터 처리 가능하게됨 -> XMLHttpRequest라는 객체로 서버로 요청 값으로서의 함수 1. 함수도 값이다. function a(){} 와 같은 것은 var a=function(){} 로 가능하다는 뜻. function a() {} // var a=function a(){} 함수라고 부른다. //객체 안에 함수가 들어가있으면 메소드라고 부른다. a={ b:function(){ } }; 2. 함수거 객체 내에 있다면 메소드 라고 부른다. 위 같은 상황에서 b는 key(속성, prope..
2021.10.15 -
(완료)21.10.15 리엑트 CRUD 문제집1 - 다음 화면을 보고 코드를 만드시오
1번 첫번째 커밋 정답 더보기 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.querySelector('#root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analy..
2021.10.15 -
21.10.13 4주차 리엑트 - Welcome Homepage와 Login page만들기 로그인 페이지 예제
import React, { useRef } from "react"; import { useHistory } from "react-router-dom"; export default function LoginForm() { const history = useHistory(); const emailRef = useRef(); const passwordRef = useRef(); const submitForm = (e) => { e.preventDefault(); const email = emailRef.current.value; const password = passwordRef.current.value; // DetailPage로 이동하는 코드를 작성하세요. history.push(`/detail?emai..
2021.10.13