I’m on the Next.js
🐘 Next.js는 진짜..진짜..진짜... 진짜...... 말도 안되게 신기하네
와우 이것 좀 보셈요!
🦭 Pages 폴더 내에 index.js가 출력되쥬 ?
🦭 Pages 폴더 내에 about.js 파일을 생성하고 저렇게 진짜 기냥
export default function...이렇게만 코드씀 router없음!
🦭 holy suger! 이거보셈 세상사람들아 ㄹㅇ 말도안돼 진짜 혁명이야.....와씌...
이런 무친 기술을 나만 몰랐다니 말도 안된다고!
🦭 제 코드 보이세요 ? 아니 import React from 어쩌구 안햇는데 저거 가능함 와 이거 ㄹㅇ 물건이네 와와 와!!
🦭 친절한 우리의 ESLint가 또 쒸익대면서 알랴주네요
대충 Next.js 어플리케이션의 클라이언트 사이드 네비게이션을 제공해준다는 말인듯
🦭 요롷게 쓰면 된답니다
🦭 새로고침없이 나타나는거 보이시죠 ?
🦭 기냥 React.js였으면 Link에 서타일을 주며는 red색으로 변하겠죠
🦭 하지만 Next.js는 어림짝도 없습니다. 절대적 룰을 지켜야하거든요
🦭 HTML 태그에 색을 줘봅시다
🦭 광야로 걸어 갈 수 있게 되었습니다.
🦭 Router에 Hook을 걸 수 있습니다.
useRouter를 사용하여 이렇게 사용할 수 있다고 합니다
🦭 좀 더 멋지가 광야로 걸어 갈 수 있게 되었습니다.
오늘의 공부 🐤
Next.js는 framework입니다
✔️ library : 자신이 원할 때 언제든 어떤 방법으로든 부르면 됨
내가 library를 불러서 사용함
✔️ framework : 특정한 규칙을 따라서 특정한 것을 해야함
나의 코드를 framework가 불러서 사용함
-> 코드를 어떤 곳에 넣으면 framework가 그 코드를 부르는 형태
고로 우리는 framework와 fight 할 수 없습니다. 까라면 까야하는 그런 형태라고 생각하면 쉬울듯
I'm on the Next.js 절대적 룰을 지켜
ㅈㅅ합니다
✔️ Next.js 기능의 장점
👉 앱에 있는 페이지드링 미리 렌더링 된다 -> 정적(static)으로 생성됨
소스코드를 열어보면 HTML안에 코드가 있다는 것을 확인 할 수 있다.
👉 API로부터 가져오는 데이터가 로딩되는 데에는 오랜 시간이 걸릴 수 있다.
하지만 사용자는 적어도 어떠한 HTML(ex. UI)를 볼 수 있다.
👉 client-side-randering
브라우저가 유저가 보는 UI를 만드는 모든 것을 의미한다
브라우저가 자바스크립트를 가쟈옴 > client-side의 자바스크립트가 모든 UI만듬
만약 네트웍 속도가 느리다면
js코드가 왔을 때 화면의 UI 볼 수 있다.
👉 Next.js는 초기 상태로 pre-rendering를 한다
처음에 페이지가 로딩될 때 정말 많은 스크립트를 같이 요청한다
👉 hydration
react.js를 프론트엔드 안에서 실행하는 것
Next.js는 react.js를 백엔드에서 동작시켜서 페이지를 미리 만드는데, component들을 render시켜 렌더링이 끝났을 때 HTML이 된다. Next.js는 그 HTML을 페이지의 소스코드에 넣어준다. 그럼 사용자는 자바스크립트와 react.js가 로딩되지 않았더라도 콘텐츠를 볼 수 있게 된다.
SEO에 정말 좋음!
아니 일단 웹사이트에 들어가면 뭔가가 있으니까!
✔️ 규칙
👉 component를 export default해야 한다. (component 이름은 내맴대로)
URL의 이름은 파일명이 된다 (언제나 예외가 존재한다는 것을 잊지말게)
👉 Pages폴더 안에 넣을 수 있는 몇 가지 예외사항
index.js는 URL이름이 되지 않습니다 !
👉 jsx를 사용하고 있다면, React.js를 import 할 필요가 없다.
단, HOOK(ex. useEffect, useCallback...)사용 시 import 해야함
👉 anchor을 사용하지 않는다. Link를 사용한다. (React-Router-Dom과는 사용법 다름)
오늘의 왜때문에 🐣
mei you
왜때문에 -해결편 🐥
mei you
오늘의 삽질 🥄
mei you
오늘의 일기
Next.js 왜 이제서야 배운걸까
난 이렇게 틀이 똽 똽 똽 정해진 프레임워크 너무좋아
그냥 규칙에 맞춰주면 되자나 흑흑따흑
너무좋아 행복해 꺄르르를를르륵
그리고 Pages폴더에 만든 파일이름이 URL이름이 된다니 ㄹㅇ 신기방기
이런 획기적인 기술을 다봤나....
아주 그냥 잘근잘근 씹어서 정복해주갓어
Sae Eleisa Tera Vi
