현인

타입 시스템을 활용하면, 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..

이전 챕터에서는 Next.js 어플리케이션의 스타일링 방법에 대해 알아봤다. 이번 장에서는 커스텀 폰트와 hero image를 추가하는 방법에 대해 다뤄볼 예정이다.hero image란?웹사이트나 애플리케이션에서 가장 상단에 큰 배너 형식으로 배치되는 이미지. 보통 첫 화면에서 사용자가 가장 먼저 보게 되는 이미지로, 브랜드의 메시지나 핵심 내용을 시각적으로 전달하는 역할을 한다. - https://vwo.com/glossary/hero-image/3장에서 다룰 내용next/font를 활용한 커스텀 폰트 추가 방법next/image를 활용한 이미지 추가 방법Next.js에서 폰트와 이미지를 최적화하는 방법폰트는 왜 최적화 해야 할까?폰트는 웹사이트 디자인에서 중요한 역할을 한다. 하지만 커스텀 폰트를 활..

이번 장에서는 Next.js 어플리케이션의 다양한 CSS 스타일링 방법을 다뤄볼 예정이다.2장에서 다룰 내용글로벌 CSS 파일 추가 방법CSS 모듈과 Tailwind 스타일링 방법의 차이clsx 유틸리티 패키지를 활용한 조건부 클래스 네임 추가 방법글로벌 스타일링/app/ui 디렉토리를 보면 global.css 파일을 찾을 수 있다. 이 파일을 활용하여 어플리케이션의 모든 경로에 CSS 규칙을 추가할 수 있다. 예를 들어, CSS 재설정 규칙이나 페이지 전역에 대한 HTML 요소 스타일링 등이 있다.global.css 파일은 어플리케이션에 모든 컴포넌트에서 불러 올 수 있지만, 가장 상위 컴포넌트에서 불러오는 것이 좋다. Next.js의 경우에는 루트 레이아웃에 해당한다./app/layout.tsx 파일..

학습을 시작하며NextJS 공식 사이트 학습 자료를 통해 공부한다. 어디까지나 예제를 통한 튜토리얼이지만 공식 사이트에서 제공하는 자료이기도 하니 꼼꼼하게 살펴보며 NextJS의 장점을 경험해보고 React와의 차이점은 무엇인지 경험해보려 한다. 물론 상세한 동작 원리나 세부적인 부분에 대해서까지 깊게 살펴보긴 어려울 것 같지만, 해당 부분은 기본적인 틀을 갖춘 이후에 학습할 예정이다.새 프로젝트 생성해당 튜토리얼에서는 pnpm 패키지 매니저를 사용한다. yarn이나 npm 패키지에 비해 더 빠르고 효율적이라 pnpm을 활용한다고 한다.TODO : 패키지 매니저 별 차이점에 대해서 공부할 필요가 있어 보인다.먼저 pnpm 매니저를 설치한다.npm install -g pnpmNextJS 프로젝트를 생성할 ..

웹 브라우저웹 브라우저란 인터넷을 통해 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어다. 구글 크롬(Google Chrome), 모질라 파이어폭스(Mozilla Firefox), 애플 사파리(Safari), 마이크로소프트 엣지(Microsoft Edge) 등 많은 브라우저들이 등장했고, 이러한 브라우저들은 웹 페이지 표시 및 인터넷 사용을 보다 편리하게 해주는 다양한 기능들을 제공해준다.모든 브라우저의 핵심 기능은 사용자에게 웹 페이지를 보다 빠르고 정확하게 보여주는 일이다. 이번 글에서는 어떤 동작 원리를 통해 브라우저가 사용자에게 웹 페이지를 보여주고 있는지 알아보려 한다.보다 나은 이해를 돕기 위해 구체적인 예시를 하나 들어보겠다.www.naver.com을 브라우저에 입력했을 때 어떤 일이 일어..

인터넷은 컴퓨터들이 서로 통신 가능한 거대한 네트워크 인프라이다. 인터넷은 기술 인프라이며 웹은 그 위에서 동작하는 하나의 서비스일 뿐이다.인터넷은 어떻게 구성되어 있는가?두 개의 컴퓨터가 통신이 필요하다면, 우리는 두 컴퓨터를 물리적인 방법(보통 이더넷 케이블) 혹은 무선(Wifi나 Bluetooth 시스템)으로 연결해야 한다. (이 글의 예제들은 유선 케이블이지만, 무선 네트워크도 동일한 방식이다.)하지만 이 세상은 두 대의 컴퓨터만 존재하진 않는다. 10대의 컴퓨터를 서로서로 모두 연결한다고 가정해보면, 컴퓨터당 9개의 플러그가 달려야 하고, 총 45개의 케이블이 필요해진다.이 문제를 해결하기 위해 각 컴퓨터는 라우터라고하는 특수한 소형 컴퓨터에 연결된다. 라우터는 단 하나의 작업만을 처리한다. A..

1. grep 명령어로 특정 문자열이 포함된 브랜치 목록 찾기$ git branch | grep "MEDIA-1" deploy/MEDIA-1078 deploy/MEDIA-1210 feature/MEDIA-10682. grep으로 찾은 브랜치를 xargs 명령에 pipeline으로 넘겨줘서 삭제한다.xargs 명령어는 앞 명령어의 출력 결과를 다음 명령어의 인자로 넘겨주는 명령이다.$ git branch | grep "MEDIA-1" | xargs git branch -DDeleted branch deploy/MEDIA-1078 (was f21fb73ce).Deleted branch deploy/MEDIA-1210 (was d8918276b).Deleted branch feature/MEDIA-106..