# 강의 ## 사전 학습 추천 자료 - [Next.js 란?](https://www.youtube.com/watch?v=jYJ3ygUfPrU) - [Next.js 기본 문법(13 버전 기준)](https://www.youtube.com/watch?v=PCkiz2GUFg8) - [Next.js 14 Tutorial](https://www.youtube.com/watch?v=ZjAqacIC_3c&list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI) ## 프론트엔드 프레임워크 문법 비교 사이트 - [https://component-party.dev](https://component-party.dev) # 1강 - [24 03 27, p 13495, Next.js + Spring Boot 설정, 1강, 스프링부트 프로젝트 생성](https://youtu.be/Ia6Auzis4Pg) - [리포지터리](https://github.com/sik2/nextjsSpringboot2403) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/588ea8) # 2강 - [24 03 27, p 13495, Next.js + Spring Boot 설정, 2강, 스프링부트 설정](https://youtu.be/l8tZppE7zcI) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/689a359) # 3강 - [24 03 27, p 13495, Next.js + Spring Boot 설정, 3강, 스프링부트 시큐리티, 데이터베이스 설정](https://youtu.be/LD_-a78vXIs) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/461cf20) # 4강 - [node.js - https://nodejs.org/](https://nodejs.org/) - [node.js - 다운로드 - https://nodejs.org/en/download/](https://nodejs.org/en/download/) - [24 03 27, p 13495, Next.js + Spring Boot 설정, 4강, Nextjs 설치](https://youtu.be/EXg4mO5A0I8) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/591ace6) - 명령어 ``` # 설치 npx create-next-app@latest # 이후 모두 기본설정으로 엔터 # 실행 npm run dev ``` # 5강 ## REST API ``` GET 다건 // 단건 url.com/articles // url.com/articles/1 POST url.com/articles PACTH / PUT url.com/articles/1 DELETE url.com/articles/1 ``` - [24 03 27, p 13495, Next.js + Spring Boot 설정, 5강, REST API 설명](https://youtu.be/lRsvauVQR80) # 6 강 - [24 03 27, p 13495, Next.js + Spring Boot 설정, 6강, REST API 게시글 GET 요청 - 다건](https://youtu.be/va78InZwWGI) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/7d0e693) # 7 강 - [24 03 27, p 13495, Next.js + Spring Boot 설정, 7강, REST API 게시글 GET 요청 - 단건](https://youtu.be/1_NlChUeqtQ) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/efdc951) # 8 강 - [포스트 맨 다운로드](https://www.postman.com/downloads/) - [24 03 27, p 13495, Next.js + Spring Boot 설정, 8강, POSTMAN 설치](https://youtu.be/NGdkSGeOq9g) # 9 강 - [24 03 27, p 13495, Next.js + Spring Boot 설정, 9강, POSTMAN 활용](https://youtu.be/gdyHGWNDwHE) # 10 강 - [24 03 28, p 13495, Next.js + Spring Boot 설정, 10강, apiSecurityConfig 설정](https://youtu.be/5tn5aa3lP00) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/7be3b08) # 11 강 - [24 03 28, p 13495, Next.js + Spring Boot 설정, 11강, Article MVC 작업](https://youtu.be/gv9UpBp2HGY) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/aa031da) # 12 강 - [24 03 28, p 13495, Next.js + Spring Boot 설정, 12강, NotProd 작업](https://youtu.be/fBxUAp6TXgc) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/5e47e67) # 13 강 - [24 03 28, p 13495, Next.js + Spring Boot 설정, 13강, RsData 추가](https://youtu.be/_OQiii_PA5Q) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/ac09c94) # 14 강 - [24 03 28, p 13495, Next.js + Spring Boot 설정, 14강, RsData 단건 작업](https://youtu.be/COmN-90VhGE) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/3c2c0f9) # 15 강 - [24 03 28, p 13495, Next.js + Spring Boot 설정, 15강, Response 객체 추가](https://youtu.be/Vmm_zQOr4tM) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/c2a76bf) # 16 강 - [24 03 29, p 13495, Next.js + Spring Boot 설정, 16강, Nextjs 구조 설명 페이지와 레이아웃](https://youtu.be/e8aqRYROxaw) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/9f68721) # 17강 - [24 03 29, p 13495, Next.js + Spring Boot 설정, 17강, Nextjs 라우팅 및 페이지 내부 레이아웃 만들기](https://youtu.be/mIU-bO-zh5g) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/52908db) # 18강 - [24 03 29, p 13495, Next.js + Spring Boot 설정, 18강, Nextjs 라우팅 depth 가 추가 될때 처리 방법](https://youtu.be/svpelbConrw) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/90e59f3) # 19강 - [24 03 29, p 13495, Next.js + Spring Boot 설정, 19강, Nextjs 동적(다이나믹) 라우팅](https://youtu.be/SE2Dv8OTvgs) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/e221637) # 21강 - [24 03 29, p 13495, Next.js + Spring Boot 설정, 20강, 스프링부트 CORS 대응](https://youtu.be/zLlQ6yraghc) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/dee9bf6) # 22강 - [24 04 03, p 13495, Next.js + Spring Boot 설정, 22강, CRUD 기능 완성 create 기능 작업 1부](https://youtu.be/kTGuWvZZ4Es) - [24 04 03, p 13495, Next.js + Spring Boot 설정, 22강, CRUD 기능 완성 create 기능 작업 2부](https://youtu.be/BWvUlqTFkH0) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/cea7c4f) ```java @Getter public static class WriteRequest { @NotBlank private String subject; @NotBlank private String content; } @AllArgsConstructor @Getter public static class WriteResponce { private final Article article; } @PostMapping("") public RsData write(@Valid @RequestBody WriteRequest writeRequest) { Article article = this.articleService.create(writeRequest.getSubject(), writeRequest.getContent()); return RsData.of( "S-1", "등록이 완료되었습니다.", new WriteResponce(article) ); } ``` # 23강 - [24 04 03, p 13495, Next.js + Spring Boot 설정, 23강, CRUD 기능 완성 update기능 작업](https://youtu.be/jZfeoS6VVmk) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/72a4067) # 24강 - [24 04 03, p 13495, Next.js + Spring Boot 설정, 24강, CRUD 기능 완성 delete기능 작업](https://youtu.be/IddpDNBUNoA) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/746f052) # 25강 - [24 04 04, p 13495, Next.js + Spring Boot 설정, 25강, 프론트 CRUD 기능 Read 다건 기능 작업](https://youtu.be/8vbQixII78k) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/ccc05e6) - tsconfig.json ```json "checkJs": false, ``` - article page.tsx ```tsx 'use client' import { useEffect, useState } from "react" export default function Article () { const [articles, setArticles] = useState([]); useEffect(() => { fetch("http://localhost:8090/api/v1/articles") .then(result => result.json()) .then(result => setArticles(result.data.articles)) }, []) return ( <>

{row.id} / {row.subject} / {row.createdDate}

) } ``` # 26강 - [24 04 04, p 13495, Next.js + Spring Boot 설정, 26강, 프론트 CRUD 기능 Read 단건 기능 작업](https://youtu.be/VZT2hBQ8xto) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/3150b8e) - 상세페이지 ```js 'use client' import { useParams } from "next/navigation"; import { useEffect, useState } from "react"; export default function ArticleDetail() { const params = useParams(); const [article, setArticle] = useState({}); useEffect(() => { fetch(`http://localhost:8090/api/v1/articles/${params.id}`) .then(result => result.json()) .then(result => setArticle(result.data.article)) }, []) return ( <>

게시판 상세 {params.id}번

{article.subject}

{article.content}

{article.createdDate}

{article.modifiedDate}

); } ``` # 27강 - [24 04 04, p 13495, Next.js + Spring Boot 설정, 27강, 프론트 CRUD 기능 Create 기능 작업](https://youtu.be/_K7r5rKNTLg) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/de817fc) - 게시물 리스트, 등록 페이지 ```js 'use client' import Link from "next/link" import { useEffect, useState } from "react" export default function Article () { const [articles, setArticles] = useState([]) useEffect(() => { fetchArticle() }, []) const fetchArticle = () => { fetch("http://localhost:8090/api/v1/articles") .then(row => row.json()) .then(row => setArticles(row.data.articles)) } return ( <>

{article.id} / {article.subject}

) } function ArticleForm ({fetchArticle}) { const [article, setArticle] = useState({subject: '', content: ''}) const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch("http://localhost:8090/api/v1/articles", { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(article) }); if (response.ok) { alert('게시물이 성공적으로 등록되었습니다.'); fetchArticle() } else { alert('게시물 등록에 실패했습니다.'); } } const handleChange = (e) => { const { name, value } = e.target; setArticle({ ...article, [name]: value }); console.log({ ...article, [name]: value }) } return ( <> ) } ``` # 28강 - [24 04 04, p 13495, Next.js + Spring Boot 설정, 28강, 프론트 CRUD 기능 DELETE 기능 작업](https://youtu.be/7zEs0Dsmdgg) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/49ce8f2) # 29강 - [24 04 04, p 13495, Next.js + Spring Boot 설정, 29강, 프론트 CRUD 기능 UPDATE 기능 작업](https://youtu.be/qPEYf8k3RG4) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/7b8baf6) - 수정 ```js 'use client' import { useParams } from "next/navigation"; import { useEffect, useState } from "react"; export default function ArticleEdit () { const params = useParams(); const [article, setArticle] = useState({subject: '', content: ''}); useEffect(() => { fetchArticle() }, []) const fetchArticle = () => { fetch(`http://localhost:8090/api/v1/articles/${params.id}`) .then(result => result.json()) .then(result => setArticle(result.data.article)) } const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch(`http://localhost:8090/api/v1/articles/${params.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(article) }) if (response.ok) { alert("update ok") } else { alert("update fail") } } const handleChange = (e) => { const {name, value} = e.target; setArticle({...article, [name]: value}) console.log({...article, [name]: value}) } return ( <>

수정페이지

); } ``` # 30강 - [24 04 08, p 13495, Next.js + Spring Boot JWT, 30강, Member 도메인 셋팅](https://youtu.be/fRr4By21M8o) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/7398cb1) # 31강 - [24 04 08, p 13495, Next.js + Spring Boot JWT, 31강, NotProd 수정](https://youtu.be/k36z3bsAodI) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/7a24557) # 32강 - [24 04 08, p 13495, Next.js + Spring Boot JWT, 32강, JwtProvider 작업](https://youtu.be/g3jB4KTxq9U) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/e1eb417) # 33강 - [24 04 11, p 13495, Next.js + Spring Boot JWT, 33강, JwtAuthorizationFilter 1차 작업](https://youtu.be/7WWIoofixdk) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/e1eb417) # 34강 - [24 04 11, p 13495, Next.js + Spring Boot JWT, 34강, 로그인 시 accessToken 발급 1부](https://youtu.be/mbzAHpUy0XY) - [24 04 11, p 13495, Next.js + Spring Boot JWT, 34강, 로그인 시 accessToken 발급 2부](https://youtu.be/NULb8N3GXZc) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/0ef31c8) # 35강 - [24 04 11, p 13495, Next.js + Spring Boot JWT, 35강, 로그인 시 accessToken Cookie 등록 ](https://youtu.be/3ZNZTKIQrm0) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/230d67c) # 36강 - [24 04 11, p 13495, Next.js + Spring Boot JWT, 36강, front accessToken 작업](https://youtu.be/guo8Z9-3jjU) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/2b1067a) # 37강 - [24 04 11, p 13495, Next.js + Spring Boot JWT, 37강, JwtAuthorizationFilter 2차 작업](https://youtu.be/AxdwxFO7-K8) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/c789c9e) # 38강 - [24 04 11, p 13495, Next.js + Spring Boot JWT, 38강, refresh token 작업](https://youtu.be/R4AMijrwSc8) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/4bed204) # 39강 - [24 04 12, p 13495, Next.js + Spring Boot JWT, 39강, Rq 도입 후 코드 정리 작업](https://youtu.be/fZbBNdceFTI) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/f2e2335) # 40강 - [24 04 12, p 13495, Next.js + Spring Boot JWT, 40강, 로그아웃 기능 작업](https://youtu.be/dTta7AJ8Qqc) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/0a60b43) # 41강 - [24 04 12, p 13495, Next.js + Spring Boot JWT, 41강, Axios 도입 front 리펙토링](https://youtu.be/_YH0v542bYQ) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/7319389) # 42강 - [24 04 12, p 13495, Next.js + Spring Boot JWT, 42강, me api 작업](https://youtu.be/cW8juBkfqJw) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/dc9dfcf3) # 43강 - [24 04 18, p 13495, Next.js + Spring Boot JWT, 43강, front 수정 페이지 리펙토링](https://youtu.be/CVMmwckzRKA) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/24186ea) # 44강 - [24 04 18, p 13495, Next.js + Spring Boot JWT, 44강, article dto 작업](https://youtu.be/kyHhTygOiKU) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/57a9336) # 45강 - [24 04 18, p 13495, Next.js + Spring Boot JWT, 45강, 코드리펙토링 팁](https://youtu.be/0gzvGizVJ0c) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/71145e4) # 46강 - [24 04 18, p 13495, Next.js + Spring Boot JWT, 46강, open-api swagger-ui 도입](https://youtu.be/mLLT5ftQ1kU) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/5d4b8a6) # 47강 - [24 04 20, p 13495, Next.js + Spring Boot, react-query@v5 도입(tanstack-query)](https://youtu.be/5GuoQyepi38) ## react-query@v5 도입(tanstack-query) - 의존성 모듈 설치 ```bash $ npm i @tanstack/react-query $ npm i @tanstack/react-query-devtools ``` - ReactQueryProviders.tsx ```jsx 'use client' import { QueryClientProvider, QueryClient } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { useState } from 'react' export default function ReactQueryProviders({ children, }: React.PropsWithChildren) { const [client] = useState( new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // 윈도우가 다시 포커스되었을때 데이터를 refetch refetchOnMount: false, // 데이터가 stale 상태이면 컴포넌트가 마운트될 때 refetch retry: 1, // API 요청 실패시 재시도 하는 옵션 (설정값 만큼 재시도) }, }, }) ) return ( {children} ) } ``` - layout.tsx(root) ```js import ReactQueryProviders from '@/util/ReactQueryProviders' import type { Metadata } from 'next' import { Inter } from 'next/font/google' import Link from 'next/link' const inter = Inter({ 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} ) } ``` - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/4285de7) # 48강 - [24 04 20, p 13495, Next.js + Spring Boot, 48강, front 게시글 상세 페이지 useQuery 적용](https://youtu.be/RLwwcJkeO7U) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/be1eeaa) # 49강 - [24 04 20, p 13495, Next.js + Spring Boot, 49강, front 게시글 목록 useQuery, useMutaion 적용](https://youtu.be/J6GQvjq4q7Q) - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/79726ba) === # 49강 - [24 04 20, p 13495, Next.js + Spring Boot, 49강, front 게시글 등록 useMutaion 적용]() - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/) $$hide # 44강 - [24 04 18, p 13495, Next.js + Spring Boot JWT, 44강, ]() - [GIT](https://github.com/sik2/nextjsSpringboot2403/commit/) - $$