Nextjs
1.React Next.js
React는 <span style="background-color:때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드
2.다시 쓰는 React Next.js #1
아 Nextjs 뭐더라~ 분명히 썼었는데~다시 쓴다~쉽게 풀어 말하면 라이브러리(Library) : 단순 활용가능한 도구들의 집합 같은 느낌내가 사용하고 싶을때 사용하고 사용하고 싶은거 사용하면 된다.프레임워크(Framework) : 프레임워크가 정한 규칙대로 사용해야
3.다시 쓰는 React Next.js #2
Next.js 다양한 기능 layout 패턴 components 폴더에 Layout.js 만들어 NavBer, Header 등 공통으로 사용하는 것을 넣는다. 공통으로 사용하는 것을 _app.js에 작성해도 되지만, 대중적으로 app.js를 크게 하기보단 Layout
4.Next.js - #파일 구조
ㅋㅋ또 쓴다 Next.jsNext.js를 사용해보긴 했지만 주로 react만 사용해서 제대로 이걸 알고 쓴다?는 느낌은 없었다주로 react를 사용한 프로젝트만 했는데 이거 끝나면 Next.js 사용하는 프로젝트에 들어갈거라 해서 다시 공부할거다코딩애플 유튜브 영상보고
5.Next.js - #라우팅
Next.js의 라우팅은 너무 쉽다react 처럼 React Router 뭐 이런 라이브러리 추가적으로 안 깔아도 된다Next.js는 자동 라우팅 기능이 있는데app 폴더의 하위에 새로운 폴더와 새로운 파일(page.js)을 만들면 새로운 폴더의 폴더명과 동일한 URL
6.Next.js - #이미지
Next.js에서 이미지를 넣는 방법은 2가지가 있다일반적인 <img>태그를 사용할 수 있다Next.js에서는 이미지를 주로 public 폴더에 넣고 /경로로 접근하면 바로 public에 접근이 가능하다Next.js에서 제공하는 <img>태그랑 비슷한 역할인
7.Next.js - #server component, client component
Next.js에서는 component가 두가지 종류가 있다 server component와 client component ## server component 기본값이라고 생각하면 편하다 **`'use client'` 없이 만든 건 전부 server component*
8.Next.js - #MongoDB
MongoDB를 연결해볼거다사전에 MongoDB 세팅(가입, admin, db 생성 등)을 해놓고MongoDB 라이브러리(MongoDB 접속이랑 입출력 편하게 도와주는 라이브러리)를 설치해준다npm install mongodbclient component 안에 적은 코
9.Next.js - #Dynamic route
/detail/1, /detail/2, /detail/3...글이 세개 있다고 가정했을 때 위 이미지와 같이 각각 해당되는 이름으로 폴더와 page.js 생성하면 된다하지만 글이 많을 경우, 전부 다 폴더와 파일을 생성할 수 없으니 Dynamic route를 사용해야
10.Next.js - #API
Next.js에서 서버 기능을 만들 때의 폴더 구조는보통 root/app/api, root/pages/api 둘 중 하나를 선택하는데root/app/api가 좀 더 신버전 문법이긴 하지만 아직 되지 않는 기능들이 있어<span style="color:root/pa
11.Next.js - #생성
## POST 게시글을 생성하기 위해 API 코드는 어떻게 작성해야 하는지에 대해 알아보려고 한다 ```javascript export default function Write() { return ( <div> <h4>글 작성</h4>
12.Next.js - #수정
## 수정 게시글을 수정하려고 한다 생성과 크게 다르지 않으므로 자세한 설명은 생략한다 ```javascript // edit/page.js import { connectDB } from '@/util/database'; import { ObjectId } fro
13.Next.js - #삭제, Ajax
`<form>`을 사용해 서버와 통신을 하면 새로고침이 일어난다 또한, `<form>`의 method 속성은 GET, POST만 가능하며 PUT, PATCH, DELETE는 사용할 수 없다 `<form>`을 사용하지 않고 모든 method로 서버와 통신을 하고 싶을
14.Next.js - #데이터 전송, GET
데이터 전송 GET 요청으로도 서버로 데이터 전송이 가능하다 POST 요청으로 데이터 전송할 때 `을 쓰거나 fetch() 안에 body에 넣어서 데이터를 전송할 수 있고 서버에선 요청.body`에 접근하여 수신된 데이터 출력이 가능하다 그런데 GET요청으로도 데이터
15.Next.js - #static rendering, dynamic rendering
Next.js로 만든 서버를 어디 배포하려면 터미널 열어서 npm run build를 먼저해야 한다<span style="color:그 다음에 npm run start 해두면 실제로 유저 요청을 처리할 수 있는 Next.js 서버가 완성된다빌드를 하면 아래 이미지
16.Next.js - #cache
dynamic rendering으로 동작하는 페이지가 많으면 사용자가 그 페이지를 방문할 때마다 계속 다시 페이지를 그려야하기 때문에 서버 부담이 심해질 수도 있다이럴 경우, 캐싱기능을 이용하면 된다캐싱이란 데이터를 잠깐 저장해두고 재사용하는 것이다페이지를 캐싱한다는