오늘의 나는 무엇을 배웠을까?
Next.js
Next.js 프로젝트 생성하기
Next.js로 프로젝트를 진행하기 위해서는 우선 프로젝트를 생성해야 한다. 넥스트 프로젝트를 생성하는 방식은 CRA를 활용하여 리액트 프로젝트를 생성하는 것과 매우 유사하다.
먼저, 터미널에서 프로젝트 디렉토리를 생성할 위치로 이동한다. 이후
npx create-next-app [.(현재 디렉토리에 생성) or name of project(해당 이름을 가진 디렉토리 생성)]커맨드를 입력하여 프로젝트를 생성하면 된다. 커맨드를 실행하면 Next.js와 React 등 필요한 것들을 설치해 주게 된다. 이 때, TypeScript, ESLint 사용 여부 등을 물어보게 되는데 본인의 기호에 맞게 옵션을 선택해 주면 된다.
Next.js 프로젝트 개발 모드 사용방법
npm run dev커맨드로 개발 모드를 실행하여, 프로젝트 코드를 작성하며 변경된 부분을 브라우저에서 바로바로 확인할 수 있다.
CSS 적용하기
사이트 전체 CSS
사이트 전체에 CSS 파일을 적용하기 위해서는 CSS 파일을 _app.js 파일에서 import 해주면 된다.
컴포넌트별 CSS
컴포넌트에 CSS를 적용하는 방식은 리액트로 프로젝트를 진행할 때와 마찬가지로 다양하게 있다. styled-components 와 같이 CSS-in-JS 방식을 활용해도 좋고 css-module 을 활용할 수도 있다. 이번 정리에서는 css-module 을 활용하는 방법을 알아보자.
- 먼저
.module.css확장자를 가진 css 파일을 생성하고, 내부에 특정 클래스에 적용할 스타일을 작성해 준다. - 해당 스타일을 적용할 컴포넌트 파일로 이동하여 css 파일을 default import 해준다.
import styles from '@/styles/example.module.cssstyles객체에는 import 해 온 css 파일에 작성되어 있는 클래스 이름과 그 이름을 고유화시킨 값이 key-value 형태로 들어 있다. 이를 컴포넌트에 적용시키기 위해서는 className prop에 객체의 값을 조회하여 넣어주면 된다.
<div className={styles.example}>
HI
</div>- 여기까지가 css-module을 사용하는 방법이고, 이 때 classNames 라이브러리를 함께 활용한다면 조건부 클래스 적용, 여러 개의 클래스 적용을 더 편하게 할 수 있다.
파일 시스템 기반 라우팅
웹 사이트는 여러 페이지로 구성된다. 사용자가 특정 페이지로 이동하고자 요청을 보내면 요청에 명시되어 있는 경로에 따라 페이지를 선택하고, 그 페이지를 반환하여 접속이 가능하도록 해 주어야 한다. 이 일련의 과정을 라우팅(Routing) 이라고 한다.
넥스트에서는 라우팅을 어떤 방식으로 할까? 바로, 파일 시스템 기반 라우팅 방식을 사용한다.
파일 시스템 기반 라우팅이란, 파일의 경로가 주소에 매칭되는 라우팅 방식이다. 디렉토리를 만들고 JS 파일을 만들어주면 해당 JS 파일의 경로에 따라 주소가 정해지게 된다.
페이지 나누기
CNA를 통해 넥스트 프로젝트를 생성하게 되면, pages 라는 디렉토리가 자동 생성된다. 이 디렉토리 내에 JS 파일을 만들면 그 것이 곧 페이지가 된다.
JS 파일을 만들고 내부에 작성한 컴포넌트를 default export 해주게 되면 해당 컴포넌트 자체가 곧 페이지가 된다.
예를 들어 pages 디렉토리 내에 example.js 라는 JS 파일을 만들고 컴포넌트를 default export 해주면 /example 이라는 경로로 해당 페이지에 접근이 가능해진다. pages 디렉토리 내에 추가로 디렉토리를 만들고 JS 파일을 추가하는 경우에도 동일하게 작동한다.
동적 라우팅 (Dynamic Routing)
여러 주소를 하나의 컴포넌트에서 처리하는 방식을 말한다.
JS 파일 또는 디렉토리 이름을 대괄호를 작성하여 활용하고 (e.g. [something] ), 이를 Dynamic Segment 라고 부르는 것 같다. 또, 대괄호 내의 값을 넥스트에서 params 라고 부르며 변수처럼 사용할 수 있다. params 값을 불러와 사용하는 것 또한 가능하다.
Link 컴포넌트로 페이지 연결하기
넥스트에서는 <Link> 컴포넌트를 제공하여 순수 HTML의 <a> 태그와 다르게 full-reload 없이 필요한 데이터만 불러오게 된다. 이에 따라 이동 속도가 <a> 태그를 사용했을 때에 비해 빠르고, 넘어가는 동작이 부드러워진다.
넥스트는 뷰포트에 <Link> 컴포넌트가 존재한다면 해당 컴포넌트의 href 속성에 작성된 페이지를 background에 prefetch 해 둔다. 이를 통해 client-side navigation의 성능을 향상 시킬 수 있는 것이다.
사이트 내부에서의 이동이 아닌 외부로 가는 링크 또한 <Link> 컴포넌트를 활용하여 작성하면 된다. href 속성에 외부 링크를 연결해 주면 되는 것이다.
useRouter
useRouter 는 next/router 패키지에서 제공하는 Hook으로, 사이트 주소에서 원하는 값을 가져올 수 있게 해준다.
param 가져오기
앞서, 동적 라우팅을 설명할 때 param 에 대해 잠시 언급하고 넘어갔었다. useRouter 를 통해 이 param 값을 가져올 수 있다. 코드로 살펴 보자.
// pages/products/[id].js
import { useRouter } from 'next/router';
export default function Product() {
const router = useRouter(); // useRouter로 router 객체를 가져옴
const { id } = router.query; // router 객체의 query 속성(객체 형태) 값 중 id 값(파일 or 디렉토리명)을 가져옴
return <div>{id} Product 페이지</div>
}개발 모드에서 /products/1 주소로 이동해 보면 1 Product 페이지 가 잘 출력되는 것을 확인할 수 있다.
query string 가져오기
기본적으로 param을 가져오는 것과 동일하게 useRouter Hook을 사용해주면 된다.
<form> , <input> 태그를 활용하여 사용자의 입력값을 받고, query-string을 활용하여 페이지를 이동할 때 활용할 수 있다.
router.push
client-side 페이지 전환을 도와주는 메소드이다. 문법은 다음과 같다.
router.push(url, as, options);이 때, 라우팅 하려는 url 은 필수로 작성해야 하고 브라우저 주소창에 보일 path를 정해주는 as , scroll / shallow 등의 옵션을 정해주는 option 의 경우는 선택적으로 작성해 주면 된다.
router.push 는 라우터 히스토리 스택에 이동하는 url을 쌓아주는 역할을 한다. 가령 home -> product 순서로 페이지를 이동한 상태로 product 페이지에서 router.push 를 활용해 hoodie 페이지로 이동하면 라우터 히스토리 스택에는 home -> product -> hoodie 가 쌓이게 되고, 페이지를 뒤로 돌아가면 product 페이지로 이동하게 된다. 따라서, router.push 메소드는 이전의 라우팅 히스토리를 모두 유지하고 싶을 때 사용하면 좋다.
router.replace
router.push 메소드와 비슷하게 동작하지만, 라우터 히스토리 스택에 이동하는 url을 쌓는 것이 아닌 현재 페이지를 새로운 url로 대체 하는 동작을 한다.
router.push 의 예시와 동일한 상황을 가정해 보면, 이번 경우에는 라우터 히스토리 스택이 home -> hoodie가 쌓이게 되고, 페이지를 뒤로 돌아가면 home 페이지로 이동하게 되는 것이다. 현재 라우팅 히스토리를 다른 url로 대체하고 싶을 때 (로그인 페이지에서 로그인을 하고 마이페이지로 이동하였을 때 페이지 뒤로가기 시 로그인 페이지로 이동시키고 싶지 않을 때) 이 메소드를 활용하면 좋다.
오늘의 나는 어떤 어려움이 있었을까?
아프다... 눈이 빠질 것 같다...
내일의 나는 무엇을 해야할까?
- 오늘 못했던 것들 모두...
