Nest 시작하기

Charley1013·2023년 9월 16일

NestJS

목록 보기
1/2
post-thumbnail

프로젝트 깃허브 링크 들어가기

Nest 설치하기

// 전역 nest 프레임워크 설치
npm i -g @nestjs/cli

// nest 프로젝트 시작
nest new

기존 Next 환경과 동일한 패키지 매니저를 사용하기 위해 pnpm으로 세팅함

Nest 파일 구조

  1. main.ts
    모듈을 실행하기 위한 초기 단계 React의 root 단계의 index.tsx와 비슷한 느낌
const app = await NestFactory.create(AppModule); // 모듈 연결
await app.listen(3000); // 포트연결
  1. app.module.ts
    컨트롤러를 관리하는 초기 단계 React의 route 연결을 하기 위한 app.tsx와 비슷한 느낌
@Module({
  imports: [],
  controllers: [MoviesController], // 컨트롤러
  providers: [MoviesService], // 컨트롤러 모델 형상화 공간
})

컨트롤러 생성하기

nest에서 제공하는 간단 명령어를 활용한다

// nest generate
nest g <option>

option :
	controller -> @ co
    service -> @ s
    
// 컨트롤러 생성하기
nest g co

이후 컨트롤러 폴더 이름을 입력하면 폴더가 생성된다.

컨트롤러 라우터 이해하기

Nest는 어떤 식으로 Rest API를 만드는지에 대한 설명

  • 공통
    • @Controller 함수 안에 String으로 입력하면 첫 Path 값이다
      ex) @Controller('test') => localhost:3000/test
    • 메소드 바로 아래에 비즈니스 로직을 입력해야 동작한다
    • 메소드 Path는 메소드 함수 안에 String으로 입력한다
      ex) @Get(':id') => localhost:3000/:id
    • query argument 로직이 필요한 경우 dynamic path보다 위에서 작성해야 한다 그러지 않으면 dynamic path의 일부분으로 판단한다
  1. Get
@Get()
getAll() {
  return '모든 영화 데이터 가져오기';
}

// localhost:3000/
  1. Get dynamic
@Get(':id')
// Param으로 dynamic path를 가져올 수 있다
getOne(@Param('id') movieId: string) {
  return `${movieId} 의 영화 데이터 가져오기`;
}
// localhost:3000/65
  1. Post
@Post()
  // Body로 front json data를 가져올 수 있다
  create(@Body() movieData) {
    return movieData;
}
// localhost:3000/
// body data
{
	"name" : "charley",
    "age" : "6",
}
  1. Delete
@Delete(':id')
remove(@Param('id') movieId: string) {
  return `${movieId} 의 영화 데이터 삭제하기`;
}
// localhost:3000/65
  1. Patch, Put
    간단하게 Patch = 자원의 부분 교체, Put = 자원의 전체 교체
@Patch(':id') // or @Put(':id)
// Param, Body를 동시에 가져올 수도 있다. 어떤 메소드도 해당되는 내용
patch(@Param('id') movieId: string, @Body() updateData) {
  // 하나의 json으로 만들기 위해 ES6 Spread Operator 활용
  return {
    updateMovie: movieId,
    ...updateData,
  };
}

// localhost:3000/65
// body data
{
	"name" : "charley",
    "age" : "6",
}
  1. Search
@Search('search')
// Query로 path argument 구현
search(@Query('year') movieYear) {
  return `${movieYear}년도 영화를 찾았습니다`;
}

// localhost:3000/search?year=2000

서비스 생성하기

// 서비스 생성하기
nest g s

이후 서비스 폴더 이름을 입력하면 폴더가 생성된다.
이전 컨트롤러와 같은 이름으로 입력하면 같은 root로 이동한다

서비스 구조 이해하기

  • @Injectable()를 사용해 service 의존성을 주입한다.
  • controller에서 사용할 수 있는 모듈을 제작한다.

Post, Delete 서비스 모듈 만들기

// project.service.ts
@Injectable()
export class MoviesService {
  private movies: Movie[] = []; // private = const처럼 불변

  create(movieData: Movie) {
    return this.movies.push({
      id: this.movies.length + 1,
      ...movieData,
    });
  }

  remove(id: string) {
    return this.movies.filter((movie) => movie.id !== +id);
  }
}

// project.controller.ts
@Controller('movies')
export class MoviesController {
  // service 로직 불변의 읽기전용으로 가져와서 사용하기 class import
  constructor(private readonly moviesService: MoviesService) {}

  @Post()
  create(@Body() movieData: Movie) {
    // service 바인딩
    return this.moviesService.create(movieData);
  }

  @Delete(':id')
  remove(@Param('id') movieId: string) {
    return this.moviesService.remove(movieId);
  }
}
profile
프론트엔드 개발자 김찰리

0개의 댓글