코딩/React 본 캠프 (43) 썸네일형 리스트형 promise, async, await promise비동기 작업의 최종 완료 또는 실패를 나타내는 객체 api 를 요청하고 응답을 받기로 약속이 되어 있을 때의 과정pending (대기중) : 초기 상태로, 응답을 받기 전 성공 또는 실패가 결정되지 않은 상태fulfilled (이행됨) : 응답이 성공적으로 완료되어 promise 가 결과 값을 반환한 상태rejected (거부됨) : 응답이 실패하거나 오류가 발생한 상태promise 객체를 사용하면, 비동기 작업의 결과에 따라 콜백 함수를 연결할 수 있고, .then(), .catch(), 그리고 .finally() 메소드를 이용해 연속적으로 결과를 처리할 수 있다. async 함수의 정의async 함수는 async 키워드를 함수 선언 앞에 붙여 정의한다. 이 함수는 항상 promise 를.. ES6 Modules 모듈es6 에서는 export 키워드를 사용하여 모듈을 만들고, 다른 파일에서 사용할 수 있게 한다. 모듈은 재사용할 수 있는 함수, 객체 또는 원시 값을 의미한다. export, import 사용하는 이유명확한 종속성 관리코드 캡슐화와 충돌 방지효율적인 코드 로딩 화살표함수, 조건(삼항)연산자, 단축평가 화살표함수const add = function() { return a + b;} = const add = () => { return a + b; } = const add = () => a + b;return 이 한줄인 경우에는 중괄호와 return이 필요없다. 조건연산자 = 삼항연산자const score = 85;const grade = score >= 80 ? "A" : "B";? 앞에 조건을 붙히고 같거나 맞으면 "A" 를 다르거나 틀리면 "B" 단축평가논리합연산자 ( || )falsyfalsy : false, 0, "", null, undefined, NaNconst getUserName = (user) => user.name || "신원미상"논리곱연산자 ( && )truthy.. Destructuring, Spread Operators, rest destructuring (2)const movie = { title: "Inception", director: "Christopher Nolan", release: { year: 2010, month: "July" }}; 객체 안의 객체를 구조분해할당을 하려면 아래처럼 하면 된다.const { title, release: { year } } = movie; Spread Operators객체나 배열을 복사,합칠 때 많이 쓰인다 const originalUser = { name: "르탄이", age: 28,}; // const updatedUser = originalUser;const updatedUser = { ... original.. template literals, destructuring Template Literals변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법( `` 빽틱 )const customer = { name: "르탄이",};const item = { name: "커피", price: 4000,}; console.log(`감사합니다. ${customer.name}님!`); const orderDetails2 = `고객 : ${customer.name}상품 : ${item.name}가격 : ${item.price}`; Destructuring구조를 찢어내는 것객체const item = { name: "커피", price: 4000,}; // const name = item.name;// const price = item.price; const .. [개인학습 시작 2일차] 객체, 배열 React 입문 복습 객체 : key-value JSON : JavaScript Object Notation const user = { name : "르탄이", age : 30, isAdmin: true,}; // 접근 ● 괄호 표기법const attribute = "name";console.log(user[attribute]); ● 점 표기법console.log(user.name); console.log(user.age); user.email = "jay@gmail.com"; // 추가user.age = 31; // 수정delete user.isAdmin; // 삭제불변성이 깨짐불변성을 유지하는 것은 중요하다 ● const keys = object.keys(user); // keys 를 뽑을.. [개인학습 시작 1일차] 이번주 목표Javascript 문법 4주차 콜백함수 마무리 완강React 입문 1주차 복습 어제부터 개인학습 시작해서 이것저것 하다보니 시간이 다 가서 Javascript 완강하고 React 입문 1주차 강의를 보다가 끝 어제 강의에서 동기/비동기 async/await 를 들었고 비동기의 동기적 처리에 대해서 복습했던 시간이 됐던 것 같다.(본 캠프 15일차 게시물 참조) [본 캠프 39일차] React 심화 강의(axios, tanstack query, zustand, ...) 동기와 비동기의 개념 동기 : 요청과 그에 따른 응답이 순차적으로 일어나는 방식 (순서대로 하나씩 일을 처리하는 것) - for문은 동기적으로 동작한다 비동기 : 여러개를 한번에 일을 처리하는 것 - setTimeOut ~~ 1000) 1초뒤에 실행되니 그 다음 코드를 비동기적으로 실행한다. - fetch 로 외부데이터를 가져오면 비동기적으로 처리한다. 동기 비동기 완벽히 이해하기 위해선 Promise 객체를 잘 이해해야만 한다. Promise : 자바스크립트에서 비동기 작업의 완료(Fulfilled) 또는 실패(Rejected)를 처리하기 위해 사용대기(Pending) : 초기 상태. 즉, 이행되거나 거부되지 않은 상태이다. 이행(Fulfilled) : 비동기 작업의 성공적으로 완료된 상태 거부.. 이전 1 2 3 4 ··· 6 다음
