# 관련링크 - [재생목록](https://www.youtube.com/playlist?list=PLE0hRBClSk5L08ug4Ocl_ggE1s7ZF8pxb) - [몰입코딩 - 스프링부트, SpringDoc - slog.gg/p/13955](https://slog.gg/p/13955#f) # 1강 - [25 01 10, p 13958, 1강, 백, slog 13955 수업의 24강 소스코드를 복사해서 프로젝트에 적용](https://youtu.be/aNcTd3UKoJk) - [몰입코딩 - 스프링부트, JWT - slog.gg/p/13943#63강](https://slog.gg/p/13955#24강) ## 프로젝트 생성 - [스프링 이니셜라이저 - https://start.spring.io/](https://start.spring.io) - ![img](https://i.postimg.cc/HHm6VSfh/2025-01-10-140808483.png) # 2강 - [25 01 10, p 13958, 2강, 백, GIT PUSH](https://youtu.be/EmMYhU_bsCo) - [GITHUB - 저장소 생성 - https://github.com/new](https://github.com/new) - [GITHUB - 저장소 - https://github.com/jhs512/spring-next.js-2025-01-10](https://github.com/jhs512/spring-next.js-2025-01-10) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/74fa8e4) # 3강 - [25 01 10, p 13958, 3강, 프, next.js 15 설치](https://youtu.be/jDIv8FfqcKY) - [Next.js](https://nextjs.org/) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/d8f2091) ## next.js 15 설치 ```bash cd .. npx create-next-app@latest ``` ![img](https://i.postimg.cc/Zqk2dS15/2025-01-10-142557615.png) # 4강 - [25 01 10, p 13958, 4강, 프, frontend/src/lib/backend/apiV1/schema.d.ts 파일 추가](https://youtu.be/Qf61NYYMtx4) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/21f606f) # 5강 - [25 01 10, p 13958, 5강, 프, `npm run dev` 로 개발서버 뛰우기](https://youtu.be/prUqbg7uRMU) - [http://localhost:3000](http://localhost:3000) ## next.js 개발모드 실행 ```bash npm run dev ``` # 6강 - [25 01 10, p 13958, 6강, 프, Prettier 익스텐션 설치, format on save 켜기, tsx의 기본 포메터를 Prettier로 설정](https://youtu.be/fInHu3caIQE) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/9902989) ## 설명 - 소스코드를 고칠 때 마다 웹 브라이저가 라이브리로드 된다. - tsx 소스코드를 고칠 때 마다 자동으로 Prettier가 실행된다. # 7강 - [25 01 10, p 13958, 7강, 프, layout.tsx 작업 : lang 변경, 헤더/푸터 추가](https://youtu.be/YgCJGWPobRQ) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/cd33e2c) # 8강 - [25 01 10, p 13958, 8강, 프, layout.tsx 작업 : body 의 높이는 최소 화면의 높이보다 만큼은 되어야 한다.](https://youtu.be/8kCIzuptQUE) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/4f6a675) ## 설명 - 리액트에서는 HTML 엘리먼트에 class 속성 대신 className 속성을 사용한다. - body 의 높이는 최소 브라우저 화면의 높이보다 만큼은 되어야 한다. - body의 min-height를 `100dvh`로 설정 - 100dvh : 브라우저 화면의 높이 - body의 height를 조정하지않은 이유 - 유연하지 않음 - `bg-red-500, min-h-[100dvh]` 와 같은 문법을 가능케하는 CSS 라이브러리는 테일윈드(Tailwind CSS) 이다. # 9강 - [25 01 10, p 13958, 9강, 프, 테일윈드 설명, 테일윈드 임의문법](https://youtu.be/kTDt5QzTMy0) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/4f6a675) ## 설명 - 테일윈드 치트시트에서 문법을 검색해보세요. - 테일윈드가 기본적으로 제공하지 않는 기능은 임의문법으로 해결 할 수 있습니다. - EX : `min-h-[100dvh]` 는 테일윈드가 기본적으로 제공하지 않는 문법이다.(임의문법) ## 테일윈드 - [테일윈드](https://tailwindcss.com) - [테일윈드 - 치트시트](https://www.creative-tim.com/twcomponents/cheatsheet) # 10강 - [25 01 10, p 13958, 10강, 프, CSS FLEX 문법은 꼭 학습하세요.](https://youtu.be/bBSmhkAsLn8) ## 최고의 flex 학습자료 - [flex 개구리](https://flexboxfroggy.com/#ko) - 제한시간 : 10분 - [flex 디펜스](http://www.flexboxdefense.com/) - 제한시간 : 15분 - [flex playground](https://codepen.io/enxaneta/debug/adLPwv) - 목표 : flex-grow, flex-shrink, flex-basis 를 직관적으로 이해한다. - [글 - 이번에야 말로 css flex를 익혀보자](https://studiomeal.com/archives/197) - 목표 : flex의 전반적인 내용을 이해한다. # 11강 - [25 01 10, p 13958, 11강, 프, flex로 레이아웃 작업](https://youtu.be/atZ6C-FkS-4) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/b011ab6) # 12강 - [25 01 10, p 13958, 12강, 프, 자기소개 페이지 추가, Next.js 라우팅 시스템 학습](https://youtu.be/TwhQAHVQQlY) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/fd7482b) ## Next.js의 파일 기반 라우팅 시스템 - Next.js는 파일 시스템 기반의 직관적인 라우팅을 제공합니다. `src/app` 디렉토리 내의 폴더 구조가 곧 URL 경로가 됩니다. - 파일명은 꼭 `page.tsx` 이어야 합니다. ## 기본 라우팅 - `/about` 경로 - 파일 위치: `src/app/about/page.tsx` - 설명: 기본적인 정적 라우팅의 예시입니다. - `/about/favorite` 경로 - 파일 위치: `src/app/about/favorite/page.tsx` - 설명: 중첩된 정적 라우팅의 예시입니다. ## 동적 라우팅 - `/post/1`, `/post/2`, `/post/3` 등의 경로 - 파일 위치: `src/app/post/[id]/page.tsx` - 설명: `[id]`와 같은 대괄호를 사용하여 동적 세그먼트를 만들 수 있습니다. - 하나의 동적 라우트 파일로 여러 URL에 대응할 수 있습니다. - URL의 `id` 부분은 페이지 컴포넌트에서 파라미터로 접근 가능합니다. # 13강 - [25 01 10, p 13958, 13강, 프, 리액트에서는 a 태그 대신 Link 태그를 이용해야 초고석 페이지 이동이 가능하다.](https://youtu.be/5wmiSFJe7pc) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/fd7482b) # 14강 - [25 01 10, p 13958, 14강, 프, /post/list 에서 글 목록 출력](https://youtu.be/Ew32RPg4FOk) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/603426f) ## 설명 - async 키워드는 await 을 활용하는 함수에 붙여준다. - await 키워드는 비동기 함수가 완료될 때까지 기다리는 역할을 한다. - 간단하게 오래걸리는 함수 앞에 붙여준다고 생각하면 된다. - fetch : http 요청을 하고 응답을 받을 수 있는 함수이다. - any : 자바의 Object 타입과 같은 역할을 한다. - any를 사용했다는 것은 타입스크립트를 제대로 활용하지 않았다는 것을 의미한다. - 현재 any를 사용한 대가로 받게된 위협요인 1 : 서버에서 통신의 스키마를 바꾸었을 때 클라이언트에서 오류가 발생할 수 있다. - 현재 any를 사용한 대가로 받게된 위협요인 2 : 프론트엔드 개발자가 작업을 할 때 실수로 오타를 내어 오류가 발생할 수 있다. - EX : 제목이 `title` 인데 `subject` 라고 착각할 수 있다. - EX : `items` 라는 배열이 있는데 `posts` 라고 착각할 수 있다. - schema.d.ts 파일을 이용해서 위 문제를 해결할 수 있다. ## app/post/list/page.tsx ```tsx export default async function Page() { const response = await fetch("http://localhost:8080/api/v1/posts"); const body = await response.json(); return (

currentPageNumber: {body.currentPageNumber}

pageSize: {body.pageSize}

totalPages: {body.totalPages}

totalItems: {body.totalItems}

id : {item.id}

createDate : {item.createDate}

modifyDate : {item.modifyDate}

authorId : {item.authorId}

authorName : {item.authorName}

title : {item.title}

published : {`${item.published}`}

listed : {`${item.listed}`}

); } ``` # 15강 - [25 01 13, p 13958, 15강, 프, boolean 타입은 출력될 때 사라집니다.](https://youtu.be/-gCQ1y1mZXY) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/5047d41) ## 자바스크립트에서 boolean 타입이 String 타입으로 잘 출력되게 하는 3가지 방법 - 1. - `String(published)` - 2. - `published + ""` - 3. - `${published}` # 16강 - [25 01 13, p 13958, 16강, 프, 안전성을 높히기 위해서 통신에 사용되는 데이터 타입을 정의](https://youtu.be/4EZ06HFQ4yU) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/dcb75d4) ## 설명 - 타입스크립트에서 타입정보는 필수가 아니다. - 타입정보는 개발 생산성과 안정성 높혀줄 뿐이다. ## app/post/list/page.tsx ```tsx type PostDto = { id: number; createDate: string; modifyDate: string; authorId: number; authorName: string; title: string; published: boolean; listed: boolean; }; type PostItemPageDto = { currentPageNumber: number; pageSize: number; totalPages: number; totalItems: number; items: PostDto[]; }; export default async function Page() { const response = await fetch("http://localhost:8080/api/v1/posts"); const body: PostItemPageDto = await response.json(); return (

currentPageNumber: {body.currentPageNumber}

pageSize: {body.pageSize}

totalPages: {body.totalPages}

totalItems: {body.totalItems}

id : {item.id}

createDate : {item.createDate}

modifyDate : {item.modifyDate}

authorId : {item.authorId}

authorName : {item.authorName}

title : {item.title}

published : {`${item.published}`}

listed : {`${item.listed}`}

); } ``` # 17강 - [25 01 13, p 13958, 17강, 프, 스프링부트의 OPEN API 문서를 기반을 자동생성된 통신 스키마관련 타입 정보를 활용](https://youtu.be/qp9HaRTMtqc) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/583423f) ```tsx import type { components } from "@/lib/backend/apiV1/schema"; type PostDto = components["schemas"]["PostDto"]; type PostItemPageDto = { currentPageNumber: number; pageSize: number; totalPages: number; totalItems: number; items: PostDto[]; }; // 생략 ``` # 18강 - [25 01 13, p 13958, 18강, 프, components["schemas"]["PageDtoPostDto"] 도입](https://youtu.be/culBReLygtU) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/3454f51) ## 설명 - `PageDtoPostDto` 라는 이름은 자바에서 `PageDto` 라는 타입에서 유래한다. - `body.items?` 는 옵셔널 체이닝이다. - 옵셔널 체이닝은 객체의 속성에 접근할 때 해당 속성이 존재하지 않을 수 있음을 명시적으로 표현하는 방법이다. - 옵셔널 체이닝을 사용하면 코드가 더 안전하고 오류를 줄일 수 있다. - 하지만 현재 스프링부트의 구현 상 `body.items` 에 null 이나 undefined 가 들어올 가능성은 없다. - 이 부분은 스프링부트에서 조금 더 세밀하게 타입을 정의해서 해결해야 한다. ## app/post/list/page.tsx ```tsx import type { components } from "@/lib/backend/apiV1/schema"; type PostDto = components["schemas"]["PostDto"]; type PageDtoPostDto = components["schemas"]["PageDtoPostDto"]; export default async function Page() { const response = await fetch("http://localhost:8080/api/v1/posts"); const body: PageDtoPostDto = await response.json(); return (

currentPageNumber: {body.currentPageNumber}

pageSize: {body.pageSize}

totalPages: {body.totalPages}

totalItems: {body.totalItems}

id : {item.id}

createDate : {item.}

modifyDate : {item.modifyDate}

authorId : {item.authorId}

authorName : {item.authorName}

title : {item.title}

published : {`${item.published}`}

listed : {`${item.listed}`}

); } ``` # 19강 - [25 01 13, p 13958, 19강, 백, @NonNull로 타입스크립트에서 nullable 제거, VS 코드에서 타입스크립트 재시작 하는 방법](https://youtu.be/IdBFmvxU0hE) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/32a180c) ## VS CODE 에서 타입스크립트가 제대로 작동하지 않는다면 `F1` 눌러서 `Typescript: Restart Ts Server` 눌러주세요. - ![img](https://i.postimg.cc/mgN45YfM/image.png) # 20강 - [25 01 13, p 13958, 20강, 백, API 응답 DTO의 모든 필드에 @NonNull 어노테이션 추가](https://youtu.be/Pje9j5cGXD0) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/39b0e39) ## VS CODE 에서 타입스크립트가 제대로 작동하지 않는다면 `F1` 눌러서 `Typescript: Restart Ts Server` 눌러주세요. - ![img](https://i.postimg.cc/mgN45YfM/image.png) # 21강 - [25 01 13, p 13958, 21강, 프, 검색기능 추가](https://youtu.be/j3GkPP2ndIY) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/167c653) ## app/post/list/page.tsx ```tsx import type { components } from "@/lib/backend/apiV1/schema"; type PostDto = components["schemas"]["PostDto"]; type PageDtoPostDto = components["schemas"]["PageDtoPostDto"]; export default async function Page({ searchParams, }: { searchParams: { searchKeywordType?: "title" | "content"; searchKeyword?: string; }; }) { const { searchKeyword = "", searchKeywordType = "title" } = searchParams; const response = await fetch( `http://localhost:8080/api/v1/posts?searchKeywordType=${searchKeywordType}&searchKeyword=${searchKeyword}` ); const body: PageDtoPostDto = await response.json(); return (

currentPageNumber: {body.currentPageNumber}

pageSize: {body.pageSize}

totalPages: {body.totalPages}

totalItems: {body.totalItems}

id : {item.id}

createDate : {item.createDate}

modifyDate : {item.modifyDate}

authorId : {item.authorId}

authorName : {item.authorName}

title : {item.title}

published : {`${item.published}`}

listed : {`${item.listed}`}

); } ``` ## `export default async function Page` 함수의 매개변수 부분 코드설명 ```tsx { searchParams, }: { searchParams: { searchKeywordType?: "title" | "content"; searchKeyword?: string; }; } ``` ### 코드설명 - searchParams는 URL의 쿼리스트링을 객체로 받아오는 Next.js의 기능입니다. - 예시 URL: `/post/list?searchKeywordType=title&searchKeyword=안녕` - searchParams.searchKeywordType === "title" - searchParams.searchKeyword === "안녕" - 타입스크립트에서 ?는 선택적(optional) 프로퍼티를 의미합니다. - searchKeywordType?: "title" | "content" - searchKeywordType은 있을 수도 있고 없을 수도 있다. - 있다면 "title" 또는 "content" 값만 가질 수 있다. - searchKeyword?: string - searchKeyword는 있을 수도 있고 없을 수도 있다. - 있다면 문자열이어야 한다. ## `const { searchKeyword = "", searchKeywordType = "title" } = searchParams;` 코드설명 ```tsx const { searchKeyword = "", searchKeywordType = "title" } = searchParams; ``` ### 설명 - searchParams에서 searchKeyword와 searchKeywordType을 추출하는 구문입니다. - 구조 분해 할당(Destructuring assignment)을 사용합니다. - 기본값(Default value)을 설정합니다. - searchKeyword가 없으면 빈 문자열("")을 기본값으로 사용 - searchKeywordType이 없으면 "title"을 기본값으로 사용 - 이렇게 기본값을 설정하면 undefined 체크를 하지 않아도 됩니다. # 22강 - [25 01 13, p 13958, 22강, 프, `const { searchKeyword = "", searchKeywordType = "title" } = await searchParams;` 에서 awiat 은 필수](https://youtu.be/fa4X7w8i8DA) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/15ceda9) ## app/post/list/page.tsx ```tsx import type { components } from "@/lib/backend/apiV1/schema"; type PostDto = components["schemas"]["PostDto"]; type PageDtoPostDto = components["schemas"]["PageDtoPostDto"]; export default async function Page({ searchParams, }: { searchParams: { searchKeywordType?: "title" | "content"; searchKeyword?: string; }; }) { const { searchKeyword = "", searchKeywordType = "title" } = await searchParams; // 생략 } ``` ## 설명 - `const { searchKeyword = "", searchKeywordType = "title" } = await searchParams;` 에서 awiat 은 필수 - 왜냐하면 Next.js 에서는 `searchParams` 로부터 비동기적으로 데이터를 받아오기 때문입니다. - 자바스크립트의 룰이 아니라 Next.js의 룰 입니다. # 23강 - [25 01 13, p 13958, 23강, 프, openapi-fetch 라이브러리 적용하여 fetch의 결과 뿐 아니라 fetch 코드도 실수 없이 작성](https://youtu.be/tZ90zlmnro4) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/98e86df) ### openapi-fetch 라이브러리 - [라이브러리 링크 - https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) ## 설명 - 기존 fetch 요청은 개발자가 실수할 가능성이 존재함(EX : 오타) - openapi-fetch 라이브러리에 우리가 기존에 만든 schema.d.ts 조합하면 절대 실수할 수 없는 fetch 요청 코드를 작성하게 됨 ## openapi-fetch 라이브러리 추가 - openapi-fetch 라이브러리 추가 - [라이브러리 링크 - https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) - `npm i openapi-fetch` - 일반 의존성으로 설치 - `npm i -D openapi-typescript` - 개발 의존성으로 설치 ## app/post/list/page.tsx ```tsx import createClient from "openapi-fetch"; import type { paths } from "@/lib/backend/apiV1/schema"; const client = createClient({ baseUrl: "http://localhost:8080", }); export default async function Page({ searchParams, }: { searchParams: { searchKeywordType?: "title" | "content"; searchKeyword?: string; }; }) { const { searchKeyword = "", searchKeywordType = "title" } = await searchParams; const response = await client.GET("/api/v1/posts", { params: { query: { searchKeyword: searchKeyword, searchKeywordType: searchKeywordType, }, }, }); const responseBody = response.data; return (

currentPageNumber: {responseBody?.currentPageNumber}

pageSize: {responseBody?.pageSize}

totalPages: {responseBody?.totalPages}

totalItems: {responseBody?.totalItems}

id : {item.id}

createDate : {item.createDate}

modifyDate : {item.modifyDate}

authorId : {item.authorId}

authorName : {item.authorName}

title : {item.title}

published : {`${item.published}`}

listed : {`${item.listed}`}

); } ``` # 24강 - [25 01 13, p 13958, 24강, 프, openapi-fetch 도입으로 좋아진 부분 설명](https://youtu.be/e11iShufTbY) # 25강 - [25 01 13, p 13958, 25강, 프, `response.data!!` 사용하여 `responseBody?` 에서 `?` 제거](https://youtu.be/z0jHbA1u-P0) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/fd90ae3) ## 자바스크립트 객체 표현법 3가지 ### 1st : 정석 ```tsx const searchKeyword = "안녕"; const searchKeywordType = "title"; const response = await client.GET("/api/v1/posts", { params: { query: { "searchKeyword": searchKeyword, "searchKeywordType": searchKeywordType, }, }, }); ``` ### 2nd : 키에 특수문자가 없다면 따옴표 생략 가능 ```tsx const searchKeyword = "안녕"; const searchKeywordType = "title"; const response = await client.GET("/api/v1/posts", { params: { query: { searchKeyword: searchKeyword, searchKeywordType: searchKeywordType, }, }, }); ``` ### 3rd : 키와 값에 사용되는 변수의 이름이 같다면 키 생략 가능 ```tsx const searchKeyword = "안녕"; const searchKeywordType = "title"; const response = await client.GET("/api/v1/posts", { params: { query: { searchKeyword, searchKeywordType, }, }, }); ``` # 26강 - [25 01 13, p 13958, 26강, 백, 샘플글이 200개, 그 중 158개가 검색이 되는 글](https://youtu.be/t7jM_EJwDg0) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/e1846a2) # 27강 - [25 01 13, p 13958, 27강, 프, 페이지당 행 수를 결정 하도록](https://youtu.be/e8-avhBNLkc) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/eb7d6bb) # 28강 - [25 01 13, p 13958, 28강, 프, 페이지 메뉴 구현](https://youtu.be/b6V02R86rEQ) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/4cc5082) # 29강 - [25 01 13, p 13958, 29강, 프, 페이지 버튼 누르면 검색어/검색어타입/페이지당 행 수정보가 유지되면서 페이지 이동](https://youtu.be/-OZCkSWi0w4) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/2eac249) # 30강 - [25 01 13, p 13958, 30강, 프, 현재 페이지라면 페이지 버튼의 색상을 red로 변경, 페이지 메뉴를 목록 위에도 표시](https://youtu.be/6HXvte3JrlY) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/0091948) # 31강 - [25 01 13, p 13958, 31강, 프, page.tsx 의 주 역할은 fetch, ClientPage.tsx의 주 역할은 UI 렌더링](https://youtu.be/LxHXTp3FRIk) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/2163dff) ## app/post/list/page.tsx ```tsx import type { paths } from "@/lib/backend/apiV1/schema"; import createClient from "openapi-fetch"; import ClientPage from "./ClientPage"; const client = createClient({ baseUrl: "http://localhost:8080", }); export default async function Page({ searchParams, }: { searchParams: { searchKeywordType?: "title" | "content"; searchKeyword?: string; pageSize?: number; page?: number; }; }) { const { searchKeyword = "", searchKeywordType = "title", pageSize = 10, page = 1, } = await searchParams; const response = await client.GET("/api/v1/posts", { params: { query: { searchKeyword, searchKeywordType, pageSize, page, }, }, }); const responseBody = response.data!!; return ( <> ); } ``` ## app/post/list/ClientPage.tsx ```tsx "use client"; import type { components } from "@/lib/backend/apiV1/schema"; import Link from "next/link"; export default function ClientPage({ searchKeyword, searchKeywordType, page, pageSize, responseBody, }: { searchKeyword: string; searchKeywordType: string; page: number; pageSize: number; responseBody: components["schemas"]["PageDtoPostDto"]; }) { return (

currentPageNumber: {responseBody.currentPageNumber}

pageSize: {responseBody.pageSize}

totalPages: {responseBody.totalPages}

totalItems: {responseBody.totalItems}

{Array.from({ length: responseBody.totalPages }, (_, i) => i + 1).map( (pageNum) => ( {pageNum} ) )}

id : {item.id}

createDate : {item.createDate}

modifyDate : {item.modifyDate}

authorId : {item.authorId}

authorName : {item.authorName}

title : {item.title}

published : {`${item.published}`}

listed : {`${item.listed}`}

{Array.from({ length: responseBody.totalPages }, (_, i) => i + 1).map( (pageNum) => ( {pageNum} ) )}

); } ``` # 32강 - [25 01 13, p 13958, 32강, 프, `e.preventDefault();` 를 붙이면 폼의 전송이 막힙니다.](https://youtu.be/mxDKGdrf8Hk) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/29e82a3) - [CODEPEN - preventDefault](https://codepen.io/jhs512/pen/vYpQxqy) - A 엘리먼트의 링크 클릭 이벤트를 막는 예제 - FORM 엘리먼트의 폼 전송을 막는 예제 ## app/post/list/ClientPage.tsx ```tsx // 생략 export default function ClientPage({ searchKeyword, searchKeywordType, page, pageSize, responseBody, }: { searchKeyword: string; searchKeywordType: string; page: number; pageSize: number; responseBody: components["schemas"]["PageDtoPostDto"]; }) { return (

{/* 생략 */}

); } ``` # 33강 - [25 01 13, p 13958, 33강, 프, useRouter 이용해서 form 검색 시 페이지 수준의 리렌더링이 아닌 부드럽게 처리](https://youtu.be/QIgmcg2NvyU) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/ff3802e) - [글 - Next.js 에서 a 엘리먼트 이동 vs Link 엘리먼트 이동 차이](https://gist.github.com/jhs512/abf65d867c7e57edcbb56342b3edfbc3) ## app/post/list/ClientPage.tsx ```tsx // 생략 import Link from "next/link"; // 생략 export default function ClientPage({ searchKeyword, searchKeywordType, page, pageSize, responseBody, }: { searchKeyword: string; searchKeywordType: string; page: number; pageSize: number; responseBody: components["schemas"]["PageDtoPostDto"]; }) { const router = useRouter(); return (

{/* 생략 */}

); } ``` # 34강 - [25 01 13, p 13958, 34강, 프, 게시물 상세페이지, 현재는 글 번호만 나옴](https://youtu.be/vbpfTlzXQ8g) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/8f4cee4) # 35강 - [25 01 13, p 13958, 35강, 프, 게시물 상세페이지, 제목, 내용, 작성일, 수정일](https://youtu.be/Alls3C9aNgQ) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/f35e394) # 36강 - [25 01 13, p 13958, 36강, 백, @NonNull 때문에 오류에 대한 응답에서 data 가 null 이면 안된다. Empty 도입](https://youtu.be/wxNGOgZw2GM) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/83ee1df) ## 설명 - Jackson은 @NonNull 어노테이션이 붙은 필드가 null일 때 오류를 발생시킵니다. - 해결 : Empty 객체를 도입하여 null 대신 빈 객체를 반환하도록 했습니다. - Jackson은 비어있는 객체를 직렬화할 때 오류를 발생시킵니다. - 해결 : FAIL_ON_EMPTY_BEANS 옵션을 false로 설정하여 비어있는 객체를 직렬화하도록 했습니다. # 37강 - [25 01 13, p 13958, 37강, 백, 아무 예외 핸들러에 `@ResponseStatus(HttpStatus.BAD_REQUEST)` 붙이면 SpringDoc이 학습함](https://youtu.be/jogAX_gI3cA) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/8040daf) ## 설명 - 아무 예외 핸들러에 `@ResponseStatus(HttpStatus.BAD_REQUEST)`를 붙이면 SpringDoc이 학습함 - `@ResponseStatus(HttpStatus.BAD_REQUEST)`를 붙이는 행위는 실제로 해당 예외 핸들러의 작동에 영향을 주지는 않습니다. - 그런데 SpringDoc은 예외 핸들러 메서드 중에서 `@ResponseStatus(HttpStatus.BAD_REQUEST)` 붙은게 있다면 - 해당 메서드의 타입을 예외에 대한 응답타입으로 인식합니다. - `if (response.error) { return <>{response.error.msg}; }` - 해당작업 덕분에 프론트에서 위와 코드로 예외 메시지를 출력할 수 있습니다. - 그 전에는 `response.error` 의 타입이 undefined 였습니다. - 왜냐하면 그때까지는 아직 SpringDoc이 해당 API서버가 예외상황에서 어떠한 응답을 반환하는지 모르고 있었기 때문입니다. # 38강 - [25 01 13, p 13958, 38강, 백, 스프링부트가 관리하는 ObjectMapper를 Util 클래서 주입, static 변수에 빈 주입하는 방법](https://youtu.be/_0j7YTu7huk) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/7bfa077) ## com.ll.next_js_2025_01_10.global.app.AppConfig.java - 아래 메서드는 `AppConfig.getObjectMapper()` 와 같이 사용하면 됩니다. - static 으로 만든이유 : 스프링 빈이 아닌 일반 클래스에서도 ObjectMapper를 사용할 수 있도록 하기 위해서입니다. 스프링의 의존성 주입 없이도 정적 메서드를 통해 어디서든 ObjectMapper에 접근할 수 있습니다. ```java package com.ll.next_js_2025_01_10.global.app; import com.fasterxml.jackson.databind.ObjectMapper; import lombok.Getter; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; @Configuration public class AppConfig { @Getter private static ObjectMapper objectMapper; @Autowired public void setObjectMapper(ObjectMapper objectMapper) { AppConfig.objectMapper = objectMapper; } public static boolean isNotProd() { return true; } } ``` # 39강 - [25 01 14, p 13958, 39강, 프, 상단 메뉴에 로그인 페이지 추가](https://youtu.be/binhtRY_c5w) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/473c5f3) # 40강 - [25 01 14, p 13958, 40강, 프, layout.tsx 에서 ClientLayout.tsx 분리](https://youtu.be/9en_yp5Av54) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/986387d) ## app/layout.tsx ```tsx import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import ClientLayout from "./ClientLayout"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ## app/ClientLayout.tsx ```tsx "use client"; import Link from "next/link"; export default function ClientLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <>

홈 소개 글 로그인

{children}

); } ``` ## Next.js에서 하나의 페이지를 서버 컴포넌트 부분과 클라이언트 컴포넌트 부분으로 나누는 이유 - 서버 컴포넌트는 서버에서 실행되어 초기 HTML을 생성하므로 초기 로딩 속도가 빠르다. - 클라이언트 컴포넌트는 브라우저에서 실행되어 상호작용이 필요한 기능을 구현할 수 있다. - 이렇게 나누면 각각의 장점을 최대한 활용할 수 있다. - 서버 컴포넌트는 데이터베이스 접근이나 파일시스템 접근 등 서버 리소스에 직접 접근할 수 있다. - 클라이언트 컴포넌트는 useState, useEffect 등의 React 훅을 사용할 수 있고 브라우저 API를 활용할 수 있다. # 41강 - [25 01 14, p 13958, 41강, 프, 로그인 페이지에서 로그인 폼 구현, CORS 문제로 인해 실패](https://youtu.be/7D3TTpvIZks) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/a97ae44) # 42강 - [25 01 14, p 13958, 42강, 프, 오직 브라우저에서 타 도메인 서버로 fetch 요청할 때 CORS 문제가 발생한다.](https://youtu.be/WSe73m2Eve0) ## CORS란 CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 다른 도메인의 리소스에 접근하는 것을 제한하는 정책입니다. 예를 들어: - 프론트엔드: http://localhost:3000 - 백엔드: http://localhost:8080 위와 같이 도메인이 다른 경우 브라우저는 기본적으로 요청을 차단합니다. CORS 문제를 해결하기 위한 방법: 1. 백엔드에서 Access-Control-Allow-Origin 헤더 설정 2. 프록시 서버 사용 3. 서버사이드 렌더링 활용 주의할 점: - CORS는 브라우저에서만 발생하는 제약사항입니다. - Postman이나 서버 간 통신에서는 CORS 제약이 없습니다. - 보안을 위한 중요한 정책이므로 신중하게 설정해야 합니다. # 43강 - [25 01 14, p 13958, 43강, 백, 특정 도메인에 대해서 CORS 허용](https://youtu.be/cxOXDN84lFY) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/bc8d231) # 44강 - [25 01 14, p 13958, 44강, 프, `credentials: "include"` 옵션으로 타도메인 fetch에 대한 쿠키작동이 잘 되도록](https://youtu.be/e68LUlgAMfQ) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/212c8e3) # 45강 - [25 01 14, p 13958, 45강, 프, 내 정보 페이지의 내용을 클라이언트 컴포넌트에서 fetch, 번거로움](https://youtu.be/6MCwOYrjngE) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/fe129c0) # 46강 - [25 01 14, p 13958, 46강, 프, 서버 컴포넌트에서 fetch, 편함, 대신 브라우저에서 받아온 쿠키를 받아서 백엔드로 fetch할 때 적용해야 함](https://youtu.be/SZQGPg7EFfE) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/3a3c9a6) # 47강 - [25 01 14, p 13958, 47강, 프, 로그아웃](https://youtu.be/_91tfK6I-X0) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/f507039) # 48강 - [25 01 14, p 13958, 48강, 프, layout 렌더링 시 로그인 상태에 따른 메뉴 노출](https://youtu.be/8qeYkZTVwwo) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/15103c5) # 49강 - [25 01 14, p 13958, 49강, 프, 로그인/로그아웃 후에 전체 페이지 리로드하여 layout 리렌더링 유발](https://youtu.be/HFxrDL_OisQ) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/1f727aa) # 50강 - [25 01 14, p 13958, 50강, 프, 회원가입 후 로그인 페이지로 이동](https://youtu.be/0clORdaRKMk) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/1d31ede) # 51강 - [25 01 15, p 13958, 51강, 프, 본인의 비밀글을 못 보는 버그 해결, page.tsx 에서 fetch 시 무조건 쿠키 적용](https://youtu.be/wJ6EKTcUU1g) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/65e9646) # 52강 - [25 01 15, p 13958, 52강, 프, 글 쓰기](https://youtu.be/wcyYeVrNcbE) - [커밋 - layout 에 `글 쓰기` 버튼 추가](https://github.com/jhs512/spring-next.js-2025-01-10/commit/9423af1) - [커밋 - 글 쓰기 페이지 구현](https://github.com/jhs512/spring-next.js-2025-01-10/commit/0776f2d) - [커밋 - 글 쓰기 시 공개여부, 검색가능여부 입력](https://github.com/jhs512/spring-next.js-2025-01-10/commit/ce3192c) # 53강 - [25 01 15, p 13958, 53강, 프, 글 수정](https://youtu.be/gCikVZzv4Dw) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/d06761c) # 54강 - [25 01 15, p 13958, 54강, 프, 글 상세페이지에서 수정 페이지로 이동하는 링크버튼 추가](https://youtu.be/geR-7j3TGaM) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/21cdb46) # 55강 - [25 01 15, p 13958, 55강, 프, 수정할 권한이 있는지 체크 후 수정버튼 노출](https://youtu.be/feQV9N6RF-8) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/d7a1a37) # 56강 - [25 01 15, p 13958, 56강, 프, 삭제할 권한이 있는지 체크 후 삭제버튼 노출, 삭제 구현](https://youtu.be/zFJOpaiTe6w) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/edbe220) # 57강 - [25 01 15, p 13958, 57강, 백, PostWithContentDto에 actorCanDelete, actorCanModify 추가](https://youtu.be/QzH50rb8lqo) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/711312d) ## com.ll.next_js_2025_01_10.app.post.entity.Post.java 의 변경사항 - 기존 : `checkActorCanDelete` 메서드만 있어도 됨 - 변경 : `checkActorCanDelete` 메서드와 `getCheckActorCanDeleteRs` 메서드 둘 다 있어야 함 - `checkActorCanDelete` 메서드와 `getCheckActorCanDeleteRs` 메서드 는 로직이 같지만 결과에 대한 처리가 다름 - 핵심 로직은 `getCheckActorCanDeleteRs` 에 구현 - `checkActorCanDelete` 는 `getCheckActorCanDeleteRs` 의 결과를 확인하여 예외를 발생시키거나 아무 일도 일어나지 않도록 함 - `checkActorCanDelete` 작동방식 - 실패 : 예외 발생 - 성공 : 아무 일도 일어나지 않음 - `getCheckActorCanDeleteRs` 작동방식 - 실패 : RsData.OK 리턴 - 성공 : 예외정보를 담은 RsData 리턴 ### 기존 ```java // 생략 public class Post extends BaseTime { // 생략 public void checkActorCanDelete(Member actor) { if (actor == null) throw new ServiceException("401-1", "로그인 후 이용해주세요."); if (actor.isAdmin()) return; if (actor.equals(author)) return; throw new ServiceException("403-1", "작성자만 글을 삭제할 수 있습니다."); } // 생략 } ``` ### 변경 ```java // 생략 public class Post { // 생략 public RsData getCheckActorCanDeleteRs(Member actor) { if (actor == null) return new RsData<>("401-1", "로그인 후 이용해주세요."); if (actor.isAdmin()) return RsData.OK; if (actor.equals(author)) return RsData.OK; return new RsData<>("403-1", "작성자만 글을 삭제할 수 있습니다."); } public void checkActorCanDelete(Member actor) { Optional.of( getCheckActorCanDeleteRs(actor) ) .filter(RsData::isFail) .ifPresent(rsData -> { throw new ServiceException(rsData.getResultCode(), rsData.getMsg()); }); } // 생략 } ``` # 58강 - [25 01 15, p 13958, 58강, 프, checkActorCanDelete, checkActorCanModify 필드 활용하여 권한체크로직을 프론트에서 제거](https://youtu.be/JKvzb13W_iE) - [커밋](https://github.com/jhs512/spring-next.js-2025-01-10/commit/f0cc608)

스프링부트, Next.js 연동