본문 바로가기
반응형

Category348

패스트캠퍼스 챌린지 20일차 (GraphQL 기본) 22.2.12 (토) +20days 배우기 https://graphql.org/learn/ Introduction to GraphQL | GraphQL Introduction to GraphQL Learn about GraphQL, how it works, and how to use it. Looking for documentation on how to build a GraphQL service? There are libraries to help you implement GraphQL in many different languages. For an in-depth learning experience wi graphql.org [번역] https://graphql-kr.github.io/learn/ Gra.. 2022. 2. 12.
패스트캠퍼스 챌린지 19일차 (GraphQL 소개) 22.2.11 (금) +19days GraphQL 소개 https://www.facebook.com/groups/react.ko Facebook이 만든 쿼리 언어 A query language for your API https://graphql.org/ GraphQL | A query language for your API Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs .. 2022. 2. 11.
패스트캠퍼스 챌린지 18일차 (React-Query) 22.2.10 (목) +18days Overview https://react-query.tanstack.com/overview Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation Out of the box, React a react-query.tanstack.com fetching or updating data 기존 상태 관리 라.. 2022. 2. 10.
패스트캠퍼스 챌린지 17일차 (SWR) 22.2.9 (수) +17days SWR stale-while-revalidate(HTTP 캐시 전략중 하나) 의도적으로 cache된 date를 return 하고 fetch(revalidate)한 후 data를 update 한다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다.그리고 UI는 항상 빠르고 반응적 입니다. 개요 import useSWR from 'swr' function Profile() { const { data, error } = useSWR('/api/user', fetcher) if (error) return failed to load if (!data) return loading... return hello {data.name}! } 이 예시에.. 2022. 2. 9.
패스트캠퍼스 챌린지 16일차 (Zustand) 22.2.8 (화) +16days Zustand small / fast / scalable bearbones state-management simplified flux principles comfy api based on hooks isn’t boilerplatey or opinionated 설치 npm install zustand 기본 사용법 import React from 'react'; import create from 'zustand'; const useStore = create((set) => ({ fontSize: 14, increaseFontSize: () => set((state) => ({ fontSize: state.fontSize + 1 })), })); export default f.. 2022. 2. 8.
패스트캠퍼스 챌린지 15일차 (Recoil) 22.2.7 (월) +15days Recoil https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org Minimal and Reactish Data Flow Grpah Cross App Observation 소개 동기 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. 그러나 React는 다음과 같은 한계가 있다. 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 .. 2022. 2. 7.
'매일매일' 병에 걸린 것 같다 너무나 정신없는 나날들을 보내고 있다. 요즘 하루도 거르지 않고 매일 하고 있는 일과는 5K 러닝, 1시간 홈웨이트, 2시간 스터디 챌린지 정도가 있다. 그리고 회사를 다닌다. 또 우리 집에는 아직 돌도 지나지 않은 아기가 있다. 물론 육아는 기본으로 포함이다. 평일에는 시간대가 잘 안맞아서 그냥 아기 얼굴만 보는 편이지만 재택근무를 하는 수요일이나 주말에는 육아도 상당 부분 포함된다. 그냥 가볍게 몇 글자 풀어내기만 해도 정말 막말해서 토할 것 같은 일상이다. 작년 여름부터 비가 오나 눈이 오나 매일 5K를 달리겠노라고 스스로와 약속을 했다. 그리고 지금까지 그 약속은 지켜오고 있다. 너무 강박 같다는 주변의 이야기를 들었는데 솔직히 강박 같은 건 이미 예전에 기본 탑재 됐다. 이 것 때문에 와이프와도.. 2022. 2. 7.
패스트캠퍼스 챌린지 14일차 (MobX) 22.2.6 (일) +14days MobX https://mobx.js.org/README.html Simple, scalable state manage ment A quick example import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react" // Model the application state. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increase() { this.secondsPassed += 1 } reset(.. 2022. 2. 6.
패스트캠퍼스 챌린지 13일차 (Redux) 22.2.5 (토) +13days 1. Redux 총 3가지 타입의 공식 문서가 존재 Redux (https://redux.js.org/) React Redux (https://react-redux.js.org/) React Toolkit (https://redux-toolkit.js.org/) Getting Started with React Redux React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state. API Overview Provider Rea.. 2022. 2. 5.
패스트캠퍼스 챌린지 12일차 (Mock Service Worker) 22.2.4 (금) +12days Mock Service Worker 모킹(Mocking)이란? Mock(모의 데이터)을 만들어서 활용하는 방식 통상적으로 data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 함 서버가 없는 경우, API 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가(데이터 fetch 해보기 강의에서는 github)가 필요 MSW https://mswjs.io/ - Interception on the network level - Service Worker API - REST API & GraphQL support Examples Learn by inspecting how Mock Service Worker integrates with.. 2022. 2. 4.
패스트캠퍼스 챌린지 11일차 (Framer Motion) 2022.2.3 (목) +11days https://www.framer.com/motion/ Framer는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌를 제공하는 라이브러리이다. 아래는 공식문서에서 제공하는 기본 설치 방법과 몇몇 중요한 강의에서 언급하는 몇몇 중요한 코드 예제들만 작성했다. Installation npm install framer-motion Importing import { motion } from "framer-motion" Example import React from "react"; import { motion } from "framer-motion"; export default function Scale() { return (.. 2022. 2. 3.
패스트캠퍼스 챌린지 10일차 (React Spring) 2022.2.2(수) +10days react-spring react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. Installation yarn add react-spring Platforms @react-spring/konva @react-spring/native @react-spring/three @react-spring/web @react-spring/zdog Why springs and .. 2022. 2. 2.
반응형

티스토리툴바