React 4

Axios란?node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트.서버와 통신하기 위해 사용된다. ✅ Axios의 특징HTTP 요청 처리를 한다.Promise 기반이라 비동기 요청에 용이하다.운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 Http Api를 사용한다.HTTP 요청과 응답을 JSON 형태로 자동으로 변환해 준다.  Axios 사용 방법먼저 axios를 사용하기 위해 아래의 명령어를 사용해 axios를 설치한다.npm install axios   axios(config)기본 문법은 위의 형태이고, HTTP 요청을 보낼 때 보내는 요청에 대한 설정을 config 객체에 담아야 한다.  config 옵션config내용url요청을 보낼 URL 주..

Ant-Design Ant Design이란 React에서 사용하는 라이브러리로 다양한 디자인을 제공해 주는 라이브러리이다!  1) 먼저 Ant Design을 설치해 준다.npm i antd// npm install antd 축약 명령어  2) 기본 스타일을 적용하기 위해서 index.js에 import 한다.import 'antd/dist/reset.css'- Ant Design 버전 4 이하는 'antd/dist/antd.css' 사용- 5 이상부터는 'antd/dist/reset.css' 사용   3) Ant Design의 컴포넌트를 볼 수 있는 페이지로 이동해서 원하는 것을 골라 사용한다!Ant Design 컴포넌트 확인!  원하는 것을 골라 들어가면 버튼 (Show code)이 보인다.이걸 클릭..

React 설정 및 프로젝트 만들기리액트 공부를 위해 리액트 환경 설정을 해보자!   1) Node.js 설치https://nodejs.org/en  접속하여 설치파일 다운로드 후 설치! 설치 후 확인하기 위해서 cmd창에서 node -v 를 입력하면 버전을 확인할 수 있다. ▼React 쓰는데 Node.js 설치해야 하는 이유는?더보기✨Node.js란?Node.js는 JavaScript를 서버에서도 실행할 수 있게 해주는 JavaScript 런타임 환경이다.쉽게 말해 JavaScript를 브라우저 뿐만이 아니라 서버에서도 실행할 수 있도록 해주는 것! 특징!- 비동기 및 이벤트 기반 : 비동기식 I/O 사용, 많은 작업을 동시에 처리할 수 있다.- 싱글 스레드 : 여러 클라이언트 요청을 동시에 처리할 ..

React 리액트의 배경React는 JavaScript 라이브러리이다.기존에는 기본 JavaScript를 이용해 웹 사이트를 만들어야 했고,그로 인해 복잡하고 유지보수가 어려워 2011년도에 페이스북에서 개발하여 나오게 된 것이 리액트!  리액트의 장점1. UI를 자동으로 업데이트해준다.원래는 페이지를 새로고침 해야지만 수정된 사항이 페이지에 보였는데,리액트는 새로고침 하지 않아도 UI를 자동으로 업데이트해준다. 2. 코드 재사용성이 높다.리액트는 컴포넌트 단위로 UI를 구성한다.각 컴포넌트는 재사용성이 높기 때문에 유지보수가 좋다. 3. 코드 정리가 깔끔하다.기존에는 HTML, JS 파일이 각각 존재했다.리액트는 HTML과 Java Script가 합쳐진 형태를 사용한다 ==> JSX 문법이라고 한다. ..