Next.js 기본세팅

npm install -D @types/node @types/react @types/react-dom typescript

npx prettier . --write

git add .

git status

git commit -amend

[alias]
    co = checkout
    ci = commit

깃설정

https://silver0r.tistory.com/72

git 초기 설치 및 세팅(window 기준)

git(http://git-scm.com/) 1.8.5.2 (2014.01.27) 1. 다운로드 windows 용으로 다운로드 http://git-scm.com/ -> Downloads -> Windows(http://git-scm.com/download/win) 2. 설치 설치옵션은 각자의 재량것(상황에 맞게 세팅) 설치하면 Gi

silver0r.tistory.com

git 설정

[alias]
    co = checkout
    ci = commit
    st = status
    br = branch
    ; ? = diff
    l = !git graph | less -FXRS
    r = !git graph -20 | less -FXRS
    h = !git graph -1 | less -FXRS
    graph = log --graph --date-order -C -M --pretty=format:\"%C(blue)%h%C(reset) (%ar) [%an] %C(yellow)%d%Creset %s\" --all --date=short
    ls = log --graph -C -M --pretty=format:"%C(yellow)%h%Cgreen%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --all --date=short
    ll = log --pretty=format:"%C(yellow)%h%Cgreen%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --all --numstat
    ; standup = log --since yesterday --oneline --author <who@you-want-to-know.com>
    del = "!f() { git branch -d \"$1\" && git push origin --delete $1; }; f"

prettier 플러그인

layout

앱디자인

app/globals.css

페이지/

app/style/globals.css

<react.fragment> = <>

modalcontext

모달프로바이더

제목2

git reset --hard HEAD

git add .

git refolg

git

npm install @mui/material @emotion/react @emotion/styled

git 알리아스

[alias]
    co = checkout
    ci = commit
    st = status
    br = branch
    ; ? = diff
    l = !git graph | less -FXRS
    r = !git graph -20 | less -FXRS
    h = !git graph -1 | less -FXRS
    graph = log --graph --date-order -C -M --pretty=format:\"%C(blue)%h%C(reset) (%ar) [%an] %C(yellow)%d%Creset %s\" --all --date=short
    ls = log --graph -C -M --pretty=format:"%C(yellow)%h%Cgreen%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --all --date=short
    ll = log --pretty=format:"%C(yellow)%h%Cgreen%d\\ %Creset%s%Cblue\\ [%cn]" --decorate --all --numstat
    ; standup = log --since yesterday --oneline --author <who@you-want-to-know.com>
    del = "!f() { git branch -d \"$1\" && git push origin --delete $1; }; f"

npm install -D eslint-plugin-prettier 프리티어 설정

{
  "env": {
    "browser": true,
    "es2021": true,
    "commonjs": true
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint", "react"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

settings.json

{
    "editor.formatOnSave": true,
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
      "editor.defaultFormatter": "Vue.volar"
    },
    "[dockerfile]": {
      "editor.defaultFormatter": false
    },
    //
    "typescript.preferences.importModuleSpecifier": "non-relative",
    //
    "terminal.integrated.rendererType": "dom",
    "terminal.integrated.fontFamily": "Ubuntu Mono derivative Powerline",
    "terminal.integrated.fontSize": 14,
    //
    "editor.tabSize": 2,
    "window.zoomLevel": 3,
    "workbench.colorTheme": "Default Light Modern",
    // "editor.fontSize": 14,
}

/pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

/pages/_app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

/styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
    rgb(var(--background-start-rgb));
}

pages / app 구조

/pages/index.tsx

export const LayoutNavigation = () => {
  return (
    <div className='fixed w-full flex flex-row justify-between gap-1 bg-red-300 h-10'>
      <div>Menu Button</div>
      <div>Title</div>
      <div>User Icon</div>
    </div>
  )
}

export default function Page() {
  return (
    <>
      <LayoutNavigation />
      Hello World
    </>
  )
}

/pages/legacy/index.tsx

import { LayoutNavigation } from '@/pages'
import React from 'react'

export default function LegacyPage() {
  return (
    <React.Fragment>
      <LayoutNavigation />
      <div className='flex flex-col gap-1 h-40'>
        <div>Legacy World 1</div>
        <div>Legacy World 2</div>
        <div>Legacy World 1</div>
        <div>Legacy World 2</div>
        <div>Legacy World 1</div>
        <div>Legacy World 2</div>
        <div>Legacy World 1</div>
        <div>Legacy World 2</div>
      </div>
    </React.Fragment>
  )
}

npm install @mui/material @emotion/react @emotion/styled

/app/layout.tsx

'use client'

import ModalProvider from '@/components/ModalProvider'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Providers from '@/app/providers'
import { StyledEngineProvider } from '@mui/material'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <body className={inter.className}>
        <StyledEngineProvider injectFirst>
          <ModalProvider>{children}</ModalProvider>
        </StyledEngineProvider>
      </body>
    </html>
  )
}'use client'

import ModalProvider from '@/components/ModalProvider'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Providers from '@/app/providers'
import { StyledEngineProvider } from '@mui/material'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <body className={inter.className}>
        <StyledEngineProvider injectFirst>
          <ModalProvider>{children}</ModalProvider>
        </StyledEngineProvider>
      </body>
    </html>
  )
}

/components/ModalProvider.tsx

import { Box, Modal, Typography } from '@mui/material'
import { createContext, useState } from 'react'

export const ModalContext = createContext(null)

interface Modal {
  open: boolean
}

export default function ModalProvider({ children }) {
  const [modal, setModal] = useState<Modal>({ open: false })

  return (
    <ModalContext.Provider
      value={{
        open: () => {
          setModal({ open: true })
        },
        close: () => {
          setModal({ open: false })
        },
      }}
    >
      {children}
      <Modal
        open={modal.open}
        onClose={() => {
          setModal({ open: false })
        }}
        aria-labelledby='modal-modal-title'
        aria-describedby='modal-modal-description'
      >
        <Box
          sx={{
            position: 'absolute' as 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 400,
            bgcolor: 'background.paper',
            border: '2px solid #000',
            boxShadow: 24,
            pt: 2,
            px: 4,
            pb: 3,
          }}
        >
          <Typography id='modal-modal-title' variant='h6' component='h2'>
            Text in a modal
          </Typography>
          <Typography id='modal-modal-description' sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </ModalContext.Provider>
  )
}

/components/ModalProvider.tsx

import { Box, Modal, Typography } from '@mui/material'
import { createContext, useContext, useState } from 'react'

export const ModalContext = createContext(null)

interface Modal {
  open: boolean
}

export const ExampleModal = ({ open, onClose }) => {
  // const { modal, open, close } = useContext(ModalContext)
  return (
    <Modal
      open={open}
      onClose={() => {
        onClose()
      }}
      aria-labelledby='modal-modal-title'
      aria-describedby='modal-modal-description'
    >
      <Box
        sx={{
          position: 'absolute' as 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 400,
          bgcolor: 'background.paper',
          border: '2px solid #000',
          boxShadow: 24,
          pt: 2,
          px: 4,
          pb: 3,
        }}
      >
        <Typography id='modal-modal-title' variant='h6' component='h2'>
          Text in a modal
        </Typography>
        <Typography id='modal-modal-description' sx={{ mt: 2 }}>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
        </Typography>
      </Box>
    </Modal>
  )
}

export default function ModalProvider({ children }) {
  const [modal, setModal] = useState<Modal>({ open: false })

  return (
    <ModalContext.Provider
      value={{
        modal,
        open: () => {
          setModal({ open: true })
        },
        close: () => {
          setModal({ open: false })
        },
      }}
    >
      {children}
      <ExampleModal
        open={modal.open}
        onClose={() => {
          setModal({ open: false })
        }}
      />
    </ModalContext.Provider>
  )
}

저작자표시 비영리 변경금지

'컴퓨터공부 > ASAC 웹풀스택' 카테고리의 다른 글

git 사용법 정리 (0)	2023.09.19
ASAC 웹 풀스택 리액트 복습 (0)	2023.09.11
리액트 쿼리 ,리액트 폼 으로 왠만한 코드가 해결된다? (0)	2023.09.05
스프링 컨테이너에서 객체를 주입한다 , AOP , 스타터팩 ,formatted()메서드 (0)	2023.09.05

Life & study

Next.js 기본세팅