react4 [React] fecth & 클래스 ▶ 웹 페이지에 Promises를 사용하여 비동기적으로 데이터를 가져오는 방법 (1) '단일 표현식' 특성 적용한 화살표 함수 const getFakeMembers = count => new Promise((resolves, rejects) => { // executor code const api = `https://api.randomuser.me/?nat=US&results=${count}` const request = new XMLHttpRequest() request.open('GET', api) request.onload = () => (request.status === 200) ? resolves(JSON.parse(request.response).results) : reject(Error(re.. 2023. 11. 4. [React] 동기식 & 비동기식 자바스크립트 ※ 비동기식 자바스크립트 특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행 작업을 백그라운드에 요청하여 처리되게 하여 멀티로 작업을 동시에 처리하는 것으로 보면 된다. ▶ 비동기식 자바스크립트의 필요성 ex) 3개의 텍스트 파일을 순서대로 읽어와 콘솔에 출력하는 프로그램 구현 ▷ 위와 같이 우리가 원하는 출력결과를 위해 아래와 같은 코드를 작성함. require() 함수는 모듈을 로드하는데 사용되는 함수 require('fs')는 파일 시스템 모듈을 로드하는 과정 fs는 파일 시스템 모듈에 해당 ▷ 우리가 예상했던 출력과 동일할까? 아래와 같이 순서가 뒤죽박죽이 되어 출력이 된다. fs.readFile()과 달리 console.log()은 순서대로 출력됨. fs.readFile()은 순서가 보장.. 2023. 11. 4. [React] 구조 분해 & 객체 리터럴 & 스프레드 연산자 ※ 구조 분해 (destructuring) 객체 안의 필드, 배열을 구성하는 원소를 변수에 쉽게 대입할 수 있도록 활용 ※ 객체의 구조 분해 할당 const { var_name } = object_name; 반드시 객체의 필드 이름과 변수의 이름이 같아야 함. 중괄호 { } 안에 여러개의 변수가 들어갈 수 있으며, 순서는 상관없음 ex) 객체의 구조분해 할당 예시 객체를 구조 분해하여 할당한 변수의 값을 변경하여도, 객체 원본의 값은 변하지 않음. ▶ 객체를 구조 분해하여 함수의 인자로 받는 경우 (1) 기존 함수 인자에 객체를 받는 방식 (2) 객체 구조분해 후, 인자로 받는 방식 화살표 함수 ({firstname}) => 에서 매개변수가 1개이지만 괄호( ) 생략 불가 => 함수 body 부분도 아닌.. 2023. 11. 3. [JavaScript - React] JavaScript & React의 기본 ※ React 란? 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 UI 라이브러리로써, 사용자 인터페이스를 구현하기 위해서 사용 페이스북 엔지니어 '조던 워크' 가 만든 오픈소스 프로젝트 MVC 애플리케이션의 View에 관련된 영역만 담당 View : 사용자에게 보이는 부분 (사용자 인터페이스 영역) 컴포넌트 기반 라이브러리 => '재사용성' 향상 Virtual DOM 사용 ※ ECMAScript & JavaScript ES (ECMAScript) => ECMA-262 규격에 의해 정의된 범용 스크립트 언어 ECMA-262: 범용 목적의 스크립트 언어, JavaScript를 표준화하기 위해 개발 JavaScript ECMAScript 사양을 준수하는 스크립트 언어 ECMASCrip.. 2023. 11. 2. 이전 1 다음
