1. Node js 설치 필요
2, 터미널에서
$ npm i -g @nestjs/cli
$ nest new project-name
3. VS CODE에서 Ctrl, Shift + P => code라고 입력
=> 셀 명령: PATH에 'code' 명령 설치(필수 사항은 아니고, 설치하면 터미널에서도 vs code 열 수 있음)
* app.controller.ts에서 @Controller('hello') 여기서 ( ) 괄호 사이에 'hello'라고 입력을 한다면,
localhost:3000/hello와 같은 뜻임.
* this는 자기 자신안에 있을 때 사용 가능
예_this.appService.getHello()
* Nest js 사용 시, 터미널에서 nest -h 라고 입력하면, 사용 가능한 옵션들이 나옴
예_nest g controller todos => todos에 대한 controller폴더가 생기고 Module에 자동으로 생성이 됨.
* 터미널에서 nest -h 실행 후, nest g resource posts(posts는 폴더명) 실행시켜주면,
REST API CRUD 폴더가 설치가 됨.
* nest js 사이트 : https://docs.nestjs.com/openapi/types-and-parameters#types-and-parameters 에 접속하고,
Swagger라고 검색하면,
좌측 폴더에 OPENAPI => Introduction
$ npm install --save @nestjs/swagger
=> main.js에서 웹사이트에 있는 코드대로 그대로 복붙
main.ts
import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
const config = new DocumentBuilder()
.setTitle('Cats example')
.setDescription('The cats API description')
.setVersion('1.0')
.addTag('cats')
.build();
const document = SwaggerModule.createDocument(app, config);
SwaggerModule.setup('api', app, document);
await app.listen(3000);
}
bootstrap();
=> 이 상태에서 localhost:3000/api 라고 입력하면,
현재 api를 볼 수 있음.
=> main.ts에서(위 코드와 동일함) 내부 정보 수정 가능
=> 내부 정보를 수정하고, 다시 localhost:3000/api로 접속을 하면,
아래와 같이 API 정보들이 변경이 됨.
# Prisma라는 ORM을 사용하여, Mysql 데이터와 어떻게 연동 시키는지? (DB연결)
(Object Relational Mapping(객체-관계-매핑))
-----------------------------------------------------------------------------------------------------------------------------------------------------
* nest prisma를 통하여, nest js 실행해보기
(데이터베이스 연동할 때 사용)
Prisma 란?
공식 홈페이지 에서 확인해보면 차세대 오픈 소스 ORM 으로 아래와 같은 구성으로 이뤄져있다고 합니다.
* ORM은 Object Relational Mapping(객체-관계-매핑)의 약자
- Prisma Client : NodeJS 와 TypeScript 전용 Type Safe 및 자동 생성 쿼리빌더
- Prisma Migrate : Migration system, 데이터 모델링
- Prisma Studio : GUI 를 통해 DB 를 수정할 수 있는 기능
$ npm install prisma --save-dev
$ npx prisma
// prisma 폴더 & 파일 생성
$ npx prisma init
# 터미널에서 npx prisma init 실행 후,
prisma 디렉토리 및 파일(schema.prisma)가 자동으로 생성이 됨
=> 콘솔 명령어들도 npx prisma를 터미널에서 검색시 어떤걸 사용 가능한 지 확인 가능
terminal
@ npx prisma
=> migration이라는 파일을 만들려면,
@ npx prisma migrate dev
Install and generate Prisma Client
$ npm install @prisma/client
module 생성
nest g module todo
controller 생성
nest g controller todo/controller/todo --flat
service 생성
nest g service todo/service/todo --flat
----------------------------------------------------------------------------------------------------------------------------------------------------------------
# mySQL 사용 이유?
Workbench -> (SQL언어) -> RDBMS* 에 요청을 해야되는데
요청할 때, SQL언어로 보내야 되는데, 그런 코드를 하나씩 작성하기가 어려움
-> mysql사용하면 원하는 형식만 맞춰서 입력하면
자동으로 SQL(Server Query Language)언어로 변경되어서 작성됨.
* RDBMS = 관계형 데이터베이스 (my sql, maria DB, oracle DB..)
- 관계형 데이터베이스의 장점
직관적인 데이터 표현 방법을 제공하고 관련 데이터 포인트에 쉽게 액세스
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# MyWorkbench로 DB 생성시
rid : 고유번호를 주기 위해.(필수는 아님)
*PK(Primay Key): rid를 AI로 설정을 했기 때문에 / 각 행의 고유 식별자
*NN(Not null): low의 각각의 column들의 값이 있어야 함
(온도,날짜,시간..등)
데이터 입력시 무조건 있어야 됨
*Unsigned (부호가 없음, 모든게 양수 = 0또는 양수)
*AI(auto increment) : 자동 증가(고유번호 1번 다음 2번 ..이런식으로 자동증가)
*ZF(Zero fill) :자리수를 맞춰야 돼서,
부족한 부분은 0으로 채운다 / 001 = 1, 0001 = 1, 01 = 1 / INT(3)은 001으로 0으로 채워서 만듦
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# 1. Insomnia에서 body변경하고(post,delete..등) DB에 업데이트
2.DB에서 직접 apply해서 수정
위 2가지의 차이는 2.DB에서 직접 데이터 수정이 가능하지만,
수량이 많아지는 경우 개발자가 하나씩 일일이 다 수정하는데에 많은 시간 소요됨
=> 웹사이트에서 사용자가 바로 수정 또는 등록 할 수 있도록, 자동화를 만드는 편이 시간을 줄여줌.
(예_ 사용자가 본인 폰 번호를 수정해달라고 요청 => DB에서 직접 수정 가능하지만, 그렇게 하면 번거로움
=> 웹사이트에서 직접 바로 수정하도록 하면, 개발자가 다시 안 봐도 됨, 효율적)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
# 상담신청 (이름,이메일,요청사항) 기입 후 -> 입력하기를 누르면 ->
1) 프론트 : input에서 해당 "입력하기"가 클릭이 되었을 때,
onClick 이벤트리스너를 통하여 어떤 함수가 실행이 되게 하는?
: 이렇게 실행 되는게 맞지만, 웹사이트에 "검사"에서는 확인이 안됨
(개발자가 작성하는 코드랑 웹사이트 "검사"에서 나타나는 js코드가 다름, 변형이 되어서 생성되기 때문)
2) 백엔드에서는 위에서 실행된 함수가 DB로 전달이 되면,
그 요청받은 작업을 수행하는?
: 맞음, 이어서 DB에서는 요청받은 정보를 다시 프론트로 전달하면 됨.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------