동아리 홍보 및 게시판 기능을 가진 홈페이지 제작을 진행해보고자 한다. 이번 개발을 위해서는 Next.js 라는 프레임워크를 사용할 계획이다. 그럼 Next.js 프레임워크가 무엇인지 알아보고, 프로젝트 시작을 위한 setup을 진행해보고자 한다.

Next.js

What is Next.js?

Next.js가 무엇인지 공식 홈페이지에서 소개하는 것을 확인하기 위해 소개 자료 첫 문장을 가져와보았다.

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

해당 문장에서 Next.js를 대표할 수 있는 가장 큰 2가지 단어는 "flexible"과 "React Framework"이다.

React Framework 부터 살펴보면, react 언어를 베이스로 사용하고 있다는 것을 알 수 있으며, Framework에 해당한다. Framework에는 특정 규칙이 있으며, 해당 규칙을 따라서 만들 경우 다양한 기능을 자동으로 수행할 수 있도록 하는 기능을 제공한다. 예를 들어 폴더를 만드는 것 만으로도 자동 라우팅 기능을 제공하는 것과 같은 것들을 의미한다. Library보다 제약이 많지만, 그만큼 다양한 기능들을 제공하여 활용할 수 있다는 장점이 있다.

다음은 flexible에 대한 내용인데, 이는 Next.js가 제공하는 Rendering 방식과도 관련이 있다. 기존 React와 같은 방식은 모두 javascript 파일을 바탕으로 렌더링을 client가 진행하는 CSR 방식인 반면, Next.js에서는 Pre-Rendering, SSR 방식을 제공한다. 두 방식의 차이는 아래 표에 정리해두었다.

Client-Side Rendering (React etc...)	Server-Side Rendering (Next.js)
Browser have to build, render everything from nothing using Javascript.	Next.js already pre-renders some of the HTML file.
Nothing in the HTML File (only < div >< /div >) → Everything should be made after React and Javascript is Loaded (Website cannot be rendered without React, JS)	Actually contains components in HTML File → Can be made without React & Javascript
Takes long time in slow internet condition to load page	Already loads some structure of the Website, functions can be abled when React and JS are loaded (User can at least see something in the Page)

SSR 방식은 Next.js에서 Pre-Rendering이라고 부르는데, 사전에 Server에서 Rendering할 수 있는 정보들은 SSR 방식으로 하여 전달하고, 일부 Client에서 Rendering 해야하는 정보들만 CSR 방식을 사용한다는 의미이다. 일부 정보만 Client에서 Rendering 하는 과정을 'Hydration'이라고 한다.

이러한 방식에 있어서 이점은 가장 먼저 빠른 로딩 속도일 것이다. 서버에서 필요한 정보를 먼저 렌더링하므로 당연히 속도가 빠를 것이기 때문이다. 추가적으로 검색 포털 노출 빈도 상승 등의 장점이 있다고 한다. 개발적 요인에도 다양한 기능들이 많은데 이는 아래에서 살펴보도록 하자.

Why Next.js?

• 쉬운 Routing (Routing, Dynamic Routing) - 라우팅 기능을 굉장히 간편하게 구현할 수 있다. 해당 이름으로 폴더를 생성하고, page.js 파일을 생성하면 라우팅 기능 구현이 가능하다. Dynamic Routing 기능을 통해 정적인 url이 아닌, 상황에 따라 다양한 url도 쉽게 Routing 가능하다.
• Layout 구성이 용이함 - layout.js를 통해 모든 페이지에 적용할 수 있는 global한 레이아웃을 구성할 수 있다. 또한 여러 라우팅을 통해 layout.js 파일이 여러 개여도 순차적으로 적용되는 구성을 갖는다.
• 다양한 Tag 제공 (Head, Link, Image etc...) - Next.js에서 제공하는 여러 tag를 사용하여 효율적으로 개발이 가능하다. 각각 Next.js에서 최적화가 잘 이루어져 있고, Link와 같은 경우 해당 태그가 화면에 나타나고 링크의 목적지가 동일한 사이트이면 목적지를 미리 Render하는 기능을 수행하는 등 기존의 성능을 향상시킨 tag를 사용할 수 있다.
• api 구현 가능 - api 폴더 내부에 파일을 제작하면 해당 경로로 접근하면 API 기능을 사용할 수 있다. DB와 연결하거나 데이터 처리 등의 간단한 backend 기능을 하나의 프로젝트 내에서 구현할 수 있다는 점에서 굉장히 편리하다.

Setup For Project

본격적인 프로젝트 시작에 앞서 개발 환경을 세팅해보고자 한다.

Install

먼저 Next.js 프로젝트 생성을 해야한다. node.js를 우선 설치해야 하고, 설치 되어있다면 아래와 같은 명령어를 통해 Next.js app을 만들 수 있다. 해당 코드를 입력하면 먼저 프로젝트 이름을 설정하고, 이후에 다양한 선택지들이 나타난다. 그 중 Experimental App 기능과 tailwind css는 선택하고 프로젝트를 제작하려고 한다.

npx create-next-app

프로젝트를 생성하면 나면 아래와 같은 명령어를 통해 개발 단계에서 프로젝트를 실행해볼 수 있다. 자동적으로 localhost:3000에서 활성화되고, 3000포트가 사용 중이면 다른 포트로 옮겨져 실행된다.

npm run dev

추가적으로 프로젝트에 생성된 각 파일들은 아래와 같은 기능을 수행한다.

• app Folder : where our code will be saved
  • page.js : Main Page
  • layout.js : Layout which will put pages inside the layout
  • api Folder : where API will be made (server)
• public Folder : where image, static files, etc will be saved
• node_modules Folder : Save installed Library
• next.config.js : next.js Setup File (Redirect, Rewrite, etc…)
• package.js : Library version info

tailwind css setup (Font, Color)

이번에는 tailwind css를 설정해보자. tailwind css는 기존에 사용하던 다양한 종류의 css 속성들을 단순히 className을 이용해 부여할 수 있는 방식이다. 사실 아직 웹을 디자인하는 것이 익숙하지 않기 때문에 tailwind를 사용하면 비교적 간편하게 디자인할 수 있을 것으로 예상한다. 이번에는 tailwind를 사용할 때 기본으로 설정할 Font와 Color를 이용해보고자 한다. 두 가지 모두 tailwind.config.js에서 설정할 것이다.

Color

기본적으로 많이 사용할 색상 몇 가지는 tailwind.config.js에서 설정해두면 설정한 이름으로 className으로 색상을 부여해 사용할 수 있다. 따라서 아래와 같이 색상을 dark, light, grey를 설정하였고, 나중에 이를 이용해 'bg-light'와 같은 className으로 css property를 적용할 수 있다.

//tailwind.config.js
theme: {
    extend: {
      colors:{
        dark : "#1b1b1b",
        light : "#f5f5f5",
        grey : "#D2D2D2",
      },
    },
  },

Custom Style 설정 관련 문서

Font (Using Layout.js)

폰트는 tailwind css와 Next.js에서 자체적으로 제공하는 google font를 이용할 것이다. 이를 위해서는 layout.js라는 파일을 만들어야 하고, 해당 파일에서는 앞으로 제작할 page.js들의 내용들을 모두 감싸는 형태의 파일이라고 생각하면 된다. 아래 파일에서 RootLayout이라는 함수에 props로 전달되는 children이 페이지에 나타나는 부분이고, 해당 내용을 다른 tag로 감싸서 body 태그로 전달된다. 따라서 모든 페이지에서 적용할 수 있는 내용들을 해당 파일에 작성하는 구조이다.
다시 폰트 설정 내용으로 돌아와 먼저 next/font/google에서 Montserrat을 import 하고, 해당 폰트에서 latin이라는 subset을 가져와 변수로 저장한다. variable은 앞으로 해당 font를 부를 이름이라고 생각하면 되고, 해당 내용을 body 태그의 className으로 전달하여, 앞으로 body에 들어가는 모든 내용은 기본 폰트가 mont로 지정된다고 이해하면 된다.
추가적으로 layout.js에 앞으로 사용할 웹 사이트의 title과 favicon도 포함시켰다.

// layout.js
import { Montserrat} from 'next/font/google'
import Head from 'next/head'

const montserrat = Montserrat({
  subsets: ['latin'],
  variable: '--font-mont',
})
export const metadata = {
  title: '서울대학교 기술나눔단 VESS',
}
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <Head>
        <meta name="viewport" content='width-device-width ,initial-scale=1' />
        <link rel="icon" href='favicon.ico' />
      </Head>
      <body className={`${montserrat.variable} bg-light w-full min-h-screen`}>{children}</body>
    </html>
  )
}

위에서 지정한 font를 tailwind와 연동시키는 것이 아래 코드이다. fontFamily를 설정하는 과정이다.

//tailwind.config.js
theme: {
    extend: {
      fontFamily : {
        mont: ['var(--font-mont)', ...fontFamily.sans],
      },
    },
  },

Next.js Google Font With Tailwind Css Document

이렇게 하면 본격적으로 프로젝트를 시작할 준비가 되었다. 본격적으로 다음 게시글부터 프로젝트를 제작하는 방법을 기록해보고자 한다.