슬랙봇 개발이 끝나자마자 합류하게 된 라이언타운 프론트엔드 개발,,,
라이언타운에서 사용하는 기술들은 한 번 써봤거나..
처음 듣는 기술이나.. 그런 것들이 너무 많아 팀원들과 함께 파트를 나눠 간단하게
스터디 자료를 만들어 서로 공유하기로 하였다!
그래서 내가 맡은 부분은 Next.js 부분!
next.js란 React로 만드는 서버사이드 렌더링 프레임워크이다.
단순하게 Next.js => React로 SSR을 할 수 있는 프레임워크 + 라우팅 기능
클라이언트 렌더링 vs 서버사이드 렌더링
- 클라이언트 렌더링 (CSR)
- 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게된다.
이때까지 사용자는 많은 시간을 대기해야 한다.- 서버에서 모든 js파일을 로드하고 이것을 토대로 웹을 렌더링한다.
- 화면 깜빡임이 없어 좋지만 초기 로딩에 시간이 많이 걸린다.
- 검색 엔진 최적화 이슈 -> SEO
- seo 문제 : 클라이언트 사이드의 경우 js가 로드 되지 않은 경우 아무런 정보를 보이지x
=> 위의 문제들을 해결하는 것이 서버사이드 렌더링- 서버 사이드 렌더링 (SSR)
- html 방식을 이용한 페이지 방식이 해당
- Next.js는 React를 SSR 가능하게 해줌
- 서버에서 js를 로딩 후 전달해줘 클라이언트에서는 js를 로딩하는 시간이 줄어든다!
- 검색 엔진 최적화가 가능하다!
style jsx
를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.next.js를 시작하면 src/pages
에 가장 먼저 파일 두 개가 보인다.
해당 파일은 있을 수도 있고 없을 수도 있다.
console.log
와 같은 js문법은 대부분 실행되지 X/
요청을 보냈다면 Component는 /pages/index.tsx
파일이 props로 내려옴getInitialProps
를 통해 내려받은 props들 (다음 포스팅에서 자세히~!)pages/myPage.tsx => localhost:3000/myPage
pages/posts/[id].tsx => localhost:3000/posts/1
: id에 따라 동적 라우팅Example
// pages/myroom/[id].tsx
import { useRouter } from 'next/router';
const MyRoom = () => {
// 라우터 정보를 얻기 위한 userRouter
const router = useRouter();
return (
<>
<p>마이룸입니다.</p>
/* router에 있는 query에 대한 id를 받아오기 */
<p>방번호는 {router.query.id}입니다.</p>
</>
);
};
export default MyRoom;
Link는 다른 페이지로 이동할 때 사용할 수 있다.
Example
import { useRouter } from 'next/router';
import Link from 'next/link';
const MyRoom = () => {
const router = useRouter();
const fetchedDatas = [
{
id: 1,
title: '나는 포스트1',
},
{
id: 2,
title: '나는 포스트2',
},
{
id: 3,
title: '나는 포스트3',
},
];
return (
<>
<p>마이룸입니다.</p>
<p>방번호는 {router.query.id}입니다.</p>
<br />
<ul>
/* 받은 데이터를 하나하나 맵핑 */
{fetchedDatas.map(({ id, title }) => (
<li>
<Link href={`/posts/${id}`}>
<a>{title}</a>
</Link>
</li>
))}
</ul>
</>
);
};
export default MyRoom;
이는 백그라운드에서 페이지를 미리 가져온다!
예를 들어, Link컴포넌트의 경우 모든 항목이 이미 로드되어 있다.
<Link prefetch href='(이동할 페이지 라우터)'>
useRouter
를 사용해서도 prefetch
가 가능하다!
Example
import { useRouter } from 'next/router';
import { useEffect } from 'react';
const MyRoom = () => {
const router = useRouter();
// myroom을 렌더링 시 test 페이지를 prefetch한다
useEffect(() => {
router.prefetch('/test');
}, []);
return (
<>
<p>마이룸입니다!</p>
<p>방 번호는 {router.query.id}입니다!</p>
/* 클릭하면 test를 추가한다 */
<button type="button" onClick={() => router.push('test')}>
test 라우터 push
</button>
/* 클릭하면 testpage로 이동한다 */
<button type="button" onClick={() => router.push('/testpage')}>
test 페이지로 이동
</button>
</>
);
};