넥스트 JS(NextJS) 체킁 1 (app 폴더 이해)
리액트에 가서 스크롤바를 쪼메 내리면 아래와 같은 문구와 눈맞춤이 자동이당.
React를 대략 파악했다면 Next.js 나 Remix를 해야만 한다는 표현을 애둘렀당.
할 말이 적지 않지 아니 하지망, 디금 시점에 떠들면 호기심이 자체적으로 사그러들수 있당.
그냥 NextJS를 괘니 시작하장. 발을 담가 보아야 그 물이 차가운지?, 뜨거운지?, 미지근한지? 를
알 수 있고, 원할지 , 원하지 않을지를 취향저격에 맞추어 편파적 객관성을 얻을지어다.
그래도 한개를 꼭 말해보라 하면, Front 와 Back의 밸런스를 조절(성능 UP)할 수 있당.(마음 저격이당)
next_start라고 폴더를 1개 맹글공, vscode로 해당 폴더를 열어제끼공
터미널(cmd)도 괘니 연 다음에 아래 명령어를 치장 (스타일이 낯설지 않을지어당, 끝에 .이 있음)
[ 당근 node는 이미 설치가 되어 있어야만 한단당 ]
npx create-next-app@latest .
아래는 참고용 나의 선택이당. (처음이라면 그냥 따라하당.)
package.json 의 scripts 부분을 먼저 체킁하장.
"scripts": {
"dev": "next dev --turbopack" -p 8272,
"build": "next build",
"start": "next start -p 8272",
"lint": "next lint"
},
npm run dev 하면 개발 서버가 구동 되고 ( 기본 포트가 3000번인데, e7e를 어필하려고 8272로 바꿈)
npm run buid 하면 build가 되공
build 후에 npm start를 하면 production 모드로 서버가 시작된당.
npm run dev
브라우저엥 http://localhost:8272 URL엥 아래와 같은 화면이 두둥 (별로 안 멋짐)
화면에 보면 app/page.tsx 를 에디팅 하여 시작하공, 저장하면 바로 변화를 볼 수 있다 말을 건넨당.
/app/page.tsx 를 아래처럼 수정해보장.
/* @app/page.tsx */
export default function MyHome() {
const kmInsa = "경미닝 is God Of Plannig";
return (
<>
<div className="h-10"></div>
<h1 className="rounded-2xl text-6xl text-center text-cyan-300 bg-slate-900">
{kmInsa}
</h1>
</>
);
}
화면이 아래 처럼 바뀔지어당.
React만 공부한 사람이라면 당황스러울 수도 있당. 그렇탕.
여기서 NextJS의 핵심 특징 1개를 알고 가장.
NextJS는 파일시스템 베이스 라우팅이란 걸 사용한당.(알고보면 거저당)
pages 폴더를 이용하는 것도 있지만 , app 폴더를 기준으로 하는 것이 나중에 나온 꿘짱방식이닝
app 폴더 기준으로 하는 것만 알아볼꺼당.
설명보다는 실행 예를 보는 게 훨씬 쉽게 느끼미가 찾아온당.
app 폴더 아래에 roze 폴더 와 karina 폴더를 만들고, 그 안에 page.tsx를 맹글장
/app/roze/page.tsx
/* @app/roze/page.tsx 요따구로 표시해 놓으면 헷갈리지 않음 */
export default function MyRoze() {
return (
<>
<h1 className="text-6xl text-center mt-1 text-sky-200 bg-slate-800">
로제 아파트
</h1>
</>
);
}
/app/karina/page.tsx
/* @app/karina/page.tsx */
export default function MyKarina() {
return (
<>
<h1 className="text-6xl text-center mt-1 text-yellow-200 bg-slate-800">
카리나 플래쉬
</h1>
</>
);
}
이제 브라우져엥
http://localhost:8272/roze 와 http://localhost:8272/karina 결과를 눈에 넘겨주장
어떠한강?... 느끼미 절친이 찾아오는 강?
그렇당! app 폴더가 웹 경로 / 를 가리키게 되고 그 안에 e7e폴더를 만들면
그 웹 경로는 /e7e가 된당. 곧 디렉토리 구조 자체가 웹 경로가 되게 되는 것이었당.
그래서 이거슬 파일시스템 베이스 라우터라고 부르게 되었던 거시 였던 거시였당.
그리고 해당 경로에 실행되는 파일명은 무조건 page.tsx당
function 이름은 의미있게 본인이 마구 주어도 된당. 오케롱?
roze 폴더 아래에 apt라고 폴더를 만들고, apt 노래 정보를 담은 page.tsx를
연습으로 만들어 보면 아마 좋지 않을깡? (카리나를 좋아한다면 karina 아래엥....)
흔들림 없는 영혼의 눈을 가진 hjung이라면 아마 벌써 눈치 채었을거시당.
app 폴더 아래 layout.tsx란 파일도 있고, 그 이름에서 으미가 이미 전달되었음을...
/app/layout.tsx 를 아래 처럼 수정하장.
import Link from "next/link";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<div className="flex mt-3 justify-around">
<Link className="inline-block bg-amber-300 rounded-2xl" href={"/"}>
경미니 홈
</Link>
<Link
className="inline-block bg-amber-300 rounded-2xl"
href={"/roze"}
>
로 지
</Link>
<Link
className="inline-block bg-amber-300 rounded-2xl"
href={"/karina"}
>
카리나
</Link>
</div>
{children}
</body>
</html>
);
}
역시 결과를 확인하는 수고를 스스로 하장... 느끼미가 오는강?
/app/layout.tsx 파일의 RootLayout(이름은 맘대로 만들어도 됨)의
{children} 자리만 바뀜이 확인된당.
이제 /app/roze 폴더에도 layout.tsx를 아래 처럼 맹글어 보장
/app/roze/layout.tsx
import Link from "next/link";
export default function RozeLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<header className="bg-violet-700 text-white text-4xl text-center">
안농 난 기획의 신 경미니라고 해
</header>
<div className="text-center text-purple-600 text-4xl m-5">
<Link href={"/roze/apt"} style={{ backgroundColor: "pink" }}>
아파트 클릭 체킁
</Link>
</div>
{children}
</>
);
}
/app/roze/apt/page.tsx
export default function Apt() {
return (
<div>
<h1 className="text-5xl text-center text-pink-500 bg-slate-300">
아파트
</h1>
<h2 className="text-3xl text-center text-pink-500 bg-slate-300">
Song By 로제
</h2>
</div>
);
}결과는 위 아니고 아래당.
클릭하여 느끼미가 왔기를 바란당. (이런 건 동영상 설명이 젤 좋지만...)
그렇당. page.tsx랑 같은 방식이당. 폴더안에 layout.tsx라고 만들기만 하면 그것이 해당 URL의
레이아웃이 된당. app 폴더에 있는 layout.tsx 파일이 최상위 레이아웃을 표현하고
그 안에 계층적으로 해당 url의 레이아웃이 들어가는 형식이당. page.tsx 와 얼토당토 같은 뉘앙스당
만약 느끼미가 오지 않았다면 그건 집중하지 않았을 가능성이 거의 99%다. 누네 힘주고 다시 보장
NextJS의 파일시스템 베이스 라우팅은 자칫 결정 장애가 있는 사람들의 마음에 강력하게
그냥 이렇게 해 라는 메세지로 어떻게 구성할까 라는 고민을 사전에 예방조치 하고 있다는 관점에서
너무도 훌륭하당. 돌아보니, 예전 웹 초기에는
원래 다들 이런식으로 만들었는데 라는 추억이 긴급 소환된당. 그렇당 어차피 돌고 도는 거당.
재미로 브라우져 주소 표시줄에 없는 url을 써보장
음... 오늘은 생각조차 귀찮다면 http://localhost:8272/you/who 을 입력해 보장...
아래 파일을 맹글장
/app/not-found.tsx
import Link from "next/link";
export default function NoPage() {
return (
<div className="text-center text-4xl">
<h1 className="text-center text-7xl">그런 페이지는 없따궁</h1>
<div className="h-20" />
<Link href={"/"} className="inline-block rounded-md bg-black text-white">
경미닝 홈으로
</Link>
</div>
);
}이제 브라우져 결과를 다시 보장... 느끼미가 왔는가?...
그렇당. 그냥 not-found.tsx 란 이름으로 만들면 url이 없는 404에러에 해당 내용이
나오게 돤당. 쉽고도 쉽지만 한번도 연습을 하지 않는다면 당신 것이 되지 않을테당.
전체적으로 꼭 한번은 직접 손가락을 꼬물락 꼬물락 하여 직접 해보장.
사노라면 어떻게 살아야지?
무얼 하면 좋을까?
내가 잘 하는 건 무얼까?
잘 하는 게 있긴 한가? 라는 생각을 할 때가 있다.
그냥 밖으로 뛰쳐나가 땀 비빔면이 될 정도로 달리자.
이제 제 정신이다.
사노라면 내가 생각한 나와 다른 사람이 보는 내가 다른
난 있는데 나에게 없단다.
난 없는데 나에게 있단다.
식의 느끼미 소용돌이가 명량해전을 일으킬 때가 있다.
그냥 컴퓨터 켜고 미친 듯이 코딩하장.
이제 진정 배 고프당.
사노라면 내 능력에 대해 터무니없이 맵게 오해하는
아니 내가 천재를 이기다닝...
아니 내가 바보에게 지다닝..
착각의 마약에 중독! 이성마비로 감정만 사는 때가 있다.
답은 이렇다.
원래 천재는 바보를 이기지 못한다.
코딩하면 코딩하면 코팅된다.
코팅하면 코팅하면 흐려진다.
사노라면 사노라면 쌓인다.
이젠 Messy가 Clean할 수밖에 없다.
https://www.youtube.com/watch?v=ia2Ph61bYzc