맨날 react 기반 클라이언트 사이드 렌더링을 해보다가 문득 궁금했다.
"서버 사이드 랜더링은 뭘까, 뭐가 다를까" 하는 생각이 들었는데, Nestjs를 하면 서버사이드렌더링을 할 수 았다고?!!
바로 시작해보기로했다.
설치
npx create-next-app@latest설치는 간단했다. 다음과 같이 입력하고 엔터누르면 프로젝트가 생성됬다.
다음 선택은 자기가 원하는대로 하면된다. 남자답게 눌러버려라.
나는 일단 간단한 테스트만 진행할 예정이기 때문에 다음과같이 router 를 제외하고는 다 'NO'를 눌렀다.
다음과같이 프로젝트 파일들이 있고,
app폴더 : 내가 코드를 짤 폴더라고 생각하면되고,
page.js: 메인페이지
layout.js : 메인페이지 감싸는 용도의 페이지
public 폴더 : 이미지나 static 파일 보관용
next.config.js : nextjs 설정 파일
node_modules 폴더 : 설치한 라이브러리 보관용 폴더
package.json : 설치한 라이브러리 버전 기록용 파일
등등 이 있네...
작동방식은 react랑 거의 똑같다. 아니 그냥 80% 이상 똑같다.
import Image from 'next/image'
import styles from './page.module.css'
export default function Home() {
let name = 'park';
return (
<div>
<div className='title'>
<h4>애플후레시</h4>
{/* 데이터 바인딩 문법 {} */}
<h4>by dev {name}</h4>
</div>
</div>
)
}간단하게 다음과같이 코드를 작성했고, 데이터 바인딩 문법을 써서, 변수의 값을 태그안으로 넣을 수 도 있다.
짠. 생각보다 간단하네
근데 신기한건 다른 페이지를 만들때다. react에서는 react-router-dom 이라는 라이브러리를 활용해서 각각의 Router를 설정해줘야 페이지 이동을 할 수 있었는데, 여기서는 그냥 app/(내가원하는 페이지명) 폴더를 만들고, 그안에 .js 파일을 생성하면 그 페이지를 이동할 수 있게된다.
Next.js 의 자동 라우팅
url로 페이지 나누는걸 라이팅이라고 하는데, 라이팅하려면 일반적인 웹서버들은 "누가/list로 접속하면 상품목록 html을 보여주세요~" 라고 서버에 코드를 짜놔야하는데, Next.jss를 쓰면 그런 코드를 짤 필요가 없이 파일 하나만 만들면 자동으로 된다고 한다.
import React from 'react'
export default function List() {
let 상품 = ['Tomatos','Pasta']
return (
<div className='title'>
<h4>상품목록</h4>
<div className='food'>
<h4>상품1 $40</h4>
</div>
<div className='food'>
<h4>상품2 $40</h4>
</div>
</div>
)
}
페이지 이동이 간단하게 된다. (아니 편하네 )
Navbar 만들기
모든페이지에 navbar를 띄우게 만들어야하는데, 여기서 모든 페이지에 navbar를 띄우게 할려면 작성되는 곳이 중요하다.
중복되는 html은 layout.js 파일에서...
Next.js는 실은 page.js를 보여줄 때 옆에 layout.js 파일이 있으면 layout.js 내용안에 page.js 내용을 담아서 보여줍니다.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<div className='navbar'>
<Link href="/">홈</Link>
<Link href="/list">List</Link>
</div>
{children}
</body>
</html>
)
}
코드를 확인해 보면 {children}이라고 표기된 부분이 있는데, 이게 page.js 넣을 곳을 표시하는 문법입니다. 그렇기에 모든 페이지에 navbar를 입력하려면 다음과 같이 layout에 {children}위에 넣으면 됩니다.(나중에 navbar를 컴포넌트로 빼서 써도 될듯?)
일단 오늘은 이것까지 구현해봤는데, 확실히 react를 공부한 뒤에 next를 접한거라 사용하기에는 크게 어렵지는 않았다. 아직 초반부라 그럴수도... 더 좋고 재밌는 기능들을 지속적으로 해봐야겠다.
참고
https://codingapple.com/
'prev > NextJS' 카테고리의 다른 글
| GiftWave 프로젝트/휴대폰인증 (setInterval, useInterval) (0) | 2023.07.22 |
|---|---|
| Molecule 과 Organism (by PhoneAuth) (0) | 2023.07.19 |
| Nextjs 카카오 소셜 로그인(REST API 방식) (0) | 2023.07.08 |
| Environment Variables (.env 공식문서 번역하기) (0) | 2023.07.03 |
| 이미지 추가 (0) | 2023.05.25 |
