2018~2019
-
React로 블로그 만들기 #52018~2019/React.js 2018. 10. 29. 11:56
React로 블로그 만들기 #5 - 로그인 구현(2) Kakao - 1. 소셜로그인 구현2) Kakao- API 발급 받기 : https://developers.kakao.com/- 패키지 설치 : yarn add react-kakao-login (https://www.npmjs.com/package/react-kakao-login) - src/Components/Login.js에 카카오 로그인을 구현- react-kakao-login에서 KakaoLogin 객체를 import함- 백엔드에 정보를 저장하기 위해 state에 id, name, provider를 저장함- id: 로그인하는 유저가 갖고 있는 고유번호- name: 로그인 유저의 이름- provider: 구글 로그인인지 카카오 로그인인지 확인 =..
-
React로 블로그 만들기 #42018~2019/React.js 2018. 10. 26. 23:09
React로 블로그 만들기 #4 - 로그인 구현(1) Google - 1. 소셜로그인 구현- TodoApp을 통해 로컬로그인을 구현해봤으므로 소셜로그인으로 구현- 회원가입 절차가 따로 없음 => 사용자가 번거롭게 새로 가입하지 않아도 됨 : OAuth 인증으로 Access Token 발급- 처음 로그인한 경우에는 회원가입 처리, 그 후에는 로그인 처리- 구글 로그인과 카카오 로그인 구현 1) Google- API 발급 받기 : https://console.cloud.google.com/apis/- 패키지 설치 : yarn add react-google-login (https://www.npmjs.com/package/react-google-login) - src/Components/Login.js에 구글..
-
React로 블로그 만들기 #32018~2019/React.js 2018. 10. 26. 15:40
React로 블로그 만들기 #3 - Router 설정(2) - 1. src/Components 파일 생성- About.js : 소개 페이지- Board.js : 다른 사람들이 쓴 글을 볼 수 있는 게시판- MyBoard.js : 내 글보기- MyPage.js : 내 정보 관리- Login.js : 로그인 페이지 2. src/Routes/index.js- 위에서 만든 컴포넌트 추가export { default as Home } from '../Components/Home';export { default as Login } from '../Components/Login';export { default as About } from '../Components/About';export { default as Bo..
-
파이썬으로 미세먼지 정보 얻어오기2018~2019/Python 2018. 10. 26. 12:06
파이썬으로 미세먼지 정보 얻어오기 1. 공공데이터 포털에서 API KEY 발급받기- https://www.data.go.kr/dataset/15000581/openapi.do 2. 소스코드from urllib.request import Request, urlopenfrom urllib.parse import urlencode, quote_plus,unquoteimport xml.etree.ElementTree as ET def dust(data): if 0 < int(data)
-
React로 블로그 만들기 #22018~2019/React.js 2018. 10. 25. 13:52
React로 블로그 만들기 #2 - Home 구성 및 Router 설정 - 1. src/Components 폴더 생성- Home.js 생성 2. src/Components/Home.js- Openweather API를 통해 날씨 정보 받아오기 : https://openweathermap.org/- fetch API 사용 1) 위도와 경도를 통해 날씨 가져오기- HTTP5 navigator.geoloaction 객체를 통해 위도와 경도를 가져올 수 있음- navigator.geoloaction.getCurrentPosition(onSuccess, onFailure, options) : 사용자의 현재 위치를 가져옴- 1번째 파라미터 : 성공시 콜백함수 정의- 2번째 파라미터 : 실패시 콜백함수 정의- 3번째..
-
React로 블로그 만들기 #12018~2019/React.js 2018. 10. 24. 17:04
React로 블로그 만들기 #1- Header, Navigation 구성 - 1. create-react-app 만들기- create-react-app react-blog(프로젝트 이름) 2.패키지 설치- styled-components : css 대신 styled-components 사용 (참조 : https://www.styled-components.com/) 3. 불필요한 파일 삭제 및 폴더 생성1) 삭제- App.css- index.css- App.text.js- logo.svg- serviceWorker.js 2) 생성- src/Layout : 레이아웃 폴더 4. src/Layout/Header.js 생성import React, { Component } from 'react';import sty..
-
MobX 예제 - 슈퍼마켓 만들기2018~2019/React.js 2018. 10. 18. 12:35
MobX를 이용한 슈퍼마켓 만들기출처 : https://velog.io/@velopert/MobX-3-%EC%8B%AC%ED%99%94%EC%A0%81%EC%9D%B8-%EC%82%AC%EC%9A%A9-%EB%B0%8F-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95-tnjltay61n 1. 프로젝트 구성 1) components - 슈퍼마켓- 상품- 장바구니- 총 가격 2) store- 슈퍼마켓에 대한 MobX observable, action, computed 정의 2. MobX의 React 컴포넌트 최적화 1) List를 렌더링 할 때는 컴포넌트에 리스트 관련 데이터만 props로 넣는다 2) 세부참조는 최대한 늦게 한다- 세부 참조 : 특정 객체의 내부의 값을 ..