본문 바로가기
backend/NestJS

[NestJS] NestJS 간단한 CRUD 구현하기(2)

by BK0625 2023. 5. 31.
반응형

https://bk0625.tistory.com/49

 

[NestJS] NestJS 간단한 CRUD 구현하기(1)

https://bk0625.tistory.com/48 [NestJS] NestJS 프로젝트 시작하기 https://bk0625.tistory.com/3 [NestJS] NestJS란? 요즘 Node 진영에서 핫한 프레임워크인 NestJS에 대해 간략히 알아보겠다. NestJS는 Node.js에 기반을 둔 웹 A

bk0625.tistory.com

 

지난 포스팅에 이어서 CRUD를 구현해보도록 하겠다. 데이터를 불러오는건 지난 포스팅을 참조하면 된다.

 

뭔가 순서가 꼬인거 같지만 먼저 데이터를 삭제하는걸 구현해보자.

 

먼저 app.service.ts에 해당 코드를 작성한다.

 

  /**삭제가 잘 됐으면 {success:true} 안됐으면 {success:false 리턴} */
  async deleteOne(id:number){
    try{
      await this.todoRepository.delete(id);
      return {success:true}
    }catch(err){
      return {success:false};

    }
  }

 

만약 데이터가 삭제가 됐으면 {success:true} 객체를 리턴하고 뭔가 문제가 생겼으면 {success:false}를 반환할 것이다. id 값은 데이터베이스의 키 값으로 클라이언트에서 해당 키를 알려주면 그 키 값에 해당하는 데이터를 삭제한다.

 

그 다음엔 app.controller.ts로 이동해 해당 코드를 작성한다.

 

@Get('/delete/:id')
  deleteOne(@Param("id") id:number){
    return this.appService.deleteOne(id);
  }

 

url 엔드포인트에 있는 :id 가 파라미터 값이다. 클라이언트에서 요청이 localhost:5000/delete/1 값으로 오게 되면 @Param 데코레이터를 이용해 1이 id 값이라는 것을 알 수 있게 된다. 그 뒤에 id:number를 통해 타입을 지정해주면 id 변수 안에 해당 파라미터가 저장된다. 데코레이터 안에 있는 id 말고 밖에 있는 id는 변수이니 이름을 바꿔도 무방하다.

 

이제 테스트. localhost:5000/deleteOne/3으로 요청을 보내보자.

 

 

 

 

데이터가 잘 삭제 된 것을 확인할 수 있다. 이번에는 데이터를 한번 넣어보자.

 

app.service.ts에 밑에 내용을 작성한다.

 async insertOne(todo:TodoEntity){
    try{
      let todoEntity = new TodoEntity();
      todoEntity = todo;

      await this.todoRepository.save(todoEntity);

      return {success:true};
     
    }catch(err){
      return {success:false};
    }
  }

 

만약 insertOne 함수가 받는 인자가 entity와 다를 경우 해당 entity에 값을 매핑해줘야한다. 필자의 상황에선 인자가 entity 타입이였기 때문에 그냥 변수에 넣는거처럼 넣어도 문제가 없었다. 여기서도 마찬가지로 잘 입력이 되었으면 {success:true} 객체를, 문제가 생기면 {success:false} 객체를 리턴하게 한다.

 

app.controll.ts엔 다음과 같이 작성한다.

 

 

값을 클라이언트로부터 받아 처리하는 작업이기 때문에 Post 방식을 사용했다. Post 방식에서 데이터를 받기 위해선 @Body 데코레이터를 사용해 TodoEntity 타입의 todo 객체를 선언해 그 안에 Body 안의 데이터를 넣는다.

 

테스트를 해보자

 

 

url을 localhost:5000/insertOne으로 바꾸고 method를 post로 바꾼 다음 Body를 작성해준다. 문자열을 입력할 때엔 꼭 큰 따옴표를 사용해야한다. 만약 서버로 보내고 싶은 데이터가 있다면 저런 식으로 Body를 작성하면 되는데 서버에서 정한 타입이나 데이터에 맞지 않을 경우 Bad Request Error가 날 수 있으므로 주의.

 

 

 

 

데이터가 잘 들어간 것을 볼 수 있다.

 

마지막으로 수정을 구현해보자.

 

app.service.ts에 해당 코드를 작성한다.

 

 async modifyOne(todo:TodoEntity){
    try{
      let todoEntity = new TodoEntity();
      todoEntity = todo;

      await this.todoRepository.save(todoEntity);

      return {success:true};
    }catch(err){
      return {success:false};
    }
  }

 

insert와 코드가 같다고 생각되면 맞다. 같다. typeOrm에서 .save() 함수는 인자로 전달된 데이터가 데이터베이스 안에 없으면 입력을 수행하고 있으면 수정을 수행한다. 자세한 건 밑에 링크를 참조.

 

https://bk0625.tistory.com/7?category=999099 

 

[TypeORM] insert와 save

TypeORM을 쓰다보면 데이터베이스에 데이터를 insert 해야될 때 어떤 걸 써야할지 고민을 할 때가 있다. 보통 구글에 검색하면 1차적으로 나오는게 .save() 인데 .save()는 기본적으로 select 작업을 한다.

bk0625.tistory.com

 

 

그 다음엔 app.controller.ts에 해당 코드 작성

 

 

입력과 크게 다르지 않다. 이제 테스트를 해보자.

 

 

이번에는 입력이 아닌 수정이 목적이니 Body 부분에 id 값도 명확하게 적어 줘야 한다. 만약 id 값을 적지 않으면 해당하는 데이터가 없다고 판단되어 데이터가 새로 생성된다.

 

{
  "id":4,
  "todo":"javascript"

}

 

요청을 보내게 되면

 

 

이렇게 먼저 select 연산을 수행해 해당하는 데이터가 있는지 확인하고 update 연산을 수행하는 것을 확인할 수 있다.

 

js -> javascript

 

이렇게 수정이 된 것을 알 수 있다.

 

간략하게 NestJS로 CRUD를 구현해보았다. 처음해볼 땐 어려웠지만 차근차근 다시 해보니 그리 어렵지 않게 구현할 수 있었다.

 

공부하면서 정리한 내용입니다. 모든 지적 감사히 받겠습니다:)

반응형