부트캠프교육중/HTTP, 네트워크34 프록시 Proxy 사용법 -webpack dev server의 proxy를 사용하게 되면, 브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청을 하게 됩니다. 그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환합니다. -proxy는 보통 맨 밑에 작성을 해 금방 찾을 수 있도록 합니다. ... "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version".. 2023. 4. 4. GraphQL 구조 #Query: 저장된 데이터 가져오기 , 원하는 데이터를 요청(REST API의 GET과 비슷) #Mutation: 저장된 데이터 수정. -Create: 새로운 데이터 생성 -Update: 기존의 데이터 수정 -Delete: 기존의 데이터 삭제 #Subscription 구독: 실시간 업데이트를 구현. 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송. -Query, Mutation은 전통적인 Client(요청)-Server(응답) 모델을 따른다. -Subscription는 발행/구독(pub/sub) 모델을 따릅니다. 데이터 조회 #필드(field) // hero의 name을 쿼리 { hero { name } } ------------------------------------.. 2023. 3. 28. GraphQL VS Rest API #Overfetch: 필요 없는 데이터까지 제공함 -블로그 앱 예제처럼 유저의 이름만 필요한 상황에서 REST API를 사용한다면, 응답 데이터에는 유저의 주소, 생일 등과 같이 실제로는 클라이언트에게 필요없는 정보가 포함되어 있을 수도 있습니다. #Underfetch: endpoint 가 필요한 정보를 충분히 제공하지 못함 -Underfetch의 경우 클라이언트는 필요한 정보를 모두 확보하기 위하여 추가적인 요청을 보내야만 합니다. 블로그 앱 예제 화면을 구현하기 위해선 유저 정보 뿐만 아니라 유저의 포스팅 목록 및 유저가 보유한 팔로워까지 필요합니다. 이때 필요한 정보를 모두 가져오려면 REST API에서는 각각의 자원에 따라 엔드포인트를 구분하기 때문에 3가지 엔드포인트에 요청을 보내야합니다. #클.. 2023. 3. 28. GraphQL -Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어 -Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻합니다. -API를 위한 쿼리 언어 -트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어라고 볼 수 있습니다. -REST API의 한계때문에 정보를 사용하는 측에서 원하는 대로 정보를 가져올 수 있고, 보다 편하게 정보를 수정할 수 있도록 하는 표준화된 Query language 를 만들게 되었고 이것이 GraphQL입니다. #왜쓰나 -GraphQL의 아이디어는 그래프로 생각하기에서부터 출발합니다 -GraphQL에서는 모든 데이터가 그래프 형태로.. 2023. 3. 28. 이전 1 2 3 4 ··· 9 다음
