NextJS to CodingApple

코딩애플 강의를 통해 배운 NextJS를 정리한 글입니다.

📅 작성일

2025년 4월 05일

---

📌 목차

1. 소개
2. part1-1 : 새로운 프로젝트 생성 / MongoDB 셋팅
3. part1-2 : Next.js에서 MongoDB 사용하기
4. part1-3 : 글목록 조회기능 만들기 (DB 데이터 출력)
5. part1-4 : 상세페이지 만들기 1 (Dynamic route)
6. part1-5 : 상세페이지 만들기 2 (useRouter)
7. part1-6 : 글 작성기능 만들기 1 (서버기능 개발은)
8. part1-7 : 글 작성기능 만들기 2
9. part1-8 : 수정기능 만들기 1
10. part1-9 : 수정기능 만들기 2
11. part1-10 : 좋아요 버튼 만들기 2 (array, object state 변경하려면)
12. 참고 자료

---

📝 소개

Part 1 : 애플후레시

---

part1-1

🔹 CSR, SSR

• client-side rendering은 브라우저에서 html을 실시간으로 만드는 방법
• server-side rendering은 서버에서 html을 미리 만들어 보냄

🔹 CSR

• 이쁘고 부드러운 사이트는 만들 수있음
• 첫 페이지 로딩속도저하, 검색노출어려움 같은 단점
• 웹사이트의 bounce rate 이런 지표들이 낮아지고 트래픽 잡으려고 광고비도 많이듬

🔹 SSR

• 서버에서 html을 미리 만들어주기 때문에 위의 단점들이 사라짐

---

part1-2

🔹 설치 시작

• npx create-next-app@14
• npm run dev

---

part1-3

🔹 기본문법

---

part1-4

🔹 라우팅

• 폴더만들면 알아서 라우팅됨
• app/list/page.js

🔹 공통 레이아웃

• layout.js파일에다가 쓰면됨

---

part1-5

🔹 map함수

---

part1-6

🔹 이미지 최적화

• lazy loading
• 사이즈 최적화
• layout shift 방지 : 이미지 때문에 레이아웃 밀려나는 현상

import Image

• import Image from "next/image";
• src는 {임포트해온것}을 넣는다
• 그 외 다른데이터는 width height를 프롭스로 넣어줘야하며, next.config에 셋팅을 해주어야한다

---

part1-7

🔹 server component

• 기본적으로 서버컴포넌트
• html에 자바스크립트 기능 넣기 불가능
• 로딩속도 빠름
• 검색엔진 노출 유리

🔹 client component

• html에 자바스크립트 기능 넣기 가능
• use client 맨 위에 적으면 클라이언트 컴포넌트
• 로딩속도 느림 (hydration필요)

---

part1-8

🔹 props

• 부모에서 자식에게 데이터 보내는것
• 서버에서 데이터일 경우 부모 자식 같은 데이터를 써도 한개로 압축함 deduplication

---

part1-9

🔹 useState 기본

---

part1-10

🔹 javascript reference data type

• 원시형, 참조형

---

📚 참고 자료

• 코딩애플 강의
• 내 깃허브