현인

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 파일..

이전 챕터에서는 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 프로젝트를 생성할 ..