myinfo7091 님의 블로그

3. 메인페이지, 레이아웃 구성 및 네비게이션 추가페이지 설정 및 메인 페이지 구현경로: /기능: 앱의 홈 페이지로, 주요 링크와 간단한 소개를 제공합니다.렌더링 방식: Static Site Generation (SSG)빌드 시점에 페이지를 정적으로 생성합니다.요구사항:글로벌 레이아웃을 설정하고 네비게이션 메뉴를 추가하여 페이지 간 이동이 가능하도록 합니다.챔피언 목록, 아이템 목록, 로테이션 정보 페이지로 이동할 수 있는 링크를 제공합니다.힌트:Next.js의 App Router를 사용하여 레이아웃과 페이지를 구성합니다.layout.tsx 파일에서 글로벌 네비게이션을 설정하고, 공통 레이아웃을 정의합니다.Tailwind CSS를 활용하여 스타일링을 적용합니다.정적 콘텐츠이므로 SSG를 사용하여 빠른 로..

/* eslint-disable @next/next/no-img-element */// SSG// 서버 컴포넌트에서는 fetch API를 통해 데이터를 직접 불러올 수 있다.// build 시점에 데이터를 불러오기 때문에 터미널에 console.log로 데이터를 출력해볼 수 있다.export default async function HomePage() { const response = await fetch("http://localhost:4000/products"); const data: Product[] = await response.json(); console.log(data); return ( Hello! Next.js HomePage ..

Route HandlersNext.js 13부터는 app 디렉토리에서 API 엔드포인트를 직접 정의할 수 있는 Route Handlers 기능이 추가되었다. 별도의 api 폴더를 사용하지 않고도 서버 측의 기능을 구현할 수 있다. Route Handlers는 웹 개발에서 동적인 사용자 경험을 제공하기 위한 서버 측 로직이 요구될 때 쓰일 수 있다. 사용자가 입력한 내용을 검증, 처리하는 API, 데이터 조회와 수정 등 서버 측에서 작업을 수행할 때 장점을 갖는다.컴포넌트와 API 라우트를 같은 위치에 배치하여 유지 보수성을 높일 수 있다.Next.js의 서버 사이드 기능을 쉽게 구현할 수 있다.   Route Handlers의 위치  Route handler 파일은 app 디렉토리 아래, 라우트 이름에 ..

타입스크립트를 사용하는 이유 웹 사이트를 운영하는 데 있어 높은 코드 품질로 버그 없이 사용자에게 안정감 있는 경험을 제공하는 것이 중요해졌다. TypeScript는 동적 타입 언어인 JavaScript를 보완해 주면서 활용도가 늘어나고 있다. TypeScript는 JavaScript의 상위 확장자로, 원하는 변수 타입을 정의하고 JS로 변환하여 브라우저에서 실행할 수 있다. 타입스크립트를 사용하는 가장 큰 이유는 버그를 예방할 수 잇는 타입 시스템이다. 타입(자료형)은 어떠한 변수가 문자열인지, 숫자인지, boolean인지 등 값의 형태에 따라 자료의 유형을 지정해주는 것이다. 만약 컴파일 과정에서 지정한 타입에 맞지 않는 값이 들어가면 에러가 발생하는데, 이를 통해 디버깅을 좀 더 편하게 할 수 있다..

프로젝트 개요Next.js와 TypeScript를 사용하여 리그 오브 레전드 캐릭터&아이템 정보 도감 만들기 주요 기능챔피언 정보 조회아이템 정보 조회금주의 챔피언 로테이션 정보 조회 프로젝트 셋업npx create-next-app@14 // 14버전 설치하기What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? NoWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to..

Next.js에서 주요 렌더링 방식은 4가지로 나눌 수 있다. 각 패턴별로 프로젝트의 성능이나 데이터, 사용자 경험 최적화를 위해 고려해야 할 부분들이 있는데, 자신이 진행할 프로젝트에서 요구되는 사항에 따라 적절한 방식을 선택하면 된다. 렌더링 시점속도데이터활용SSG빌드타임빠름고정형 데이터마케팅 페이지SSR요청 시느림(서버 요청)최신 데이터실시간 데이터CSR클라이언트 실행 시느림(초기에)클라이언트에서 처리검색 결과ISR빌드 타임,주기적인 재생성빠름조정 가능뉴스, 전자상거래 등  SSG(Static Site Generation)export async function getStaticProps() { const res = await fetch("https://example.com/data"); cons..

지도에 커스텀 오버레이 생성하기  카카오맵 api 공식 문서를 참고해서 지도에 자유롭게 컨텐츠를 표시할 수 있는 커스텀 오버레이를 생성한다. 마커를 클릭할 시 식당의 상호명과 주소를 적당한 ui 안에 나타내기로 했다.   ◆ Custom Hook으로 분리하기  그 전에 점점 길어지고 있는 코드를 정리할 필요가 있었다. supabase에서 식당의 위도와 경도 정보를 가져와서 해당 좌표에 마커를 생성하는 지도 컴포넌트인데, 기능을 추가하다 보니 뭐가 참 많다(...) supabase에서 restaurants 테이블의 정보를 가져오는 부분은 다른 팀원들도 활용할 가능성이 있어서 따로 커스텀 훅을 만들면 좋을 것 같다. import { useEffect, useState } from 'react';import ..