FE
[Next.js] page router ์ฌ์ ๋ ๋๋ง๊ณผ ๋ฐ์ดํฐํ์นญ
ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ Next.js ํ์ต์ ๋ฆฌ์ฉ์ ๋๋ค. 2.10) ์ฌ์ ๋ ๋๋ง๊ณผ ๋ฐ์ดํฐํ์นญReact app ์์์ ๋ฐ์ดํฐ ํ์นญ๋ฆฌ์กํธ ์ฑ์ CSR๋ก ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋ง์ ์ง์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ผ๋ก ๋์ํ๋ค.๋ฐ๋ผ์ FCP ์์ ์ผ๋ก ์ค๊ธฐ๊น์ง๋ ์ค๋ ๊ฑธ๋ฆฐ๋ค. ๋ฆฌ์กํธ ์ฑ์์ ๋ฐ์ดํฐ ํ์นญ์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋ ์ดํ์ ์งํ๋๊ธฐ ๋๋ฌธ์ FCP ์ดํ์ ์ถ๊ฐ์ ์ธ ์๊ฐ์ด ์์๋๋ค.์ฆ, ๋ฐ์ดํฐ ์์ฒญ ์์ ์ด ๋๋ ค์ง๊ฒ ๋๋ ๋จ์ ๋ฐ์ Next.js์ ๋ค์ํ ์ฌ์ ๋ ๋๋ง1. ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง(SSR)์ฌ์ ๋ ๋๋ง์ ๊ณผ์ ์ค์ ๋ฐ์ดํฐ ํจ์นญ์ ๋์์ ์ํํ ์ ์๋ค.๋ฐ๋ผ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ ์์ ์ด ๋งค์ฐ ์์๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ์์๊ฒ ๋ฐ์ดํฐ ํจ์นญ์ด ์ด๋ฏธ ์๋ฃ๋ ์นํ์ด์ง๋ฅผ ์ถ๊ฐ์ ์ธ ๋ก๋ฉ ์์ด ๋ณด์ฌ์ค ์ ์๋ค.์ด๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ ๋ ๋๋ง ๋ฐฉ์์ด๊ณ ,..
[Next.js] page router ํ์ด์ง๋ณ ๋ ์ด์์ ์ค์
ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ Next.js ํ์ต์ ๋ฆฌ์ฉ์ ๋๋ค. 2.8) ํ์ด์ง๋ณ ๋ ์ด์์ ์ค์ ํ๊ธฐํ์ด์ง๋ณ๋ก ํน์ Layout ์ปดํฌ๋ํธ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒimport SearchableLayout from "@/components/searchable-layout";import style from "./index.module.css";import { ReactNode } from "react";export default function Home() { return ( ์ธ๋ฑ์ค H2 );}Home.getLayout = (page: ReactNode) => { return {page};}; ํ์ด์ง๋ง๋ค ํน์ Layout ์ปดํฌ๋ํธ๋ฅผ ์ ์ฉํด์ผ ํ ๋๊ฐ ์๋๋ฐ, ๊ทธ๋ด ๋๋ getLayout ๋ฉ..
[Next.js] page router - API Routes
ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ Next.js ํ์ต์ ๋ฆฌ์ฉ์ ๋๋ค. 2.5) API Routes2.5 API RoutesAPI Routs๋?Next.js ์ฑ์์ API๋ฅผ ๊ตฌ์ถํ ์ ์๋๋ก ๋์์ฃผ๋ ๊ธฐ๋ฅ๋ง์น ๋ฐฑ์๋ API ์๋ฒ๊ฐ ํ๋ ์ผ๊ณ ๋์ผํ๊ฒ ๊ฐ๋จํ API๋ฅผ ๊ตฌ์ถํด์ ๋ธ๋ผ์ฐ์ ๋ก๋ถํฐ ์์ฒญ์ ๋ฐ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๋ฐ์ดํฐ๋ฅผ ๊บผ๋ด์จ๋ค๋๊ฐ ์๋๋ฉด ๋ค๋ฅธ ์๋ํํฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์์ ์ ๋ฌ์ ํด์ค๋ค๋ ๋ฑ์ ๋์์ ๋ง๋ค ์ ์๋ค. API Routes ์ค์ตpages/api ์๋์ API ๊ฒฝ๋ก๋ก ๋ง๋ค๊ณ ์ถ์ ์ด๋ฆ์ผ๋ก ํ์ผ ๋ง๋ค์ด์ค๋ค. (ex api/time ์ผ๋ก ํ๊ณ ์ถ์ผ๋ฉด time.ts)import type { NextApiRequest, NextApiResponse } from "next";export default functi..
[Next.js] page router - ํ๋ฆฌํ์นญ
ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ Next.js ํ์ต์ ๋ฆฌ์ฉ์ ๋๋ค. 2.4) ํ๋ฆฌํ์นญ2.4 ํ๋ฆฌํ์นญํ๋ฆฌํ์นญ(Pre-Fetching)์ด๋?ํ์ฌ ๋ณด๊ณ ์๋ ํ์ด์ง์์ ๋งํฌ๋ค์ ํตํด ์ด๋ํ ์ ์๋ ๋ชจ๋ ํ์ด์ง๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ฌ์ ์ ๋ฏธ๋ฆฌ ๋ค ๋ถ๋ฌ์ค๋ ๊ธฐ๋ฅ ํ๋ฆฌํ์นญ์ด ํ์ํ ์ด์ ์ฌ์ ๋ ๋๋ง ํํธ์์ ์๋ Next.js์์ ์ด๊ธฐ ์ ์ ์์ฒญ์ด ๋ฐ์ํ๋ฉด ์๋ฒ๊ฐ ๋ธ๋ผ์ฐ์ ์๊ฒ html ํ์ด์ง๋ฅผ ์๋ตํ ์ดํ์ ํ์์ผ๋ก ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ฒ๋ค ํ์ผ ํํ๋ก ์ ๋ฌ์ ํด์ฃผ๊ณ , ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ฒ๋ค ํ์ผ ํํ๋ก ์ ๋ฌํด์ฃผ๊ธฐ ๋๋ฌธ์ ํ์ด์ง ์ด๋์ด ๋ฐ์ํ์ ๋ ์๋ฒ์๊ฒ ๋ณ๋์ ์์ฒญ ์์ด ๋ธ๋ผ์ฐ์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํ์์ผ์(ํด๋ผ์ธ์ธํธ ์ฌ์ด๋ ๋ ๋๋ง) ์์์ ์ฒ๋ฆฌ๋ฅผ ํ๋ค๊ณ ํ๋ค. Next.js๋ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ค..
[Next.js] Page Router, ์ค์ , ๋ค๋น๊ฒ์ดํ
ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ Next.js ํ์ต์ ๋ฆฌ์ฉ์ ๋๋ค. 2.1) Page Router๋ฅผ ์๊ฐํฉ๋๋ค.2.2) ํ์ด์ง ๋ผ์ฐํ ์ค์ ํ๊ธฐ2.3) ๋ค๋น๊ฒ์ดํ 2.1 Page Router๋ฅผ ์๊ฐํฉ๋๋คPage Router ๋?๋ง์ ๊ธฐ์ ์์ ํ์ฉ๋๊ณ ์๋ ๊ฐ์ฅ ์์ ์ ์ธ ๋ผ์ฐํฐํน์ ์กฐ๊ฑด์ ๊ธฐ์ค์ผ๋ก ์น์๋น์ค ๋ด์ ํ์ด์ง๋ฅผ ๋ถํ ํ๊ณ ๋ ๊ทธ๋ ๊ฒ ๋ถํ ๋ ํ์ด์ง ๊ฐ์ ์ด๋์ ์ฒ๋ฆฌํ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ผ์ ์ด๋ฆ(ํน์ ํด๋์ ์ด๋ฆ)์ ๊ธฐ๋ฐ์ผ๋ก ํ์ด์ง ๋ผ์ฐํ ์ ์ ๊ณต ๋์ ๊ฒฝ๋ก/page/1, /page/2... ์ฒ๋ผ ๊ฐ๋ณ์ ์ธ ๊ฐ์ ํฌํจํ๊ณ ์๋ ๊ฒฝ๋ก(๋ธ๋ก๊ทธ ๊ฒ์๊ธ ์ฃผ์ ๋ฑ)/page ํด๋ ํ๋จ์ [id].js ๋ก ๋๊ดํธ๋ฅผ ํตํด ๋ง๋ค์ด์ค ์ ์๋ค. npx(node package execute)๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ์ค์ ๋ก ์ฌ๋ผ๊ฐ์๋ ์๋ฒ์ธ npmjs...
[Next.js] Next.js?
ํ ์ ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ Next.js ํ์ต์ ๋ฆฌ์ฉ์ ๋๋ค. 1.1) Next.js๋ฅผ ์๊ฐํฉ๋๋ค.1.2) Next.js ์ฌ์ ๋ ๋๋ง ์ดํดํ๊ธฐ1.3) ์ค์ต์ฉ ๋ฐฑ์๋ ์๋ฒ ์ธํ ํ๊ธฐ1.4) ๋ณธ๊ฒฉ์ ์ธ ํ์ต์ ์์Next.js ๋ผ๋ ๊ธฐ์ ์ ์ด๋ค ํน์ง์ ๊ฐ์ง๊ณ ์๋๊ฐ?Next.js- Next.js : ๋ฆฌ์กํธ๋ง์ ์ํ ๋ฆฌ์กํธ ์ ์ฉ์ ์น ๊ฐ๋ฐ ํ๋ ์์ํฌ ๊ธฐ์กด์ ๋ฆฌ์กํธ ๊ธฐ์ + ํ์ด์ง ๋ผ์ฐํ + ๋ค์ํ ์ต์ ํ ๊ธฐ๋ฅ ๋ฑ๋ฑ์ ์ถ๊ฐ ๊ธฐ๋ฅ๋ค์ ๋ช ๊ฐ ๋ง๋ถ์ฌ ๋์ ๋ฆฌ์กํธ์ ํ์ฅํ vercel์์ ๊ฐ๋ฐFramework vs LibraryNext.js๋ ๋ฆฌ์กํธ ์ ์ฉ์ ์น ๊ฐ๋ฐ ํ๋ ์์ํฌ์ด์ง๋ง, React๋ UI ๊ฐ๋ฐ์ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. 1. ๊ธฐ๋ฅ ๊ตฌํ์ ์ฃผ๋๊ถ์ด ๋๊ตฌ์๊ฒ ์๋๊ฐFramework : ์ฃผ๋๊ถ์ Framework๊ฐ ๊ฐ..
[Next.js] reactStrictMode
https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictModeGood to know: Since Next.js 13.5.1, Strict Mode is true by default with app router, so the above configuration is only necessary for pages. You can still disable Strict Mode by setting reactStrictMode: false.์ถ์ฒ | https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictModeNext.js์์๋ next.config.js์ ..
[JavaScript] ์คํ ์ปจํ ์คํธ(execution context)
๋ค์ด๊ฐ๊ธฐ ์ ์คํ ์ปจํ ์คํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋์ ์๋ฆฌ๋ฅผ ๋ด๊ณ ์๋ ํต์ฌ ์๋ฆฌ์ด๋ค.๋ฐ๋ผ์ ์คํ์ปจํ ์คํธ๋ ์๋ ๊ฐ๋ ๋ค์ ๋์์๋ฆฌ๋ฅผ ๋ด๊ณ ์๋ค.- ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ค์ฝํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์๋ณ์์ ์๋ณ์์ ๋ฐ์ธ๋ฉ๋ ๊ฐ์ ๊ด๋ฆฌํ๋ ๋ฐฉ์- ํธ์ด์คํ ์ด ๋ฐ์ํ๋ ์ด์ - ํด๋ก์ ์ ๋์ ๋ฐฉ์- ํ์คํ ํ์ ํจ๊ป ๋์ํ๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ์ ๋์ ๋ฐฉ์์คํ ์ปจํ ์คํธ๋?์คํ ์ปจํ ์คํธ๋ ์์ค์ฝ๋๋ฅผ ์คํํ๋ ๋ฐ ํ์ํ ํ๊ฒฝ ์ ๋ณด๋ฅผ ๋ชจ์๋์ ๊ฐ์ฒด์ด๋ค. ์ฆ, ์คํ ์ปจํ ์คํธ๋ ๋ณ์, ํจ์, ํด๋์ค ๋ฑ์ ์ด๋ฆ์ธ ์๋ณ์๋ฅผ ๋ฑ๋กํ๊ณ ๊ด๋ฆฌํ๋ ์ค์ฝํ๋ผ๋ ํ๊ฒฝ ์ ๋ณด๋ฅผ ๊ตฌ์ฑํ๊ณ , ์ปจํ ์คํธ๋ฅผ ์ฝ ์คํ์ ์์์ฌ๋ ค ๊ฐ์ฅ ์์ ์๋ ์ปจํ ์คํธ๋ฅผ ์คํํ์ฌ ์ฝ๋์ ์คํ์์๋ฅผ ๋ณด์ฅํ๋ค.์คํ ์ปจํ ์คํธ๊ฐ ์์ฑ๋๋ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์คํฌ๋ฆฝํธ๋ฅผ ์ฒ์ ์คํํ ๋..
[JavaScript] ๋ณ์์ ์ฌํ ๋น ๊ณผ์
๋ณ์์๋ ๋ฉ๋ชจ๋ฆฌ์ ์ฃผ์๊ฐ ์ ์ฅ๋์ด ์๋ค. ๊ทธ๋ฌ๋๊น, ํน์ ๊ฐ์ด ์ ์ฅ๋์ด ์๋ ๊ฒ์ด ์๋, ํน์ ๊ฐ์ด ์ ์ฅ๋์ด ์๋ ๋ฉ๋ชจ๋ฆฌ์ ์ฃผ์๋ฅผ ๊ฐ์ง๊ณ ์๋ ๊ฒ์ด๋ค. ๋ณ์์ ๊ฐ์ด ์ฌํ ๋น๋ ๋ ํด๋น ๊ฐ์ด ์คํ์ ์กด์ฌํ๋ฉด ๊ทธ ์คํ ์ฃผ์๋ก ํ ๋น๋๋ค๋ ๋ด์ฉ์ ๋ณธ ๊ฒ ๊ฐ์๋ฐ, ๊ฐ์ด ๊ฐ๋๋ผ๋ ๋ค๋ฅธ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์์ ๊ฐ์ด ์ ์ฅ๋๋ ์ค ์์๋๋ฐ ๊ทธ๊ฒ ์๋์ด์ ์ข ๋ ์ ํํ๊ฒ ๊ณต๋ถํด์ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.๋ณ์์ ์ข ๋ฅ์ ๋ฐ๋ผ ์ ์ฅ๋๋ ์์น๊ฐ ๋ค๋ฅด๋ค.๋ฉ๋ชจ๋ฆฌ๋ 4๊ฐ์ ์์ญ์ด ์๊ณ , ์ ์ญ๋ณ์, ์ง์ญ๋ณ์, ์ฝ๋, ๋์ ํ ํ ๋น์ ๋ฐ๋ผ ์ ์ฅ๋๋ ์์น๊ฐ ๋ค๋ฅด๋ค.์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ํ์์ญ๊ณผ ์ฝ์คํ์ ์ฌ์ฉํ๋ค.์ฝ์คํ์์ ํ์ ๋ฐ์ดํฐ๊ฐ ์ ์ฅ๋๋ค.๋ณ์์ ์ ์ฅ๋๋ ๊ฒ : ์ฝ์คํ์ ์ฃผ์ ๋ฉ๋ชจ๋ฆฌ ํ(heap ์์ญ)์ฐธ์กฐ ํ์ ๋ฐ์ดํฐ๊ฐ ์ ์ฅ๋๋ค. (๋ฐฐ์ด, ๊ฐ์ฒด, ํจ์ ๋ฑ)..