공부를 끄적끄적 공부를 끄적끄적

React로 블로그 만들기 #7 - 로그인 구현(4) HOC - 1. HOC (Higher Order Component)- 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.- 비즈니스를 담당하는 컴포넌트와 뷰를 담당하는 컴포넌트를 분리할 때 사용함- 그 외에도 SPA에서 로딩 중 화면 표시 또는 유저 인증 로직 처리, 에러 메시지 표시 등 다양한 방법으로 사용됨.- 여기서는 유저 인증 로직 처리를 하기 위해 사용함. => 로그인 했을 때만 들어갈 수 있는 페이지(내 글보기, 마이페이지)를 위해 HOC 적용. 1) src/Components/LoginHOC.js 생성- Store에 저장된 logged 상태에 따라 로그인 했을 때는 내 글보기, 마이페이지를 로그인을 하지 않았을 때..

React로 블로그 만들기 #6 - 로그인 구현(3) 로그인 상태 관리 및 ContextAPI - 1. 로그인 상태 관리하기1) src/App.js- 앞에서 소셜 로그인을 구현하여 로그인해서 정보를 받아옴.- 로그인 상태를 관리하기 위해 logged를 state에 생성한다.- 로그인을 하면 logged를 true로 바꿔줄 onLogin 함수와 로그아웃을 하면 logged를 false로 바꿔줄 onLogout 함수를 만든다.import React, { Component } from 'react';import styled from 'styled-components';import Header from './Layout/Header';import Navigation from './Layout/Navigation..

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로 블로그 만들기 #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로 블로그 만들기 #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..

파이썬으로 미세먼지 정보 얻어오기 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로 블로그 만들기 #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로 블로그 만들기 #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..