본문 바로가기

부트캠프교육중301

GraphQL -Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어 -Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻합니다. -API를 위한 쿼리 언어 -트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어라고 볼 수 있습니다. -REST API의 한계때문에 정보를 사용하는 측에서 원하는 대로 정보를 가져올 수 있고, 보다 편하게 정보를 수정할 수 있도록 하는 표준화된 Query language 를 만들게 되었고 이것이 GraphQL입니다. #왜쓰나 -GraphQL의 아이디어는 그래프로 생각하기에서부터 출발합니다 -GraphQL에서는 모든 데이터가 그래프 형태로.. 2023. 3. 28.
코드분할, lazy, suspense -대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링(Bundling)합니다. -“그렇다면 어느 페이지에서 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러올 수 있지 않을까??” -이것이 코드 분할의 핵심 아이디어입니다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결 방법은 번들을 물리적으로 나누는 것입니다. 코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능입니다. -따라서 코드 분할을 하게 되면 지금 당장 필요한 코드가 아니라면 따로 분리를 시키고, 나중에 필요할 때 불러와서 사용할 수 있습니다. 이를 통하여 대.. 2023. 3. 25.
Custom Hook 실습 #기존 // App.js import "./styles.css"; import { useEffect, useState } from "react"; export default function App() { const [data, setData] = useState(); useEffect(() => { fetch("data.json", { headers: { "Content-Type": "application/json", Accept: "application/json" } }) .then((response) => { return response.json(); }) .then((myJson) => { setData(myJson); }) .c.. 2023. 3. 23.
Custom Hooks - 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. -여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. #장점 -상태관리 로직의 재활용이 가능. -클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다. -함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. #Custom Hook을 정의할때 규칙. - 함수 이름 앞에 use를 붙인다. -대개의 경우 프로젝트 내의 hooks 디렉토리에 custom hook을 위치시킨다. -함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은조건부 여서는 안된다. #이렇게 만들어진 c.. 2023. 3. 23.

티스토리툴바