Nest.js, Typescript, React와 File Upload, MongoDB 연동

2024. 6. 8. 15:28서버 프로그래밍

다음 블로그 내용을 참고하여 기본적인 MongoDB의 CRUD API를 추가했다. 좋은 레퍼런스.

https://medium.com/globant/crud-application-using-nestjs-and-mongodb-99a0756adb76

 

CRUD application using NestJS and MongoDB

Introduction:

medium.com

 

docker-compose로 실행시킬때 백엔드에서 접속하거나, gitlab CI/CD 파이프라인에서 백엔드 도커 이미지로 접속을 하기 위해 환경설정 변수 MONGODB_URI를 사용하도록 수정한다.

import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { MongooseModule } from '@nestjs/mongoose';

@Module({
  imports: [
    ConfigModule.forRoot(),
    MongooseModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: async (configService: ConfigService) => ({
        uri: configService.get<string>('MONGODB_URI'),
      }),
      inject: [ConfigService],
    }),
  ],
})
export class AppModule {}

https://medium.com/@prajapatijinesh28/nestjs-meets-mongodb-a-developers-diary-1b0b2184825b

 

NestJS meets MongoDB: A Developer’s Diary

Introduction

medium.com

 

* MongoDB 사용자 계정 관리 및 로그인 처리를 위한 좋은 레퍼런스. 오타, Typescript 타입 체크 등에 걸리는 문제가 있지만 어렵지 않게 JWT를 이용한 access_token 생성 및 사용이 가능해진다.

https://medium.com/@anikettikone9/authentication-authorization-using-nest-js-typescript-with-mongodb-2f4de48fafe0

 

Authentication & Authorization Using Nest Js (TypeScript) with MongoDb

Before We start the coding part we will go through some core concepts about same,you can also skip this part if already known !

medium.com

https://github.com/annytikone/nest-user-auth/tree/master

 

GitHub - annytikone/nest-user-auth: for medium article

for medium article. Contribute to annytikone/nest-user-auth development by creating an account on GitHub.

github.com

 

 

참고자료

https://ouelle.medium.com/basic-crud-operations-with-nestjs-typescript-fastify-mongodb-808f3c43890

 

Basic CRUD operations with NestJs, TypeScript, Fastify & MongoDB

Fastify is a web framework for building efficient and high-performance web applications and APIs in Node.js. It is designed to be…

ouelle.medium.com

 

 

엑셀 파일 처리는 이것을 사용했는데, React나 NestJS에서 모두 사용 가능하다.

https://www.npmjs.com/package/read-excel-file

 

read-excel-file

Read small to medium `*.xlsx` files in a browser or Node.js. Parse to JSON with a strict schema.. Latest version: 5.8.1, last published: a month ago. Start using read-excel-file in your project by running `npm i read-excel-file`. There are 115 other projec

www.npmjs.com

 

NestJS의 파일 업로드 예제

https://github.com/nestjs/nest/tree/master/sample/29-file-upload

 

nest/sample/29-file-upload at master · nestjs/nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript 🚀 - nestjs/nest

github.com

https://docs.nestjs.com/techniques/file-upload

 

Documentation | NestJS - A progressive Node.js framework

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea

docs.nestjs.com

 

React에서 파일 업로드 처리하는 방법

https://uploadcare.com/blog/how-to-upload-file-in-react/

 

How to upload files in React — Uploadcare Blog

In this article you will learn how to write a file-uploading logic in React

uploadcare.com

 

React용 스프레드시트 컴포턴트

https://github.com/handsontable/handsontable?tab=readme-ov-file

 

GitHub - handsontable/handsontable: JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Sup

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡ - handsontable/handsontable

github.com

https://handsontable.com/docs/react-data-grid/

 

React Data Grid - Documentation | Handsontable

Handsontable is a popular JavaScript data grid component that brings the well-known look and feel of spreadsheets to your application. You can use Handsontable for all types of data-rich, accessible applications, empowering users to enter, edit, validate,

handsontable.com

https://jspreadsheets.com/handsontable/

 

jspreadsheets

jspreadsheets compiles top spreadsheets and data grids written in JavaScript. It helps you choose the most suitable component for your project.

jspreadsheets.com

 

Axios 예제

https://stack94.tistory.com/entry/TypeScript-Axios-TypeScript-%EC%A0%81%EC%9A%A9%ED%95%98%EC%97%AC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90

 

느린 개발자

프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다.

stack94.tistory.com