코딩/Next.js (10) 썸네일형 리스트형 개인 최종 프로젝트 시작 나는 개인적으로 좀 매니악한 주제를 선정하여 최종 프로젝트를 진행해보려고 한다.공포를 좋아하는 나는 혼자서 주제를 결정하였고, 와이어프레임을 짜기 시작했다.첫째로, 한국에는 공포 사이트 및 커뮤니티가 부족해서 해외 공포 사이트를 최대한 자료 조사를 하였고,둘째로, 자료 조사를 토대로 레이아웃을 작성해 각 페이지마다 와이어프레임을 작성하고 있다. 그치만, 해외 사이트들도 사진이나 동영상 및 게임 관련된 공포게임 사이트가 없어서 자료가 좀 많이 부족했다. 10/18~10/25 1주차 : 주제 및 기획 선정 완료주제 및 기획 선정 완료 서비스에 맞는 레퍼런스 수집 및 공유 후 선정 완료**10/18~10/21**와이어프레임 완성: 팀원들과 함께 의견을 나누며 와이어프레임 완성 10/22~10/23유저 플로우 .. 뜯 src /app / : next.js 페이지와 라우팅하는 폴더 및 파일api / rotation / route.ts : 서버 측에서 데이터를 가져오고 클라이언트에 전달하는 역할 (환경변수 필요 보안을 위해 따로 뺌)champions / [id] / page.tsx : /champions 경로와 관련된 페이지. 챔피언 목록이나 상세 정보를 보여주는 페이지 포함items / page.tsx : /items 경로 관련 페이지. 모든 아이템 목록을 보여준다.providers / QueryProvider.tsx : 전역으로 적용되는 설정이나 상태 관리와 관련된 컴포넌트rotation / page.tsx : /rotation 경로 관련 페이지. 주기적으로 변경되는 로테이션 챔피언 목록을 보여준다.globals.cs.. 주특기 플러스주차 과제 끝 주특기 플러스주차 과제 Read Me LoL Info App배포 url : https://lol-info-app-1st.vercel.app/ LoL Info App홈챔피언 목록아이템 목록로테이션 챔피언[Your Product Name] is not endorsed by Riot Games and does not reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games andlol-info-app-1st.vercel.app 리그 오브 레전드의 최신 정보를 제공하는 앱입니다. 챔피언, 아이템, 챔피언 로테이션 정보를 확인하세요.. Next.js 주특기 플러스주차 과제 시작 일단 오늘은 정신이 없어서 어디까지 했는지만 적고 끝나고 회고Layout 에서 기본적으로 Header 와 Footer 기본 틀만 잡아놨다.const res = await fetch 로 주소를 불러오고,const version = await fetchLastestVersion 으로 버전 업데이트가 될 때마다 최신화 될 수 있도록 하였고,const champion, items, championDetail 로 해당 api 를 가져왔다. 정적 페이지 같은 경우에는 revalidate 로 24시간마다 재생성 되도록 작성했다. 클라이언트쪽에서 쓰는 HTTP 메서드들과 서버쪽에서 쓰는 NextResponse,NextRequest 등도 있어서 공부를 좀 더 해야 될 것 같고, Object 같은것도 다시 공부해야겠다.... Next.js Router 만들기 과제 각각 App Router를 직접 구현해보기SSR 서버에서 데이터 fetch 해서 렌더링하기SSG 빌드 시 데이터를 fetch 하여 정적 페이지 만들기CSR 클라이언트 측에서 데이터 fetch 해서 렌더링하기ISR 정적으로 생성된 페이지를 일정 시간마다 재생성하도록 설정하기 src 안에 app 폴더만들고 각각 하위폴더 만들기 (SSR,SSG,CSR,ISR)메인 rootpage 를 만들고 각각 nav 를 만들어서 Link 로 연결하기RootPage (메인)- 주의사항 : Link 를 react-router-dom 이 아닌 next/link 로 import 해야 함.import Link from "next/link";import React from "react";const RootPage = () => { .. Route Handler & Server Action Router Handlersweb 요청이나 응답 api를 다루는 것 app / page.js app / api / route.js or route.ts GET / POST / PATCH / PUT / DELETEexport async function GET(request: Request) { console.log("GET /api/test"); } export async function POST(request: Request) { console.log("POST /api/test"); } export async function PUT(request: Request) { console.log("PUT /api/test"); } export async function DELETE(request:.. Suspense, Loading UI, Streaming SSR/Error UI, Error Handling CSR을 사용(use client를 사용하고 async await 는 사용불가) 해서 fetch 를 통해 api 를 불러올 때 로딩이 굉장히 긴데,서버에서 이미 만들어진 사이트를 바로 받아보고 싶을 때 이걸 SSR 로 변경해서 초기 로딩 시간을 단축할 수 있다. next.js 에서 suspense 를 활용하여 비동기 데이터를 더 빠르게 불러오고 먼저 보여줄 수 있다. (React 18 지원) import { Suspense } from 'react';import FastComponent from './FastComponent';import SlowComponent from './SlowComponent';function Page() { return ( {/* Suspense를 사용하여 .. Server Components & Client Component 기본적으로 app 폴더 하위의 모든 컴포넌트는 서버 컴포넌트 1. 서버 컴포넌트(Server Components)서버 컴포넌트는 서버에서 렌더링되는 컴포넌트. 클라이언트 측에서 불필요한 로딩을 줄이기 위해, 서버에서 데이터를 처리하고 HTML을 생성한 후 클라이언트에 전달한다. 그 결과, 클라이언트가 서버로부터 완성된 HTML을 받아 빠르게 렌더링할 수 있어 최초 로딩 시간이 단축되고, SEO에도 유리하다.이점:초기 로딩 속도가 빠름.서버에서 직접 데이터를 처리하므로 클라이언트의 부담을 줄임.검색 엔진 최적화(SEO) 향상. 2. 클라이언트 컴포넌트(Client Components)클라이언트 컴포넌트는 브라우저에서 클라이언트 측에서 렌더링되는 컴포넌트. 일반적으로 사용자와의 상호작용이 많은 UI 요소들이.. 이전 1 2 다음
