개발 썸네일형 리스트형 리액트로 GraphQL 써보기 공부한 것을 정리해본 글입니다. GraphQL in React! GraphQL은 URL로 요청을 보내서 정해진 데이터를 받아오는 rest api와는 달리 원하는 데이터를 찍어서 가져오는 것이 가능하다. GraphQL은 메시지 바디에 적절한 쿼리를 담아서 post 요청을 날려서 원하는 값을 받아오게된다. 이를 리액트에서 사용하는 것을 생각해보면 fetch나 axios를 써서 메시지 바디에 위에 있는 형식대로 담아서 쓰면 되기는 하겠지만 번거로운 점이 많다. 편리한 라이브러리를 두고 굳이 저렇게 할 이유는 없다. Apollo 라이브러리 이전 실습때 insomnia에서 post 요청으로 graphql에서 데이터를 가져왔던 것처럼 fetch나 axios를 사용해서 가져올 수는 있을 것이다. 하지만 react의 .. 더보기 GraphQL로 rest api 감싸기 GraphQL을 사용해서 REST api를 감싸는 것도 가능하다. REST api의 결과 데이터를 GraphQL이 한번 더 핸들링 해주는 것이다. HOW? 방법은 간단하다. 이전 시간에 실습해본 내용은 GraphQL 서버로 데이터를 요청하면 응답값으로 단순히 코드상의 데이터를 전달했다. export let memberList = [ ..멤버 배열 ] export const getMembers = () => memberList; 그렇다면 반환하는 데이터를 fetch나 axios를 사용해서 rest api의 데이터를 가져와 반환하면 된다. 실습해 사용한 무료 rest api 사이트 https://gorest.co.in/ Online REST API for Testing and Prototyping | GO .. 더보기 GraphQL이란? REST API와는 다른 GraphQL REST API에서는 url로 요청을 보내서 서버로부터 요청에 맞는 적절한 응답 데이터를 받아온다. 이는 서버가 응답해주기로 정해놓은 틀 내에서 프론트가 데이터를 전달 받을 수 있다는 것이다. 가령 예를 들어 GET /members GET /memos 라는 rest api가 있을때 프론트 측에서 저 url로 요청을 보내면 서버가 정해서 반환해주는 데이터를 받게된다. 받게 되는 데이터가 어떤 구조인지는 console.log에 찍어서 확인해보거나 브라우저를 통해 url로 접속해서 json 데이터를 직접 확인하거나 일 것이다. 반면 GraphQL 에서는 url이 존재하지 않는다. rest api에는 있는 uri 체계도 없고 /members 이런 url도 없고 그저 하나의.. 더보기 깃허브 사용 관련 정리글 깃허브 사용 관련해서 뭔가를 배우거나 문제를 해결할 때마다 나중에 다시 참고할 수 있도록 메모겸 공유겸 해서 작성한 글입니다. 계속 추가해 나가겠습니다. 문제상황 1) 깃허브 폴더에 화살표가 생겨 열리지 않음 원인은 다양하겠지만 저 같은 경우엔 git init을 한 디렉터리의 상위 폴더에서 git init을 하고 push 하자 해당 문제가 발생했습니다. 해결 방법은 상위 디렉터리에서 다음 명령어를 입력하면 됩니다. git rm --cached . -rf 1) ! [rejected] master -> master (non-fast-forward) .gitignore 파일과 README.md 파일이 원인으로 가끔 발생한다고 한다. push 할때 브랜치 명 앞에 +를 붙여주면 된다. git push origi.. 더보기 현재 브랜치의 끝이 리모트 브랜치보다 뒤에 있으므로 업데이트가 거부되었습니다 해결법 1. git push origin master 뒤에 force를 붙인다 => git push origin master force 더보기 이전 1 다음
