[TIL] Day 66 Next.js 14버전, App Router, Typescript, Github 초기 세팅의 모든 것 AtoZ

2024.01.08 월

 

지난 포스팅에서 최종 프로젝트 기술 스택을 선정한 바 있다.

이번 프로젝트에서 리더를 맡았기 때문에 최초 세팅을 내가 진행하게 되었다.

Next.js를 제대로 세팅하려니 명령어들이 기억나지 않아서 찾아보게 되며 시간이 소요되었다.

그래서 이번 기회에 다음에도 볼 수 있게 초기 세팅의 A부터 Z까지 정리하여 기록하려고 한다.

 

 

PC에 프로젝트 폴더 생성

Code로 vscode를 열어준다

(해당 설정이 나오지 않는다면 vscode를 설치할 때 옵션을 해제한 것이다.

이럴 경우 vscode에서 직접 열거나 Open Git Bash here에 code.을 입력해서 열어준다.)

 

 

Next.js 설치

yarn create next-app

빈화면을 Next.js로 채워주자

입력하면 여러 옵션들을 선택할 수 있다.

 

What is your project named? » crosswalk (원하는 폴더명 입력)

Would you like to use TypeScript? » No / Yes (TypeScript를 사용할 것이다.)

Would you like to use ESLint? » No / Yes (정확히는 모르겠지만 사용 패턴을 분석하여 코드 작성에 있어서 서포트해주는 옵션인 것 같다. 사용하자.)

Would you like to use Tailwind CSS? » No / Yes (간편하고 빠른 CSS 작업이 가능하며, NextUI를 활용할 예정이기 때문에 사용한다.)

Would you like to use `src/` directory? » No / Yes (src 폴더를 만들고 파일을 관리할 것이다.)

Would you like to use App Router? (recommended) » No / Yes (최신 버전의 App Router를 사용할 것이다. 만들려는 서비스의 형태는 웹앱이며, 모바일 접근을 중요하게 생각하여 성능과 최적화에 더 유리한 App Router를 선택했다.)

Would you like to customize the default import alias (@/*)? » No / Yes (정확히는 모르겠지만 import 경로에 대한 설정인 것 같다. 어찌보면 절대경로 같은 느낌이다. 사용하자. Yes 선택후 그대로 @/*를 입력하면 된다. 혹은 Tab을 누르면 자동완성)

 

 

 

 

사용할 모든 라이브러리들을 미리 설치해주자

yarn add @tanstack/react-query

yarn add @supabase/supabase-js

yarn add react-hook-form

yarn add react-icons

yarn add react-uuid

yarn add recoil

yarn add --dev jest

+a

 

 

 

 

파일 및 폴더 정리

 

 

 

 

빈폴더는 Gitbhub 공유가 되지 않기 때문에 더미파일을 생성하여 push한다.

 

 

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

 

 

 

.env.local

.gitignore에 자동으로 추가되어 있기 때문에 .env보다 편하다

// NEXT_PUBLIC_ 보통 이걸로 시작
NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SERVICE_KEY=""

 

// .prettierrc
{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "none"
}

 

supabase에서 이미지 사용하기 위해서

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    domains: ['할당옵션값.supabase.co']
  }
};

module.exports = nextConfig;

 

README.md 초기 작성

 

NextUI 사용을 위해서 설정

// tailwind.config.ts
import type { Config } from 'tailwindcss';
// 여기
const { nextui } = require('@nextui-org/react');

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}',
    // 여기
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
      }
    }
  },
  // 여기
  plugins: [nextui()]
};
export default config;

 

 

public 주소 할당

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "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/*"],
      // 여기
      "@assets/*": ["./public/assets/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

 

 

 

 yarn dev로 테스트

 

에드 커밋으로 저장

git add .

git commit -m "수정내용"

 

 

dev 브랜치 생성

git switch -c dev

 

 

 

 

Github Repository 생성 및 push

▽github 첫 페이지 코드 붙여넣기
▽  or push an existing repository from the command line 에 있는 코드
git remote add origin 깃허브주소
git branch -M main
git push -u origin main

 

 

Default Branch 설정

Settings - General - Default Branch - dev

 

 

팀원 초대

Settings - Access - Collaborators - Add People - 깃허브 이메일 or 깃허브 아이디

이후 팀원들이 자시의 메일에서 확인 받아야 함

자신의 이메일 주소 보는 곳

우측 상단 프로필 - Settings - Access - Emails

 

 

팀원들 colne

git clone 깃허브주소 . : 통째로 복붙 (추가) (팀원들이 원본을 가져올 때) (폴더 O 상황) / 해당 폴더에 파일들을 클론

git clone github 주소 : (폴더 X 상황) / 아무 설정없이 바로 명령실행하면 클론 됨 / 레파지토리명을 폴더로 만들고 그 안에 파일들을 클론

 

 

파일 옮길때 용량 줄이기
rm -rf node_modules

 

추가로 설치할 라이브러리나 React에서 설치하는 것도 추가 예정