본문 바로가기

728x90
반응형

API

비전공자의 프로젝트 만들기) Git Hub API를 활용한 유저 검색 서비스 Git Hub API를 활용한 유저 검색 서비스 오늘은 패스트캠퍼스 인강 중에 Github API를 사용해서 유저 검색 서비스를 작업하였습니다. 먼저 완성된 이미지들을 보여드릴께요. 서치박스에 유저를 검색하고 해당 유저의 정보에 검색하는 내용과 동일한 내용이 있는 유저들을 출력하고 info를 눌렀을 때 해당 유저의 정보와 저장소의 리스트들이 출력되는 프로젝트입니다. 코드 리뷰에 앞서 이번 프로젝트에서 사용했던 라이브러리 리스트입니다. mui/material, mui/styled, mui/icons-material axios dayjs zustand react-router-dom 그럼 이제 작업했던 코드를 리뷰해 볼게요. indexjs import React from 'react'; import 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 한 데이터가 오고 갈 수 있다. .. 더보기

728x90
반응형