728x90 반응형 개발/리액트9 리액트 머티리얼 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. 구글 로그인 결과를 저장하는 REST API 제작 리액트에서 구글 OAuth2 API를 이용해서 받아온 로그인 정보를 저장하는 스프링부트 기반의 REST API를 만드는 과정입니다. 리액트에서 구글 OAuth2 API를 이용하는 방법은 "리액트 구글 OAuth2 API를 이용한 로그인"을 참조하세요. #1 Spring Initializr 사이트에서 프로젝트 정보와 의존성을 추가 후 GENERATE 버튼 클릭 https://start.spring.io/ #2 다운로드 받은 googlelogin.zip 파일을 압축 해제 #3 이클립스에서 프로젝트 임포트 #4 Entity 클래스 생성 저장할 데이터 구조를 정의한 Entity 클래스를 생성 package com.example.googlelogin.entity; import javax.persistence.Co.. 2020. 5. 20. 리액트 구글 OAuth2 API를 이용한 로그인 구현 #1 프로젝트 생성 c:\react> npx create-react-app login #2 Visual Studio 프로젝트 추가 #3 Login.js 파일 생성 컴포넌트가 마운트되면 구글 SDK를 가져와서 auth2 기능을 초기화한다. OAuth 클라이언트 생성 및 클라이언트 ID 확인 방법은 "GCP OAuth 클라이언트 생성"을 참조하세요. import React, { Component } from 'react'; class Login extends Component { constructor() { super(); this.state = { token: '' }; } // #1 컴포넌트 마운트 직후 호출 componentDidMount() { this.googleSDK(); } // #4 로그인 기.. 2020. 5. 20. 이전 1 2 3 다음 728x90 반응형
