React4 [JavaScript] 비동기 처리 (Axios, Promise, Fetch, Async/Await) 비동기 처리란? 비동기 처리(asynchronous processing)는 프로그램이 작업을 수행하는 동안 다른 작업을 동시에 처리할 수 있는 방식이다.비동기 처리를 사용하면 프로그램이 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 계속 수행할 수 있다.비동기 처리 방식1. Axios정의 Axios는 JavaScript 라이브러리로, 웹 브라우저와 Node.js 환경에서 HTTP 요청을 쉽게 보내고 받을 수 있게 도와준다.API와의 통신, 즉 데이터를 서버로 전송하거나 서버에서 데이터를 받아오는 작업을 간편하게 할 수 있도록 설계되었다.용도API 호출: 외부 API에서 데이터를 가져오거나, 외부 서버에 데이터를 전송할 때 사용한다.데이터 전송: 사용자 입력 데이터나 파일을 서버로 전송하는 작업에.. 2024. 10. 12. 리액트 실행 흐름 [ Index.js, App.js, Index.html ] 🔥 3개의 파일은 creat-react-app 하면 자동으로 파일이 생성된다🔥 public 폴더 안에 index.html 파일이 src 폴더 안에 App.js, index.js 파일이 있다 🔥 index.js제일 상위자이며 가장 먼저 react에서 실행되는 파일이다메인 프로그램이다// 필요한 부분만 작성import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(, document.getElementById('root')); 🔥 App.js컴포넌트를 정의하는 프로그램이다// 필요한 부분만 작성function App(){ // App() >> 'JSX문법' return .. 2024. 7. 12. create-react-app(CRA) 정리 ✏️ create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해 주는 Boiler Plate이다복잡한 초반세팅 없이 간단하게 React 프로젝트를 구성할 수 있다create-react-app를 축약해 CRA이라고도 부른다✏️ create-react-app 장점개발자들이 많이 사용하는 라이브러리 등이 대부분 세팅되어 있어서 이후 필요한 라이브러리만 추가로 설치해 주면 된다✏️ create-react-app 단점웹팩(Webpack), 바벨(Babel), 린트(Eslint) 등 세부 설정이 package.json 안에 숨겨져 있어 구성요소들을 세부 설정이나 수정하기 위해서는 *eject 하여 숨겨진 설정들을 밖으로 꺼내야 한다는 것이 익숙하지 않으면 다소 힘들고 어렵다는 점.. 2024. 7. 8. 맥으로 npm을 사용해서 React 설치하는 방법 내가 설치한 방법은 npm을 이용해서 바로 create-react-app을 설치하는 방법으로 생활코딩에서 하는 방법을 따라 했다 공식적으로 권장하는 방법은 npx 도구를 사용하는 방법이다 npx create-react-app 1. nodejs.org 홈페이지에서 먼저 설치하기 2. 터미널에서 npm -v 를 작성했을 때 숫자가(설치한 버전) 나오면 성공적으로 설치된 것! 3. 터미널에서 npm install -g create-react-app 이라고 작성하면 실행이 되는데 만약 권한이 없을경우 Error:EACCES 가 뜨게 된다. 그럴 땐 앞에 sudo를 붙여서 sudo npm install create-react-app로 작성해준다 컴퓨터에게 create-react-app를 설치해달라고 하는 것 -g.. 2022. 4. 2. 이전 1 다음 728x90