728x90 반응형 리액트31 20220921 실습내용 MVC 게시판에 로깅, 트랜잭션, 예외처리 기능 추가 RESTful 게시판 기능 구현 REST API 기능 구현 Swagger를 이용한 REST API 문서화 게시판 목록 조회, 상세 조회, 수정, 삭제 기능 구현 axios를 이용한 REST API 연동 React-toastify 적용 node_modules가 포함되어 있지 않으므로, 압축해제 후 압축해제한 디렉터리(package.json 파일이 위치한 board 디렉터리)에서 npm install 명령으로 의존설치 후 사용 예) C:\Users\myanj\Downloads\board> npm install 2022. 9. 22. BrowserRouter를 이용한 웹 기반 애플리케이션 라우팅 구현 react-router-dom 패키지에서 제공하는 BrowserRouter를 이용해서 웹 기반 애플리케이션에서의 라우팅을 구현해 보겠습니다. [참고] https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom #1 앱 생성 C:\react> npx create-react-app menu #2 react-router-dom 설치 C:\react\menu> npm install react-router-dom #3 Home.js 생성 import React from 'react'; const Home = () => { return ( Home.js ); } export default Home; #4 Contact.js .. 2020. 5. 22. 리액트 머티리얼 UI 컴포넌트를 이용한 할일 목록 구현 구글 머티리얼 디자인을 구현한 Material-UI 컴포넌트를 이용해서 할일 목록을 제작해 보겠습니다. https://material-ui.com/ #1 프로젝트 생성 C:\react> npx create-react-app todolist #2 Material-UI 컴포넌트 추가 C:\react\todolist> npm install @material-ui/core #3 TodoList.js 생성 할일 정보를 담을 배열 형식의 상태 변수(todos)와 값을 추가하는 함수(addTodo)를 정의하고, AppBar, Toolbar, Typography 컴포넌트를 이용해서 앱 이름을 출력합니다. 각 컴포넌트의 사용 방법은 아래 사이트를 참조하세요. App Bar ☞ https://material-ui.com/.. 2020. 5. 22. axios를 이용한 날씨 정보 조회 axios 웹 브라우저와 node.js에서 사용할 수 있는 프로미스 기반의 HTTP 클라이언트 https://github.com/axios/axios axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com axios를 사용하면 응답 문서를 자동으로 JSON 형식으로 변환해 주므로, 별도의 변환 과정 없이 바로 사용이 가능합니다. axios.get('http://someapi.com') .then(response => console.log(response)) .catch(error => console.log(error)); HTTP 메소드별 메소드를 제공하며 요청 본문은 메소드의 파라미터로 전달이 가.. 2020. 5. 22. 이전 1 ··· 4 5 6 7 8 다음 728x90 반응형
