현인

API fetch 중 문제가 발생했을 때, 에러 창을 띄우는 것이 아닌 이전 데이터를 유지 해야 한다는 요구사항이 있어서 다음과 같이 구현했다. 프레임워크는 Next.js 이며, 별도의 API 관련 라이브러리를 사용하지 않고 fetch로 가져온다.const fetchData = useCallback(async () => { const response = await fetch('API URL'); if (response.ok) { const fetchedData = await response.json(); setData(fetchedData); // 데이터를 LocalStorage에 저장, 오류 발생 시 캐시된 데이터 사용하기 위함 localSt..

Next.js를 사용하면 서버에서 가변 값을 처리해 동적으로 페이지를 렌더링할 수 있다. 예를 들어, 아래와 같은 요구사항이 있다고 가정해보자.클라이언트에게 템플릿 변경이 가능한 페이지를 제공한다.클라이언트로부터 템플릿 변경 요청이 들어오면, admin 서버를 통해 템플릿 ID를 갱신한다.변경된 템플릿 ID를 기반으로 해당 템플릿으로 페이지를 렌더링한다.React로 개발했다면, 일반적으로 클라이언트에서 admin 서버의 API를 호출해 변경된 ID 값을 가져오고, 그 ID에 매핑된 컴포넌트를 렌더링했을 것이다. 하지만 이런 방식은 클라이언트가 모든 템플릿의 리소스를 로드해야 한다는 단점이 있다. 템플릿 종류가 많아질수록 리소스 크기가 비효율적으로 커지는 문제가 발생할 수 있다.Next.js를 사용하면 이..

이전 장에서 대시보드 레이아웃과 페이지들을 만들었다. 이제 사용자가 대시보드 경로 사이를 라우팅할 수 있도록 몇 가지 링크를 추가해보자5장에서 다룰 내용next/link 컴포넌트 사용법usePathname() 훅 사용하여 활성 링크 표기 방법Next.js에서 네비게이팅(Navigating)이 이뤄지는 방식왜 네비게이팅을 최적화 해야 할까?페이지 간에 링크를 구현하려면 HTML 엘리먼트를 사용한다. 현재 사이드바 링크는 엘리먼트를 사용하지만 브라우저에서 홈, invoice 및 customer 페이지 사이를 탐색할 때 어떤 일이 일어나는지 보자.각 페이지 이동 시 전체 페이지가 새로고침 된다. 컴포넌트Next.js에서는 컴포넌트를 사용하여 어플리케이션의 페이지간 링크를 구현할 수 있으며 JavaScri..

지금까지 만든 어플리케이션은 홈 화면 하나 뿐이다. 이제 레이아웃과 페이지들을 가지고 더 많은 라우팅 지점들을 만들 수 있는 방법을 알아보자.4장에서 다룰 내용파일시스템 라우팅을 활용하여 dashboard 경로 생성새로운 경로 세그먼트를 만들 때 폴더와 파일들의 역할 이해여러 대시보드 페이지에서 공유할 수 있는 중첩 레이아웃 만들기콜로케이션, 부분 렌더링 그리고 루트 레이아웃중첩 라우팅Next.js는 폴더가 중첩 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.layout.tsx 및 page.tsx 파일들을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있다.page.tsx는 React 컴포넌트를 내보내는 특수 Next.js 파일..

GraphQL 스키마가 지원하는 쿼리에 대한 정보를 요청하는 것은 매우 유용한 기능이다. GraphQL은 Introspection(이하 스키마 확인) 시스템을 통해 이를 효과적으로 수행할 수 있게 해준다.스타워즈 예제에서 사용된 starWarsIntrospection-test.ts 파일은 스키마 확인 시스템의 실용성을 잘 보여준다. 이 파일에는 다양한 스키마 확인 쿼리가 포함되어 있어, 참조 구현의 스키마 확인 시스템을 효과적으로 테스트할 수 있다.타입 시스템을 직접 설계했다면 사용 가능한 타입들을 알고 있겠지만, 그렇지 않은 경우에도 GraphQL의 강력한 기능을 활용할 수 있다. Query의 루트 타입에 항상 존재하는 __schema 필드를 쿼리하면, 필요한 모든 정보를 손쉽게 얻을 수 있다. 이제 ..

유효성 검증이 끝나면, GraphQL 쿼리는 GraphQL 서버에서 실행된다. 서버에서는 요청된 쿼리와 동일한 모습의 형식을 가진 결과를 리턴한다.GraphQL은 타입 시스템 없이는 쿼리를 실행할 수 없으므로, 쿼리 실행을 설명하기 위해 예시 타입 시스템을 사용해보겠다. 이는 이 글들의 예시들에서 사용된 동일한 타입 시스템의 일부이다.type Query { human(id: ID!): Human} type Human { name: String appearsIn: [Episode] starships: [Starship]} enum Episode { NEWHOPE EMPIRE JEDI} type Starship { name: String}쿼리가 실행될 때 어떤 일이 일어나는지 설명하기 위해, ..

타입 시스템을 활용하면, GraphQL 쿼리가 유효한지 미리 정의할 수 있다. 서버와 클라이언트 개발자에게 유효하지 않은 쿼리가 생성되었을 때 런타임 확인을 따로 거치지 않고 정보를 효율적으로 전달할 수 있다.Star Wars 예제에서, starWarsValidation-test.ts 파일은 다양한 유효하지 않은 쿼리들을 보여주며, 참조 구현의 검증기를 실행하는 테스트 파일이다.먼저, 복잡하지만 유효한 쿼리를 살펴보자. 이는 이전 섹션의 예제와 유사한 중첩 쿼리지만, 중복된 필드들이 프래그먼트로 분리되어 있다:{ hero { ...NameAndAppearances friends { ...NameAndAppearances friends { ...NameAndApp..

GraphQL 타입 시스템은 API에서 어떤 데이터를 쿼리할 수 있는지 설명한다. 이러한 기능의 컬렉션을 서비스의 스키마라고 하며 클라이언트는 해당 스키마를 사용하여 예측 가능한 결과를 반환하는 API에 쿼리를 보낼 수 있다.GraphQL은 모든 백엔드 프레임워크나 프로그래밍 언어와 함께 사용할 수 있으므로 구현에 따른 세부사항은 피하고 개념에 대해서만 이야기를 해보자타입 시스템GraphQL 쿼리 언어는 기본적으로 객체의 필드를 선택하는 것이다. 다음 예제를 보면{ hero { name appearsIn }}{ "data": { "hero": { "name": "R2-D2", "appearsIn": [ "NEWHOPE", "EMPIRE", ..

이번 장에서는 GraphQL 서버에 어떻게 질의가 이루어지는지 상세하게 배워보겠다.FieldsGraphQL은 단순하게 말하면 객체의 특정 필드를 요청하는 것이다. 매우 간단한 쿼리와 이를 실행했을 때 얻는 결과를 살펴보자.//Operationhero { name }}//Response{ "data": { "hero": { "name": "R2-D2" } }쿼리 결과와 정확히 같은 모양이라는 것을 바로 알 수 있다. 이것은 GraphQL에게 필수적이다. 항상 기대하는 것을 반환받고, 서버는 클라이언트가 어떤 필드를 요청하는지 정확히 알고 있기 때문이다.name 필드는 String 타입을 반환한다.위 예시에서는 우리는 영웅의 이름만 요청했고, 그 결과 문자열이 반환되었지만, 필..

GraphQL을 사용하게 되어 공식문서를 통해 먼저 학습해보려고 한다.GraphQL은 API를 위한 쿼리 언어이며, 사용자가 데이터에 대해 정의한 타입 시스템을 사용하여 쿼리를 실행하는 서버 측 런타임이다. GraphQL 명세는 2015년에 오픈소스로 공개되었으며, 이후 다양한 프로그래밍 언어로 구현되었다. GraphQL은 특정 데이터베이스나 스토리지 엔진에 종속되지 않으며, 사용자의 기존 코드와 데이터를 기반으로 동작한다.타입 시스템으로 API를 설명한다GraphQL 서비스는 타입과 필드를 정의한 다음 각 필드에 필요한 데이터를 제공하는 함수를 작성하여 생성된다. 예를 들어, 로그인한 사용자의 이름을 알려주는 GraphQL 서비스는 다음과 같다.type Query { me: User} type Use..