export default function ResultGraph() { const [firstResponse, setFirstResponse] = useState(""); const context = useContext(UserContext); //CORS : Cross Origin Resource Sharing 교차 출처 리소 스 공유 // 도메인과 포트가 서로 다른 서버로 client를 요청했을 때 브라우저가 보안상 이유로 API를 차단하는 문제. ex client는 8080포트, server는 9000포트일 때. //나는 지금 백엔드 없이 프론트React만 사용하므로 요청받는 server에서 모든 요청을 허가한다든지 백엔드에 cors 패키지를 설치해 미들웨어로 처리한다든지 할 수 없다. useEff..

// Promise란 : 비동기 작업의 단위 // 비동기 작업이 성공 : resolve 호출 // 비동기 작업이 실패 : reject 호출 // then : 해당 Promise가 성공했을 때 후속 조치 동작, 인자로 함수 받음 // catch : 해당 Promise가 실패했을 떄 후속 조치 동작, 인자로 함수 받음 // 1. resolve란 const promise1 = new Promise((resolve, reject) => { resolve(); }); promise1 .then(() => { console.log("비동기 작업 성공ㅋㅋ"); }) .catch(() => { console.log("비동기 작업 실패 ㅠㅠ"); }); //콘솔 결과 비동기 작업 성공ㅋㅋ // 2. reject란 con..

아 진짜.. state로 input입력받는데 안되가지고 짜증나 죽는 줄 알았다. 저 같은 분들 삽질하지 말고 찾아쓰시라고 생각나는 키워드 다 적어서 제목에 적었다. {'B1':'1', 'B2':'3', 'B3':'5' } 내가 원하는 것 {currQuestionNum: '3'} 나온 결과 https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-JSON%EA%B3%BC-JavaScript-Object%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90 [개발상식] JSON과 JavaScript Object의 차이점 안녕하세요. 김용성입니다.정말 비슷하게 생겨먹은 녀석들이 존재합니다. 바로 흔히들 사용하는 JSON(JavaScript ..

async ( Promise를 더 간략하게 ) 만약 비동기적 처리를 해주지 않으면 자바스크립트는 싱글쓰레드기 때문에 딱 이 코드를 보자마자 자바스크립트는 fetchUser를 Call하고 100초동안 사용자는 아무것도 못하고 계속 기다려야 한다. -> Promise를 사용 Promise는 resolve, reject를 통해 완료해주지 않으면 계속 pending 상태 await ( async 내에서 ~할 때까지 기다려! return값을 반환해주는 함수 ) 그러나 저 pickFruits 부분에 return then return then으로 또 Callback 지옥이 생각 난다... 따라서 async로 더 간단하게 만들어보자. 병렬 처리 Promise는 만들자마자 저 안에 코드가 실행되기 때문에(바로 getAp..

Promise : Callback chain을 쓰지 않고도 비동기 코드를 깔끔하게 쓸 수 있게 해줌. 비동기 실행이 완료된 후에 .then .catch .finally 등의 핸들러를 붙여 데이터처리로직, 에러처리로직, 클린업로직을 실행한다. promise 객체는 fulfilled, pending, rejected 세 가지 상태가 있다. fulfilled : 비동기 실행이 성공한 상태 pending : 비동기 실행이 끝나기를 기다리는 상태 rejected : 비동기 실행이 실패한 상태 Multiple Promise handling : Promise.all() 모든 프로미스가 fulfilled되기를 기다린다. 하나라도 에러 발생하면 모든 프로미스 요청이 중단. Promise.allSettled() 모든 프로..

동기 비동기 실행과 콜백 기본적인 자바스크립트의 함수 실행 Synchronous callback Asynchronous callback -> 이렇게 하면 Callback으로만 함수를 짜게 된 것. (함수를 부르고 그 안에서 또 부르고..) Callback Hell 예제 UserStorage라는 클래스를 정의 다음과 같은 작업을 수행 id, password를 받아옴. 꾸진 백엔드라고 가정하고 login과 role를 받아올 때 각 2초,1초가 걸린다고 set login role Callback pattern : 비동기 처리 후 실행될 코드를 Callback function으로 보내는 것. Callback Hell)등이 단점으로 부각됨. 따라서 Promise라는 것을 활용해 비동기 처리의 순서 조작, 에러 핸..