소개

이 프로젝트는 Next.js를 기반으로 제작되었으며 애버커스의 프론트엔드 개발자들이
보다 빠르게 리액트 프로젝트를 시작 할 수 있도록 도와주는 템플릿입니다.
간편하게 프로젝트를 시작하고, 개발을 시작할 수 있습니다.

시작하기

Node.js 버전 "18.12" 이상과 PNPM 버전 "8" 이상이 필요합니다. 최신 버전의 Node.js를 설치하려면 Node.js 공식 홈페이지를 참고하세요.

1. 프로젝트 클론

git clone https://github.com/seongpil0948/framework-next.git
cd framework-next

2. 의존성 설치

pnpm install

3. 개발 서버 실행

pnpm dev
  • http://localhost:3000 에 접속하여 확인해보세요.
  • 원하는 에디터로 프로젝트를 열어보세요. (VSCode 권장)

새로운 페이지 추가하기

1. 페이지 생성

아래 명령어는 app/[lang]/{moduleName} 디렉토리에 page.tsx 파일을 생성합니다.
명령어의 test 부분을 원하는 페이지 이름으로 변경하여 실행 시켜보세요

moduleName=test
mkdir -p ./app/\[lang\]/$moduleName
touch ./app/\[lang\]/$moduleName/page.tsx
code ./app/\[lang\]/$moduleName/page.tsx

2. 페이지 컴포넌트 작성

아래 코드를 붙여넣습니다.

import CmTitle from '@/app/_components/server-only/title'
import { AVAIL_LOCALES, TAvailLocale } from '@/config/system'
import { getDictionary } from '@/app/[lang]/dictionaries'
import CmButton from '@/app/_components/server-only/button'
import clsx from 'clsx'

export async function generateStaticParams() {
  return AVAIL_LOCALES.map((lang) => ({ lang }))
}

interface Param {
  params: { lang: TAvailLocale }
}

export default async function SSGPage({ params: { lang } }: Param) {
  const dict = await getDictionary(lang)
  return (
    <section className="flex flex-col items-center justify-center gap-4 py-8">
      <div className="inline-block max-w-lg justify-center text-center">
        <CmTitle>Welcome to &nbsp;</CmTitle>
        <CmTitle>Hi?</CmTitle>
        <h3>by Abacus</h3>
        <p className={clsx('text-primary-700')}>Bye?</p>
      </div>
      <CmButton className=" bg-purple-200">purple</CmButton>
      <CmButton color="primary">primary</CmButton>
    </section>
  )
}

http://localhost:3000/ko/test 페이지에 접속하여 확인해보세요.
만약 moduelName 변수를 수정하셨다면 test 를 변경한 문자로 수정 후 접근해보세요.

3. 컴포넌트 선정 및 삽입(배포서버)

우리는 storybook 브랜치로 컴포넌트 목록 페이지를 제공하고 있습니다.
기존 프레임워크와 다르게, 스토리북은 빌드 목록에 포함되지 않습니다.
즉 배포 용량을 줄이고, 배포 속도를 높이는 이점이 있습니다.

프로젝트 테마 설정

우리가 마주하는 가장 큰 과제중 하나는 프로젝트의 테마를 설정하는 것입니다.
잘 만들어둔 컴포넌트들이 있어도, 테마를 설정하지 않으면 그 컴포넌트들은 아무런 의미가 없습니다.
프레임워크는 모든 컴포넌트들이 테마를 설정할 수 있도록 설계되어 있습니다.
그럼, 테마를 변경해보겠습니다.

Primary 컬러 변경하기

우리는 프로젝트의 주요 컬러를 primary라는 이름으로 config/colors.ts 파일에서 관리하고있습니다. primary 컬러 와 purple color를 변경해보겠습니다. 위 파일의 내용을 다음과 같이 수정해주세요.

import { commonColors, semanticColors } from '@nextui-org/theme'

commonColors.purple = {
  ...commonColors.red,
}

semanticColors.light = {
  ...semanticColors.light,
  // primary: {
  //   ...commonColors.blue,
  //   DEFAULT: commonColors.blue[500],
  // },
  primary: {
    ...commonColors.cyan,
    DEFAULT: commonColors.cyan[500],
  },
}

const cmSemanticColors = Object.freeze(semanticColors)
const cmColors = Object.freeze(commonColors)

export { cmColors, cmSemanticColors }

export type CommonColors = typeof cmColors
export type SemanticColors = typeof cmSemanticColors

서버를 재시작하고, http://localhost:3000/ko/test에서 변경된 테마를 확인해보세요. 이와 같이 컬러와 더불어 모든 css 속성을 프로젝트에 맞게 변경할 수 있습니다. 자세한 정보는 css는 어떤 방식으로 사용하는 것이 효율적일까요?를 참고해보세요!

Linting

애버커스는 ESLint, Prettier 를 사용하여 코드를 검사, 통일화합니다.
모든 코드를 린트하려면 다음을 실행할 수 있습니다.

pnpm format:fix

ESLint

우리는 일관된 코드 검사를 위해 ESLint plugin for VS Code를 권장합니다.

우리에게 필요한 룰이 있다면 ESLint config를 참고해주세요.

Prettier

우리는 일관된 코드 포맷팅을 위해 Prettier plugin for VS Code를 사용합니다.
우리에게 필요한 룰이 있다면 Prettier config를 참고해주세요.

마무리

리액트를 도입하며 막막했을 동료들에게 도움이 되었으면 좋겠다는 마음으로 여러 팀원들이 힘을 합쳐 만든 프레임워크입니다.
아직 부족한 부분이 많고, 개선해야 할 부분이 많습니다. 또한 많은 팀들이 프로젝트를 진행하며 시행착오를 많이 겪게 될 것 입니다. 서로가 서로에게 도움이 될 수 있도록 이 프레임워크를 함께 발전시켜 나가면 좋겠습니다. 누구든지 이 프레임워크에 기여할 수 있습니다.
Contribute 문서를 확인하고 기여해주세요.

우리는 이제 Next.js 프로젝트를 시작할 준비가 되었습니다. 이제 프로젝트를 시작하고, 개발을 시작할 수 있습니다.
아래 링크를 확인하여, 더 자세히 알아보세요.