FE9 중급 및 고급 프로젝트 템플릿은 Next.js, React, TypeScript, TailwindCSS 등 최신 기술 스택을 기반으로 한 프론트엔드 프로젝트 템플릿입니다. 이 템플릿은 소셜 로그인 기능과 이미지 업로드 기능 등을 포함하여 중급 및 고급 수준의 웹 애플리케이션 개발에 적합하도록 구성되어 있습니다.
프로젝트 루트에 .env 파일을 생성하고 다음 환경 변수를 설정하세요:
# API 설정
NEXT_PUBLIC_API_URL=your-api-url
NEXT_PUBLIC_TEAM_ID=your-team-id이 프로젝트는 Next.js 미들웨어를 사용하여 인증을 관리합니다. 다음 경로는 인증이 필요하지 않습니다:
/login- 로그인 페이지/signup- 회원가입 페이지/_next- Next.js 시스템 파일/favicon.ico- 파비콘- 이미지 파일 (jpg, jpeg, gif, png, svg)
인증되지 않은 사용자가 보호된 경로에 접근하면 자동으로 로그인 페이지(/login)로 리다이렉트됩니다.
| 스크립트 | 설명 |
|---|---|
dev |
개발 서버를 실행합니다 (Next.js) |
build |
프로덕션 빌드를 생성합니다 |
start |
프로덕션 서버를 실행합니다 |
lint |
ESLint로 코드를 검사합니다 |
format |
Prettier로 코드 형식을 정리합니다 |
clean |
.next와 out 디렉터리를 삭제합니다 |
test |
테스트를 실행합니다 (현재 구성되지 않음) |
- 저장소 클론:
git clone https://github.com/cccwon2/fe9-advanced-project-template.git- 프로젝트 디렉토리로 이동:
cd fe9-advanced-project-template- 의존성 설치:
npm install-
환경 변수 설정:
.env파일을 생성하고 위의 '환경 변수 설정' 섹션에 명시된 변수들을 설정하세요. -
개발 서버 실행:
npm run dev이제 http://localhost:3000 에서 프로젝트를 확인할 수 있습니다.
ESLint는 JavaScript 및 TypeScript 코드의 품질을 향상시키고 일관된 코딩 스타일을 유지하는 데 도움을 줍니다. 이 프로젝트에서는 다음과 같이 ESLint를 구성했습니다:
{
"extends": [
"next",
"next/core-web-vitals",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"plugins": ["@typescript-eslint", "prettier"],
"parser": "@typescript-eslint/parser",
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "lf"
}
],
"linebreak-style": ["error", "unix"],
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "warn"
}
}이 설정은 Next.js, TypeScript, Prettier와 관련된 규칙을 적용하며, 사용하지 않는 변수에 대해 경고를 표시합니다. 또한 일관된 줄 바꿈 스타일을 강제하고 Prettier와의 통합을 설정합니다.
코드 스타일의 일관성을 유지하기 위해 Prettier를 사용합니다. .prettierrc 파일에 다음과 같이 구성되어 있습니다:
{
"printWidth": 120, // 한 줄의 최대 길이를 120자로 제한
"tabWidth": 2, // 탭의 너비를 2 스페이스로 설정
"useTabs": false, // 탭 대신 스페이스 사용
"semi": true, // 문장 끝에 세미콜론 사용
"singleQuote": false, // 작은따옴표 대신 큰따옴표 사용
"quoteProps": "as-needed", // 필요한 경우에만 객체 속성에 따옴표 사용
"trailingComma": "es5", // ES5에서 허용되는 후행 쉼표 사용
"bracketSpacing": true, // 객체 리터럴의 중괄호 주위에 공백 추가
"arrowParens": "always", // 화살표 함수의 매개변수에 항상 괄호 사용
"proseWrap": "preserve", // 마크다운 등의 프로즌 래핑 보존
"endOfLine": "lf", // 줄 끝에 LF(Line Feed) 사용
"plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
"importOrder": [
// import 문 정렬 순서 지정
"^@/lib/(.*)$",
"^@/app/(.*)$",
"^@/components/(.*)$",
"^[./]"
],
"importOrderSeparation": true, // import 그룹 사이에 빈 줄 추가
"importOrderSortSpecifiers": true, // import 지정자 정렬
"overrides": [
{
"files": "*",
"options": {
"endOfLine": "lf"
}
}
]
}이 설정은 코드 포맷팅의 세부 사항을 정의하고, import 문의 정렬 순서를 지정합니다.
타입 안정성을 높이기 위해 TypeScript를 사용합니다. tsconfig.json 파일에 다음과 같이 구성되어 있습니다:
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
},
"types": ["./src/types/auth", "@hookform/resolvers"]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "custom.d.ts"],
"exclude": ["node_modules"]
}CSS 프레임워크로 스타일링을 돕습니다. tailwind.config.ts 파일에 다음과 같이 구성되어 있습니다:
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
fontFamily: {
sans: [
"Pretendard",
"-apple-system",
"BlinkMacSystemFont",
"system-ui",
"Helvetica Neue",
"Apple SD Gothic Neo",
"sans-serif",
],
},
},
},
plugins: [],
};
export default config;next.config.mjs 파일에서 Next.js의 설정을 관리합니다:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"],
});
return config;
},
};
export default nextConfig;이 설정은 SVG 파일을 React 컴포넌트로 가져올 수 있게 해줍니다.
custom.d.ts 파일에서 SVG 파일에 대한 타입 정의를 제공합니다:
declare module "*.svg" {
import React from "react";
const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
export default SVG;
}이를 통해 TypeScript 환경에서 SVG 파일을 React 컴포넌트로 사용할 수 있습니다.
Google 및 Kakao 소셜 로그인 설정을 위해서는 next-auth 라이브러리를 사용합니다.
인증을 위해 .env 파일에 다음과 같은 환경 변수를 설정해야 합니다:
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
KAKAO_CLIENT_ID=your-kakao-client-id
KAKAO_CLIENT_SECRET=your-kakao-client-secret
이 템플릿을 사용하면 최신 웹 개발 기술을 활용한 프로젝트를 빠르게 시작할 수 있습니다. 각 기술과 도구의 설정이 미리 되어 있어, 개발에 즉시 착수할 수 있습니다.