NuxtJS, NestJS, TypeORM 소개

gga·2022년 6월 20일
NestJSNuxtjstypeOrmvue넉스트뷰프레임워크
0

Vue

목록 보기
3/3
post-thumbnail

NuxtJS

The Intuitive Vue Framework
An open source framework making web development simple and powerful

공식 홈페이지에 따르면 Nuxt는 vue.js를 기반으로 웹개발을 쉽고 효과적으로 구축할 수 있는 오픈 소스 프레임워크이다.

NuxtJS는 Vue.js 기반의 SSR(Server Side Rendering) 환경을 사용하는 프레임워크이다.

Vue.js는 CSR(Client Side Rendering) 방식을 사용하는 프레임워크

NUXT 이름은 어떻게 나오게 되었나
2016년 10월 25일 zeit.co팀은 React를 위한 SSR 프레임워크인 Next.js를 발표했다. 발표 몇 시간 뒤, Vue를 위한 프레임워크를 만들어야겠다고 생각했고 Nuxt가 탄생하게 되었다.
r'e'act => n'e'xt 에서 영감을 받아 v'u'e => n'u'xt 가 되었다.

특징

Node.js 환경

Universal Mode

universal = server-side rendering + client-side navigation
첫 방문 시 SSR 방식으로 화면이 렌더링 되고, 그 이후 페이지 이동은 CSR 방식이 적용된다.

CSR

클라라이언트 사이드 렌더링은 내용이 없는 HTML을 받아 페이지의 내용을 브라우저에서 자바스크립트로 작동시킨다.

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
장점
  • 처음 로딩에 필요한 파일(html, js, static)을 다운 받고나면 다음 페이지 로드 시간이 줄어든다.
단점
  • 처음 HTML에 데이터가 없다보니 크롤러가 해당 페이지를 빈 페이지로 착각하여 SEO에 취약할 수 있다.

SSR

서버 사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 전달해준다.

장점
  • SEO: 크롤러는 완전히 렌더링된 페이지를 볼 수 있다.
단점
  • CSR에 비해 초기 load 속도는 빠르지만, 매 페이지마다 템플릿에 대한 새로운 load가 필요하다.
  • window, documnet object
    컴포넌트가 최초로 생성되는 시점이 브라우저가 아니라 Node.js 환경이기 때문에 beforeMount나 mounted에서 접근할 수 있다.

Life Cycle

Components Auto-import

템플릿 태그를 크롤(crawl)해 컴포넌트를 자동으로 Import한다.

File-system Routing

웹 사이트는 여러 페이지를 가지고 있어서 이를 표시하려면 라우터가 필요하고 config file(ex. router.js)을 작성해야한다.

하지만 nuxt 사용 시, pages 폴더에 .vue file를 작성하는 것만으로 vue-router configuration을 자동 생성해준다.

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

자동 생성된 router config

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

NestJS

  • 개발자 Kamil Myśliwiec가 Angular로부터 영감을 받아 만들어졌다.
  • OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming)를 사용할 수 있다.
  • 애플리케이션 아키텍처를 제공한다. Spring MVC와 유사한 아키텍처
  • Node.js에 기반을 둔 web framework로써 Express(기본값) 또는 Fastify 프레임워크를 래핑하여 동작한다.
  • 다른 라이브러리와 함께 사용할 수 있으므로 쉽게 확장할 수 있다.
  • 기본적으로 Typescript를 지원한다.
    (순수 Javascript로 코딩 가능)
  • Frontend 와 Backend 분리
    - 프론트엔드에서는 백엔드를 API를 통해서만 접근

Node.js

  • 노드는 웹서버가 내장되어 있어 코드를 통해 서버를 만들고 실행할 수 있다.
  • 모듈 시스템을 구축하고 있다.

Express

  • Node.js 프레임워크 중 하나이다.

Typescript

  • 마이크로소프트에서 개발
  • JS + Type: 변수에 타입을 지정할 수 있다.
    • 타입 체킹을 통해 개발 과정에서 즉각적으로 에러 검사를 할 수 있다.
    • 컴파일을 통해 자바스크립트로 변환된다.

설치

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

폴더 구조

project-name 디렉토리가 생성되고 하위에 src 폴더가 생성된다.

src
 | app.controller.spec.ts		// The unit tests for the controller.
 | app.controller.ts			// A basic controller with a single route.
 | app.module.ts				// The root module of the application.
 | app.service.ts				// A basic service with a single method.
 | main.ts						// 애플리케이션 엔트리 파일: 핵심 기능 NestFactory를 사용하여 Nest 애플리케이션 인스턴스를 생성

.service.ts : 비지니스 로직
.module.ts : 애플리케이션 루트 모듈
.entity.ts : 실제 DB의 테이블과 매칭될 클래스
.dto.ts : 계층간 데이터 교환을 위한 객체

구성요소

Controllers

  • request를 처리하고 클라이언트에게 response를 반환하는 역할을 한다.
  • 컨트롤러는 적어도 1개의 route를 가진다.

Providers

  • 애플리케이션이 제공하고자 하는 핵심 기능 역할을 한다.
  • repository, factories, helpers, services 등 여러가지 형태로 구현이 가능한다.
  • 프로바이더는 컨트롤러 또는 다른 프로바이더에 의존관계를 주입할 수 있다.
  • @Injectable 데코레이션 사용

특징

  • Layered Architecture(계층형 구조)
  • IoC: Inversion of Control(제어 역전)
  • DI: Dependency Injection(의존성 주입)

Modules

코드를 구조화하고 기능을 재사용 가능한 단위로 분할하는데 사용한다.
controller와 service를 module로 묶어 관리하고 여러 모듈이 모여 하나의 프로젝트를 구성한다.

TypeORM

  • Node.js에서 실행되고 TypeScript로 작성된 ORM 라이브러리이다.
  • 데코레이터(@)으로 1:1, 1:n, n:m 관계 설정을 할 수 있다.

설치

$ npm i --save @nestjs/typeorm typeorm

ORM(Object Relational Mapper)

  • 엔티티를 데이터베이스 테이블과 매핑하는 기술이다.
  • 객체-테이블 및 테이블-객체 변환을 자동화함으로써 개발 프로세스를 단순화한다.
  • 객체와 데이터베이스 변경에 유연하게 대처할 수 있다.

장점

  • 데이터 모델을 한 곳에서 작성할 수 있으므로 코드 수정, 유지보수, 재사용이 쉽다.
  • SQL을 제대로 작성하지 않아도 된다.
    예를 들어, 저자 Linus의 책을 가져오려고 할 때 SQL문은 다음과 같다.
book_list = new List();
sql = "SELECT book FROM library WHERE author = 'Linus'";
data = query(sql); // I over simplify ...
while (row = data.next())
{
     book = new Book();
     book.setAuthor(row.get('author');
     book_list.add(book);
}

하지만 ORM을 사용할 경우 SQL문을 쓰지 않고 함수로 대체할 수 있다.

book_list = BookTable.query(author="Linus");

참고

Nuxt
https://nuxtjs.org
https://joshua1988.github.io/vue-camp/textbook.html
https://abangpa1ace.tistory.com/205

SSR
https://d2.naver.com/helloworld/7804182

NestJS
https://wikidocs.net/book/7059
https://velog.io/@kimjeongwonn/NestJS-%EB%8F%85%ED%95%99-%EC%86%8C%EA%B0%9C

profile
gga
이전 포스트

[vue.js] event

0개의 댓글