공부일지/React 썸네일형 리스트형 비전공자의 공부일지 - GraphQL 세번째 이야기 GraphQL 세번째 이야기 Resolver 데이터를 전달받을때 api의 데이터 전체를 가져오는게 아니라 데이터의 특정 정보만을 가져오고 싶을때, 즉 필터링이 필요할때 사용한다. 예를들어 저번일지에서 posts의 내용중에 module.exports = [ { id: 'post1', title:'It is a first post', description:'It is a first post description', comments:[{ id:'comment1', text:'It is a first comment', likes: 1 }] }, { id: 'post2', title:'It is a second post', description:'It is a second post description', com.. 더보기 비전공자의 공부일지 - GraphQL 두번째 이야기 GraphQL 두번째이야기 저번 일지에 이어서 이번에도 GraphQL을 공부할 것이다. 저번에 작성했던 server.js에서 이번에는 Query에 다른 코드들을 작성해 볼 예정이다. const express = require('express'); const { graphqlHTTP } = require('express-graphql'); const {buildSchema} = require('graphql') const app = express(); const port = 4000; const schema = buildSchema(` type Query{ posts:[Post], comments: [Comment], } type Post{ id: ID!, title: String!, description.. 더보기 비전공자의 공부일지 - GraphQL GraphQL이란?? GraphQL은 API용 쿼리 언어이다. GraphQL은 API의 데이터에 대한 이해하기 쉬운 설명을 제공하고, 클랑이 언트가 필요한 것을 정확하게 요청할 수 있다. 페이스북에서 2012년도에 개발되었다. GraphQL의 장점으로는 프론트개발중 백엔드 개발자가 RESP API처럼 개발을 마칠 때까지 기다리지 않아도 된다. Overfetching과 Underfetching을 막아준다. REST를 이용할 때 필요한 데이터를 만들기 위해서 여러 번 요청을 보내야 할 때 GraphQL은 한 번의 요청으로 데이터를 가져올 수 있다. Schema를 작성하기 때문에 데이터가 어떻게 이루어져 있는지 알 수 있다. Type을 작성하기 때문에 요청과 응답에 Vaild 한 데이터가 오고 갈 수 있다. .. 더보기 비전공자의 공부일지 - TypeScript TypeScript???? 1. Type의 종류 Primitive tpyes String : 문자열을 나타낸다 Number : 숫자를 나타낸다. Boolean : true(참)와 false(거짓)을 나타낸다. null : 하나의 값을 가진다. null undefined : 하나의 값을 가진다. 초기화되지 않은 변수의 기본값 symbol : 고유한 상수의 값을 나타낸다. Object tpyes function : 함수를 나타낸다. array : 배열을 나타낸다. classes : 클래스를 나타낸다. object : 객체를 나타낸다. 1. TypeScript 추가 제공 type Any 프로젝트를 만들 때 잘 알지 못하는 타입을 표현해야 될 수도 있는데 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러.. 더보기 비전공자의 공부일지 - NextJS NextJS란 React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 리액트로 개발할 때 SPA(single page application)을 이용하며 CSR(client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)인데 CSR을 하면 첫 페이지에서 빈 html을 가져와 JS해석하여 화면을 구상하기 때문에 포털사이트에서 거의 노출되지 않는다. 하지만 NextJS에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다. 리액트에서도 SSR을 지원하지만 구현하기에 괸.. 더보기 비전공자의 공부일지 - Zustand 맛보기 Zustand란?? Zustand는 간단한 상태관리 솔루션이라고 한다. Zustand는 독일어로 State(상태)를 뜻하고 Jotai 및 React 스프링 개발자가 구축한 빠르고 확장 가능한 상태 관리 솔루션이다. 보일러 플레이트를 많이 최소화시켰다고 한다. 상용구 코드 감소 Zustand는 상태 값이 변경될 때만 구성 요소를 렌더링 하고 구성 요소를 다시 렌더링 하지 않고도 상태 변경을 처리할 수 있는 경우가 많다. 상태 관리는 중앙 집중식이며 단순하게 정의된 작업을 통해 업데이트된다. 이 부분에서 Redux와 유사하지만 개발자가 상태를 처리하기 위해 Reducer, Action 및 Dispatch를 만들어야 하는 Redux와 달리 Zustand는 훨씬 쉽다. Hooks를 상용하여 상태를 상용한다. 컨.. 더보기 비전공자의 공부일지 - Recoil TodoList, 패스트캠퍼스 TodoList 만들기 일정을 등록하고 수정하고 삭제, 완료 기능 있는 todoList를 만들 계획이다. 이번에는 App.js에 atom을 만들지 않고 todoAtom.js 파일을 만들었다. todoAtom.js import { atom } from "recoil"; export const todoListState = atom({ key:'todoListState', default:[] }) 그리고 components 폴더에 TodoItemCreator.js를 만들어서 작업하였다. TodoItemCreator.js import React, { useState } from 'react' import { useSetRecoilState } from 'recoil'; import { todoListState .. 더보기 비전공자의 공부일지 - Recoil 이란? Recoil이란??? Recoil 은 React 애플리케이션을 위한 상태관리 라이브러리입니다. Recoil은 Github에 14,000개 이상의 별이 있는 오픈 소스 상태관리 라이브러리이며 Facebook의 소프트웨어 엔지니어인 Dave McCabe가 발명했습니다. React 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화됩니다. React에 offical 라이브러리는 아니라고 한다. 하지만 Facebook에서 만든 거라 React와 호환이 잘된다고 한다. Recoil 공식사이트에 가면 간단한 사용 방법예제라고 있는데 이번엔 그걸 만들어 볼 생각이다. https://recoiljs.org/ko/docs/introduction/getting-st.. 더보기 이전 1 2 다음 목록 더보기목록 더보기
