전체 글 (49) 썸네일형 리스트형 GraphQL + Prisma 환경설정 #환경 1. only grapqhl-yoga server yarn add graphql-yoga node-fetch babel-cli babel-preset-env babel-preset-stage-3 nodemon { "presets":["env","stage-3"] } "scripts":{ "start":"nodemon --exec babel-node index.js"} #환경 2.1 apollo client 환경 npx create-react-app movieql-client yarn add react-router-dom graphql graphql-tag react-apollo@2.5 apollo-boost #환경 2.2 apollo client 환경 - apollo hooks npx create.. React - Hook 리액트 훅 사용법 정리 (2) useQuery #1. useQuery 사용법 이는 아폴로 클라이언트의 기존 사용법을 대처한다. #0 클라이언트 정의 import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "https://movieql.now.sh/" }); export default client; #1.1 루트 경로에 프로바이더 넣어주기. 기존의 사용법과 같이 쓰려면 훅프로바이더를 추가하는 방식으로 넣기. import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { ApolloProvider } from "react-apollo"; import { Apol.. React - Hook 리액트 훅 사용법 정리 (1) useState,useRef,createRef #1. useState 사용하기 useState(기본값) 은 get변수/set변수를 리스트로 반환한다. get변수는 count 라는 변수이름으로 받고, set함수인자는 setCount라고 받아서 사용한다. 클릭시 바로 setCount에 Count+1를 설정할수 있다. 또는 onChange 이벤트에 다른 커스텀 함수를 연결해서, taget:{value} 를 가져와서 email를 set 할수도 있다. import React, { useState } from "react"; import "./styles.css"; const Section = ({ title, children }) => ( {title} {children} ); export default function App() { //-----------.. React 리액트 - Redux 대체해서 ApolloClient 써보기 React 리액트 - Redux 대체해서 ApolloClient 써보기 1. 클라이언트 state에 들어갈 디폴트(스테이트)와 리소버 정의 // defaults는 Graphql문법이 아닌, state 개념이다. export const defaults = { isLoggedIn: Boolean(localStorage.getItem("token")) || false }; //resolvers의 세번쨰 인자가 의문이네... 두번째 인자도, 기본 리소버랑 다른 매커니즘인듯 export const resolvers = { Mutation: { logUserIn: (_, { token }, { cache }) => { localStorage.setItem("token", token); cache.writeData(.. React 리액트 - Apollo vs Redux 뭐가 더 좋은가? 장단점 차이점 리액트 공부를 하다보니, GQL 클라이언트 환경에서 ApolloClient 생성시, clientState를 만들게 된다. 기본적인 state를 넣고, 이를 변경하는 Mutation을 정의해서 넣어주면 된다. import ApolloClient from "apollo-boost"; import { defaults, resolvers } from "./LocalState"; export default new ApolloClient({ uri: "http://localhost:4000", clientState: { defaults, resolvers } }); 지금 Redux 덕 구조를 막 배운 나로써는 혼란스럽다. 이제 막 배운 기술인데 벌써 대처가 가능하다니!!!! Redux를 한번 배워둔것이 나쁘진 않다.. React Grapqhl 아폴로를 이용한 클라이언트 환경 만들기. React Grapqhl 아폴로를 이용한 클라이언트 환경 만들기. 1. 환경설치 yarn add react-router-dom graphql graphql-tag react-apollo@2.5 apollo-boost 2. 아폴로 클라이언트 프로바이더 만들기 ------------------------------------------------------------ 아폴로 클라이언트 설정 : 어디서 데이터를 얻어올건가 import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "http://localhost:4000/" }); export default client; -------------------------------.. 백단 환경 구축하기 - GraphQL + Prisma # 백단 환경 구축하기 - GraphQL + Prisma https://github.com/DosImpact/grapqhl-prisma-template/commit/461eccc659cf67a03a28e4297e54cf5faa57682e update docs · DosImpact/grapqhl-prisma-template@461eccc "dev": "nodemon --exec babel-node src/server.js", github.com 짜잔: 완성된 결과!> 1. 설치하기 프리즈마는 글로벌로 한번만 설치하면 됨! yarn add graphql-yoga graphql-tools merge-graphql-schemas@1.7.3 yarn add @babel/core @babel/node @babel/.. React J N 스타일 컴포넌트 5가지 꿀팁 스타일 컴포넌트 강의 https://github.com/DosImpact/styledCompoenets DosImpact/styledCompoenets React J N (props.danger ? `red;` : `green;`)}; `; const Container = styled.div` justify-content: center; & ${Button}:nth-child(1) { background-color: coral; } `; 2. Theme Provider const theme = { mainColor: "#3498db", dangerColor: "#e74c3c", successColor: "#2ecc71" }; export default theme; ----------------------.. 이전 1 2 3 4 5 6 7 다음
