NextJS/NextJS - ToDoList

[NextJs] - 풀 스택 투두리스트 만들기 (1) (feat. CNA없이/typescript/tailwindCSS)

위르겐 2023. 2. 27. 19:05

리액트의 프레임워크인

nextJS를 사용해 투두리스트를 만들어보자!

 

nextJS를 이용하면 

기존 CSR방식의 문제점들을 보완할 수 있다.

( 애플리케이션의 규모가 커질수록 초기로딩속도가 느리거나

혹은 SEO최적화가 힘든 점 등의 문제들 )

 

또한 API router를 통해 

서버를 구축하지 않고도

풀스택으로 개발할 수 있다는 점이 매혹적이었다.

 

이번 기회를 통해 백엔드를 간접적으로

경험해 볼 수 있다고 느꼈고

배우지 않을 이유가 전혀 없었다.

 

내가 처음 자바스크립트와 리액트를 공부할 때도

투두리스트를 만들었는데

nextJS로도 투두리스트를 만들며 익숙해진 후에 

개인프로젝트로 생각하고 있는

개인 블로그를 만들어볼까 한다.

 

 

nextJS

typescript

tailwind CSS 

prisma 

postgreSQL

 

지금 내가 nextJS를 배우기 위해서는

이 정도의 스택들을 사용할 수 있을 것 같다.

 

 

prisma랑 postgreSQL은

이번에 처음알게 됐는데

백엔드 지식이 없는 내가 

정말 간략하게만 소개해보자면

 

prisma는 관계형 데이터베이스에 접근할 때

SQL문법 대신

자바스크립트나 타입스크립트로

좀 더 직관적인 문법을 사용할 수 있게끔 해주고

 

postgreSQL은 가장 오래되고

안정적으로 관리되고 있는 관계형 데이터베이스이다.

 

 

검색해보면 자세한 내용이 나오지만

ORM이나 model 등의 다양한 용어들은

아직 깊이가 없어

설명하기 어렵다..

 

 

자 그럼 

개발환경 세팅해보자

 

참고로

create next-app 없이 진행할 예정이다.

 

위 명령어로 넥스트앱을 설치하면

nextJS 13버전이 설치되는데

현재까지 베타버전이고 아직 안정화되지 않았기 때문에

12버전을 사용할 것이다.

 

 

1. package.json 생성하기

프로젝트 폴더 생성 후 아래 명령어를 통해 package.json 설치해주자.

yarn init -y

 

2. 필요한 package 설치하기

타입스크립트와 react 그리고 next12버전을 전부 설치해주자

yarn add react next@12 react-dom
yarn add --dev typescript @types/react @types/node eslint eslint-config-next

 

3. package.json에 script 추가하기

package.json 파일에 다음을 추가한다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

 

4. public, pages 폴더 생성

pages는 파일 이름에 기반하여 라우팅 기능을 제공한다.

public은 이미지, 폰트와 같은 static asset들을 저장하는 공간이다.

 

5. pages 폴더에

_app.tsx / _document.tsx / _error.tsx / index.tsx 파일 생성

 

 

_app.tsx

_app.tsx에서는 컴포넌트 공통적으로 적용되는 레이아웃이나 상태 등을 적용할 수 있다.

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

앱이 시작할 때 가장 먼저 호출되며,

라우팅도 이 페이지에서 내부적으로 작동하면 되기 때문에 앱의 글로벌한 작업들을 수행하기에 좋다.

 

 

_document.tsx

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

'./pages/_document.js' 파일을 만들 경우 앱의 html 문서를 커스텀화할 수 있다.

 

 

 

_error.tsx

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

'./pages/_error.js' 파일을 만들면 에러 페이지를 커스텀화할 수 있다.

 

 

index.tsx

import React from 'react';

export default function Home() {
  return <div>메인페이지</div>;
}

 

index.tsx파일이 정말 중요한데

pages/index.tsx는

앱을 실행했을 때 가장 먼저 보이게 하는 화면이다.

http://localhost:3000

이 곳이 index의 경로이다.

 

만약 pages폴더 안에서 detail 폴더를 만든 후 그곳에 index.tsx를 만들면

http://localhost:3000/detail

이 경로로 접속했을 때 pages/detail/index.tsx 경로가 렌더링하고 있는

화면이 보일것이다.

 

 

 

 

 

여기까지 한 후 

yarn dev

명령어를 입력후 실행해보자!

 

 

기존에 없던 next-env.d.ts파일과

tsconfig.json파일이 생긴 후에 

 

이 화면이 나타난다!

 

next-env.d.ts파일은 TypeScript 컴파일러가 Next.js 유형을 선택하도록 보장해주며

tsconfig.json파일은

typescript 환경에서 직접 커스텀하여 어떻게 환경설정을 할지 정할 수 있는 파일이다.

 

 

 

 

 

이제 메인페이지가 정상적으로 띄워졌으니

tailwindCss를 적용해보자

 

 

[Tailwind css] 

 

https://tailwindcss.com/docs/guides/nextjs

위 링크대로 따라하기만 하면 끝이다.

 

 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

위 두개의 명령어를 차례로 실행해서 

설치해주고 

 

새로 생긴 tailwind.config.js 파일에서

 

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

기존 코드를 지운다음 위 코드를 넣어주자.

 

마지막으로 

app/globals.css 파일의 것들을 다 지운다음

 

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

 

위 코드들을 넣어주면 끝이다.

현재 폴더구조는

이런 모양이다.

 

 

_app.tsx에서 

globlas.css를 import해와야한다.

 

import React from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

이제 잘 적용됐는지 확인해보자.

 

 

import React from 'react';

export default function Home() {
  return <div className='text-blue-700 ml-[60px] mt-[60px]'>투두리스트</div>;
}

컬러랑 위치만 살짝 바꿔보자

 

아주 잘 작동하는걸 볼 수 있다.

 

 

 

이렇게

nextjs 12버전

typescript 

tailwind css

을 설치하고 실행했는데

 

투두리스트를 만들기까지

신나고 험난한 여정이 기다리고 있으니

재밌게 지켜봐주시길 ..!!

 

 

 

 

 

( 잘못된 정보가 있으면 언제든지 댓글로 알려주시기 바랍니다.)

 

반응형

'NextJS > NextJS - ToDoList' 카테고리의 다른 글

[NextJs] - 풀 스택 투두리스트 만들기 (마지막) (feat. SSR, Generic, Api Router)  (0) 2023.03.02
[NextJs] - 풀 스택 투두리스트 만들기 (2) (feat. prisma/ postgreSQL)  (0) 2023.03.01

'NextJS/NextJS - ToDoList'의 다른글

  • 현재글[NextJs] - 풀 스택 투두리스트 만들기 (1) (feat. CNA없이/typescript/tailwindCSS)

관련글

댓글

티스토리툴바