NEXT.js 14 로 블로그 운영하기 (2) <환경 구성 - 코드 컨벤션>

"규칙을 먼저 정하자!"

코드 컨벤션이란?

코드 컨벤션은 일관된 코딩 스타일과 가독성을 유지하기 위한 중요한 규칙들을 정의한 것입니다. 팀 내에서 동일한 코딩 규칙을 공유하면 코드의 일관성이 유지되며, 이로써 코드의 가독성이 향상되고 협업이 효율적으로 진행될 수 있습니다. 주로 들여쓰기, 변수명 표기, 주석 등과 같은 측면에서 일관성을 유지하도록 설계되어 있습니다.

프로젝트를 개별적으로 진행하고 있더라도, 미리 정의된 코드 컨벤션을 도입하는 것은 매우 유용합니다. 현재는 혼자 작업 중이지만 향후 프로젝트 규모가 커지거나 다른 개발자들이 참여할 가능성이 있을 때를 대비한 것입니다. 일관된 규칙과 문서를 통해 다른 개발자들이 프로젝트에 쉽게 참여하고 이해할 수 있도록 함으로써 효율적인 협업이 가능해집니다.

 

Next.js 14 버전을 설치하자

<설치 명령어>

npx create-next-app@latest

<공식문서>

Getting Started: Installation | Next.js

Next 14 프로젝트를 새로 만들게 되면 한가지 옵션이 눈에 보입니다. 프로젝트의 라우트 타입을 지정을 할 수 있는데 13버전에서 부터 등장한 "Using App Router" 를 선택했습니다.

위 설치 명령어를 입력하면 옵션은 아래와 같습니다.( 6번째 라인 참조 )

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

순서대로,

• 프로젝트명
• 타입스크립트 사용 여부 (Yes)
• ESLint 사용여부 (No)
• Tailwind CSS 사용여부 (No)
• src/ 디렉터리 아래 모든 코드를 관리할 것인지? (Yes)
• App Router 방식으로 구조를 만들지? (App Router 를 추천한다고 되어있습니다.) (Yes)
• 루트 디렉터리의 별명을 지어줄껀지 "@" 또는 "*"  (Yes & @)

왜 ESLint와 Tailwind CSS는 "No" 로 선택했을까요?

EsLint 는 ES(표준 자바스크립트) 와 Lint(코드의 오류를 잡아주는) 가 합쳐진 라이브러리이자 플러그인으로 프로젝트를 진행함에 있어 개발자들이 맞춰진 코드 스타일 대로 작업을 할수 있고, 오류가 있다면 손쉽게 수정할 수 있도록 도와주는 도구 입니다. 하지만, 프로젝트의 규칙이 아직 정해지지 않았고 진행함에 있어 변경될 가능성이 높다면 처음부터 규칙을 설정하는게 매우 불편하고 자유도(아이디어?)를 크게 제한할 수 있기 때문에 함께 설치 하지 않았습니다.

Tailwind CSS는 CSS에 사용가능 한 대부분의 스타일을 자신들이 정의한 클래스명으로 바로 적용 할 수 있도록 만들어놓은 일종의 웹 디자인 시스템(프레임워크) 입니다. 직접 스타일시트(CSS) 파일을 수정하지 않아도 Tailwind CSS 에서 제공하는 문서를 참고하여 클래스명을 지정해주는 것 만으로도 디자인이 적용되는 아주 강력한 도구입니다. 하지만 사용하지 않은이유는 아무리 잘만들어진 디자인 시스템이여도 전체적인 디자인 구성은 제가 생각하기에는 예술의 영역이기에  디자인까지 신경써서 구성하기보단 이미 만들어진 템플릿을 이용하기로 했습니다.(Tailwind CSS 도 템플릿을 제공하지만 유료..)

현재 기준으로 14 버전을 사용하기 위해서는 Node.js 18.17 버전 이상이여야 실행 가능하다.

 

디렉터리 구조를 구성하자

• 규칙1: 디렉터리 이름은 케밥케이스로 작성합니다. (ex> /posting-detail)
• 규칙2: 파일명은 케밥케이스로 작성하되, .tsx파일 내 컴포넌트명은 스칼라케이스로 작성합니다.(ex> function PostingDetail() {})
• 규칙3: 예를 들어 다른 컴포넌트의 종속성을 가진 Comment 컴포넌트의 경우 "." 으로 구분 할 수 있도록 합니다. (ex> posting-detail.comment.tsx)
• 규칙4: 위 설정에서 src 아래 모든 소스 코드를 관리하는 설정을 했으므로 src 디렉터리로 아래로부터 Next.js 애플리케이션이 관리합니다.

디렉터리			설명
src	_db		데이터 베이스 커넥션
	app	(routing)	라우팅 대상을 그룹핑하는 Dir
		api	RESTAPI Http 요청 End-point
	components		페이지 단위의 컴포넌트
	hooks		React에서 제공하는 Hook 이외의 커스텀 Hook 정의
	layouts		각 페이지에서 사용하는 레이아웃 정의
	routes		모든 라우팅 url을 정의 및 관리
	share-comps		공통으로 사용될 컴포넌트
	theme		테마 관련 js 파일
	types		서버 및 클라이언트 측 모델 타입관리
	utils		유틸성 함수 정의

 

샘플 페이지를 구성해보자

/src/app 아래의 디렉터리 명 또는 파일 명은 Next.js 의 이름에 따라 컨벤션이 있으므로 문서를 참고하여 이름을 만들어야 합니다.
https://nextjs.org/docs/getting-started/project-structure

Getting Started: Project Structure | Next.js

1. 블로그의 포스팅을 보여주는 페이지 .tsx 파일을 만들어보자

/src/app/(routing)/blog/posting/page.tsx (page.tsx -> Next.js 컨벤션)

import * as React from 'react';

function Posting() {
	return (
    	<>
        	<h1>포스팅 페이지 입니다.</h1>
        </>
    );
}

위 처럼 구성을 하게 되면, URL을 http://localhost:4000/blog/posting 이렇게 하면 위 페이지가 라우팅된다.

 

2. Next.js 의 REST API HTTP 요청 end-point을 구성해보자

end-point를 정의 하는 route.ts 파일은 HTTP Method별로 메소드가 구성된다.

/src/app/api/posting/route.ts (route.tsx -> Next.js 컨벤션)

export async function GET(request: Request, response: Response) {
  const { searchParams } = new URL(request.url);
  const target = searchParams.get('target');
  
  return Response.json("GET OK");
}

export async function POST(request: Request, response: Response) {
  const requestBody = await request.json();
  const { target } = requestBody;

  return Response.json("POST OK");
}

위 처럼 구성하면 아래와 같이 HTTP 요청할 수 있다.

• GET http://localhost:4000/api/posting?target=p1
• POST http://localhost:4000/api/posting

 

이로써 기본적인 구조는 갖추어졌고, 본격적인 진행에 앞서 배포환경을 구성해보고자 한다.