전체 글
-
-
#1.2 오프라인 아폴로 설정GraphQL로 오프라인 노트 앱 만들기 2020. 1. 12. 22:54
아폴로 부스트로 하면 자동으로 셋업해주지만 지금의 프로젝트같은 경우는 제대로 동작하지 않을것이다 왜냐면 오프라인 즉 로컬로만 작업을 하기때문인데, 아폴로부스트는 http링크 같은걸 설정해줘야해서, 우리는 수동으로 코드를 써줬다. - index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { ApolloProvider } from "react-apollo"; import client from "./apollo"; import "./globalStyles"; ReactDOM.render( , document.getElementById("root") ); - clientState.js..
-
설정GraphQL로 오프라인 노트 앱 만들기 2020. 1. 12. 22:38
npx create-react-app [프로젝트 명] 깃헙 push.. 설정 아폴로-부스트는 여기서 쓰이지 않을 예정. -> http쪽을 만져야하는게 많아서. 여기선 로컬로만 작업 할 예정이라서. yarn add apollo-cache-inmemory apollo-client apollo-link graphql react-apollo styled-components styled-reset apollo-link-state react-apollo react-router-dom react-markdown-renderer react-textarea-autosize graphql-tag globalStyled.js 파일 Components폴더 Routes폴더 생성
-
#3-5 redux devtools 사용하기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 8. 13:44
- 구글 크롬에서 redux를 설치 - 코드를 몇개 추가해줘야 리덕스 데브툴즈를 제대로 사용할 수 있다. // 기존 컴포넌트의 기능을 확장해준다. // NodeBird= ({store})에서 store를 props로 넣어준다 export default withRedux((initialState, options) => { const middlewares = []; // 이부분만 바뀜 const enhancer = compose( applyMiddleware(...middlewares), !options.isServer && typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined" ? window.__REDUX_DEVTOOLS_EXTENSION__() : f ..
-
#3-4 redux와 react 연결하기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 8. 13:23
- _app.js 에 리덕스와 리액트를 넣어주면 모든 컴포넌트들이 공유 가능하다. - 사이에껴주면 됨 - import { Provider } from "react-redux"; // 리덕스 state를 제공해줌 - npm i next-redux-wrapper - 리액트에 리덕스를 붙이는거와, next에 리덕스를 붙이는거는 다름, next에는 npm i next-redux-wrapper 해줘야함 - const NodeBird에 store를 구현할 코드가 없는데 그 부분을 npm i next-redux-wrapper가 해줌 - withRedux 사용방법은 그냥 외우면되는데, 모든 프로젝트에서 똑같이 쓰이기때문임 - 마지막 코드부분에 return store를 해줘서 cost NodeBird= ({store})..