현인

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을 브라우저에 입력했을 때 어떤 일이 일어..