개발야옹

Setup

$ npm i -g @nestjs/cli
$ nest new project-name

Project Structure

src
⎿ app.controller.spec.ts
⎿ app.controller.ts
⎿ app.module.ts
⎿ app.service.ts
⎿ main.ts

Nest Project Start

npm run start

app.controller.ts

import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

- constructor(private readonly appService: AppService) {} 

: app.service.ts 를 AppController에 주입(Injection)하여 app.service.ts 에 정의되어 있는 함수를 사용할 수 있도록 함.

app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

localhost:3000 에 접속하면 'Hello World!' 가 출력되는 것을 확인할 수 있다.

1. NextJS에 TawilwindCSS 적용하기

TailwindCSS 공식 문서 참고하여 작성하였습니다.

2. Create NextJS Project

npx create-next-app@latest my-project --typescript --eslint
cd my-project

3. Install TailwindCSS and PostCSS

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

4. Configure template path

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Add Tailwind directive to CSS

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

6. Start the build process

npm run dev

7.  프로젝트에 TailwindCSS 잘 적용되는지 확인하기

// index.tsx
import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <div className="flex items-center justify-center h-screen bg-white">
      <h1 className="font-bold text-blue-800">Hello Tailwind!</h1>
    </div>
  )
}

export default Home