2018~2019/React.js
-
리액트로 블로그 만들기 #102018~2019/React.js 2018. 12. 21. 16:35
React로 블로그 만들기 #10 - 로그인 구현(7) 프론트엔드 연동 - 1. ApolloClient- 앞서 만든 백엔드(GraphqQL, MongoDB)와 프론트엔드(React)를 연동하기 위해 ApolloClient를 사용함.- 간단하게 백엔드 uri만 적으면 클라이언트를 자동으로 생성해준다.- 패키지 설치 : yarn add react-apollo apollo-boost- 참조 : http://www.apollographql.com/docs/react/ 1) src/apollo.js- apolloclient를 생성한 뒤, now를 통해 배포된 백엔드 주소를 입력해줌. import ApolloClient from 'apollo-boost'; const client = new ApolloClient(..
-
now2.02018~2019/React.js 2018. 12. 21. 04:01
now.sh가 2.0 버전으로 업데이트 된 후 배포하는 방식이 바뀜 기존 1.0버전에서는 now 명령어 하나를 통해 별다른 설정없이 알아서 배포해줬지만... 그런데 알 수 없는 오류로 계속 배포가 되지 않았음. 별에 별거 다 해봤지만 안됐는데 드디어 해결 방법을 찾았음 오류 해결 방법 1) 기존 now 제거2) 새로운 now 설치3) brew cask reinstall now4) yarn upgrade5) yarn cache clean 2.0버전에서는 now.json 파일 생성 후 버전, 타입 등을 설정할 수 있음. 더불어 now를 하면 자동으로 주소를 복붙해줌... 근데 아직도 version2 사용법 모르겠음... 고로 now.json 생성 후 version 1로 사용. { "version": 1}
-
React로 블로그 만들기 #92018~2019/React.js 2018. 11. 5. 00:25
React로 블로그 만들기 #9 - 로그인 구현(6) GraphQL, MongoDB - 1. GraphQL- 소셜로그인으로 받은 정보를 서버에 저장하기 위해 GraphQL과 MongoDB를 사용- 패키지 설치 : yarn add global graphql-cli- graphql create blogql(프로젝트 이름) 후 node-minimal 선택- src에 resolver.js 와 typeDefs.js 생성 1) src/index.js- graphql-yoga를 이용하여 graphql server를 생성하고 연결한다.import { GraphQLServer } from 'graphql-yoga';import resolvers from './resolvers';import typeDefs from '...
-
React로 블로그 만들기 #82018~2019/React.js 2018. 11. 4. 23:44
React로 블로그 만들기 #8 - 로그인 구현(5) 새로고침 후 로그인 유지 - 1. 로그인 유지- 로그인을 한다고 해도 자동으로 로그인 상태가 유지되지 않는다. - 브라우저를 닫거나 새로고침할 시 스토어 값이 초기화되므로 페이지에 다시 들어왔을 때 로그인을 유지하는 로직이 필요하다.- TodoApp에서는 쿠키를 이용하여 로그인을 유지하였지만, 블로그 앱에서는 HTML5에서 제공하는Web Storage API를 사용한다.- 또한 로그아웃 시 소셜로그인으로 발급받은 토큰을 제거하도록 로직을 추가해야함. 2. localStorage vs sessionStorage - Key와 Value 값으로 저장.- 문자열이 아닌 객체도 저장이 가능하며 5MB까지 저장 가능함.- 쿠키와 다르게 만료기간을 지정할 수 없으..
-
React로 블로그 만들기 #72018~2019/React.js 2018. 11. 1. 17:52
React로 블로그 만들기 #7 - 로그인 구현(4) HOC - 1. HOC (Higher Order Component)- 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.- 비즈니스를 담당하는 컴포넌트와 뷰를 담당하는 컴포넌트를 분리할 때 사용함- 그 외에도 SPA에서 로딩 중 화면 표시 또는 유저 인증 로직 처리, 에러 메시지 표시 등 다양한 방법으로 사용됨.- 여기서는 유저 인증 로직 처리를 하기 위해 사용함. => 로그인 했을 때만 들어갈 수 있는 페이지(내 글보기, 마이페이지)를 위해 HOC 적용. 1) src/Components/LoginHOC.js 생성- Store에 저장된 logged 상태에 따라 로그인 했을 때는 내 글보기, 마이페이지를 로그인을 하지 않았을 때..
-
React로 블로그 만들기 #62018~2019/React.js 2018. 10. 30. 14:00
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로 블로그 만들기 #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에 구글..