API, Database
[DB] SQL과 NoSQL / 관계형 데이터베이스 vs 비관계형 데이터베이스
SQL이란? SQL = Structured Query Language SQL은 '구조적인 쿼리 언어'라는 뜻으로, 관계형 데이터베이스(RDBMS)를 제어하기 위해 사용하는 프로그래밍 언어이다. SQL은 데이터베이스가 아닌 언어를 지칭하지만, 통상적으로 관계형 데이터베이스까지 포함하여 SQL이라 부른다. 특징 - 엄격한 스키마(=structure)에 따라 데이터가 저장된다. - 관계를 통해 연결된 테이블에 데이터가 저장된다. - 표(Table)와 행(Row)으로 데이터를 구분한다. - MySQL, Oracle, postreSQL, msSQL 등이 많이 쓰인다. NoSQL이란? NoSQL = Not Only Structured Query Language SQL과 반대되는 접근방식이라 NoSQL이라 해석하기도..
[GraphQL] Apollo-Client / useQuery data 이름 변경하는 방법
useQuery의 기본 형태 Apollo-client의 useQuery 기본 형태는 다음과 같다. // 예시는 게시판 댓글 목록을 읽어오는 API const { data } = useQuery(FETCH_BOARD_COMMENTS, { variables: { boardId: String(router.query.new) } }) // FETCH_BOARD_COMMENTS는 지정해준 함수명 // boardId: String(router.query.new)는 useQuery시 필요한 key와 value useMutation과는 다르게 useQuery의 경우 { data } 부분이 고정되어있다. 하지만 중복 등의 이유로 이 data의 이름을 변경해야 하는 상황이 발생할 수 있다. 그런 경우에 어떻게 변경할 수 ..
[GraphQL] Apollo-Client - refetchQueries
refetchQueries란? Create / Delete 메소드를 실행할 경우, API상에서는 해당 작업이 완료되어도 화면에 다시 불러오는 작업(refetch)을 하지 않으면 변경사항이 반영되지 않는다. 실제로는 이미 지워진 데이터인데 화면상에 계속 보일 수 있는 것. 이럴 때 사용하는 것이 refetchQueries 이다. 용례 // 예시 코드 - 댓글 삭제하기 API const [deleteBoardComment] = useMutation(DELETE_BOARD_COMMENT) // DELETE_BOARD_COMMENT는 다른 파일에서 import 해온다. const onClickCommentDelete = async (event) => { console.log(event.currentTarget...
[GraphQL] Apollo-Client로 API 읽어오기 (Query)
Query 메소드란? GraphQl의 경우 기존의 Rest-API와 CRUD 메소드에 차이가 있다. Rest-API GraphQL-API 생성 Create POST MUTATION 수정 Update PUT 삭제 Delete DELETE 조회 Read GET QUERY Mutation의 경우 지난번에 apollo-client로 간단하게 사용하는 법을 포스팅한 적이 있다. (https://guuumi.tistory.com/50) 이번에는 Query를 수행하는 방법을 확인해보자. Apollo-client로 graphQL Query 수행 기본적인 import 및 gql을 활용해서 API 이름을 지정해주는 방법은 useMutation과 동일하다. 다른 부분은 작동함수 라인이다. const [ qqq ] = use..
[Rest-API/GraphQL] axios/Apollo-Client 사용하는 방법 (get/mutation)
axios | Rest-API import axios from 'axios' import해온다. export default function RestGet(){ const [aaa, setAaa] = useState("") const zzz = async () => { const result = await axios.get('https://koreanjson.com/posts/1') console.log(result.data.title) setAaa(result.data.title) } zzz() return ( REST-API 요청하기 ( ° ͜ʖ °) {aaa} ) } 사용한다. 참 쉽죠? apollo-client | GraphQL-API 여기는 상대적으로 할 일이 좀 더 많다. _app.js Next..
[API] Rest-API vs Graphql-API
Rest-API vs Graphql-API API에는 크게 rest-API, graphql-API 2종류가 있다. Rest-API GraphQL-API API 함수 이름 주소처럼 생긴 이름 http://naver.com/board/1 http://naver.com/profile/철수 일반 함수와 같은 이름 board(1) profile("철수") 응답 결과물 일부 데이터만 필요한 경우에도 전체 데이터를 받아야만 하는 구조 원하는 일부 데이터만 골라 받을 수 있음 요청담당자 axios apollo-client GraphQl은 효율적인 데이터 통신을 위해 페이스북 개발팀에서 만들었으며, facebook, airbnb, github 등 많은 사이트에서 사용중인 통신 방법이다. 하지만 국내에서는 아직 Graph..