로그인 구현( module, service, controller, entity 셋팅 )

음...

사용언어 node, nest, react (맞나 이스펠링 ? ) 참고로 vscode씀 ㅋㅋ 

디비 mariaDB

 

◈ 첫번째로는 node 와 nest 설치 ! 최신버전으로 설치바람( 검색하면 설치하는법다나옴 꽤쉬움 ㅋㅋ 사실나도 gpt가 다해준건 비밀)

 

◈  nest가 주언어이기 때문에 module, service, controller, entity 를 만들어준다 물론 확장자는 .ts 

• nest g (module or service or controller) (생성할경로) < - 명령어를 쓰면 좋다(entity는 안만들어짐!!!)
• ex) nest g module api/admin <- 이런식으로 그럼 아래 그림처럼 만들어놓으면됨

일단 이렇게 만들어 놓고 시작

 

◈  아무것나 먼저 코드를 작성해도되지만 난 entity먼저 셋팅해놓고 하는게 좋은거같아서 entity먼저 작성(entity는 파일생성으로 만들면되요)

• 이렇게 작성하는게 맞나 모르겟지만.. 아래 그림처럼 일단 작성을 해두었

entity 코드 작성

• 아 여기서 나는 일단 서버에 mariaDB를 설치를 하구 typeorm이라는 라이브러리를 사용하여 디비에 접속 할 것 이건 밑에서 모듈 코드작성 할 때 다시 다뤄 보기로 하구
• adminAccount라는 테이블과 adminStratorSession테이블로 이름을 정했다.(테이블 이름은 자기맘대로 해도됨!)
• 그리고 그밑으로는 해당테이블의 클래스 이름 , 해당 테이블을 만들때 설정 했던 컬럼들 (저렇게 셋팅 하는게 맞나 싶긴한데 뭐.. 이상한거면 댓글로 좀 알려주셍 ㅠ)

◈ modul을 코드 완성을 해보자

• 처음으로는 라이브러리 설치를 해보자 ( typeorm, mariaDB, mysql2 <- 전 이거 설치함)
• app.module.ts에 typeORM으로 디비를 실행시킬 코드작성을 해보쟈
•  nest g module 생성할경로 <  이렇게 생성을하면 app.module.ts에 자동으로 모듈이 등록이 된다(아래 그림처럼)

이렇게됨

• 이제 Module에 typeOrmModule을 사용해 디비설정을 import해서 실행을시킬때 디비가 켜지게 해보자
• 위그림처럼 configs폴더에 typeorm.config.ts파일을 만들어줬당
• 그리고 mariaDB를 설치하고 설정했던 아이피, 호스트등을 셋팅을 해놓았다 아래그림 참고

요로코롬 했음

여기서 .env를 맨 바깥경로(root경로)에 만들어서 위에 코드에 host나 port등등 변수로 지정되어 있는것을 관리를 했다.(라이브러리 dotenv설치 하면 가능함)

이런식으로~

 

그리고 최상단 app.module에 import를 시키면된다 밑에 스샷참고

TypeOrmModule.forRoot(설정한 config파일) 나머지 import된 module들은 무시해주세요

위에처럼 설정된 파일을 저렇게 import시키고 실행을 시키면 해당 설정파일에 디비에 접속을 하게 된다

그 이후에 

 

admin.module 만든곳에 들어가

밑에 그림처럼 import 를시키자 !

• nest g module (생성할경로)  < 이걸먼저 설치하고 차례대로 service, controller를 설치하면 module에 저렇게 자동으로 등록이 된다 .. 따로 내가 할 필요가 없었음.. 내가한거는 import , exports 이거 두개밖에 안함 ㅋㅋ
• 그리고 TypeOrm모듈로 entity만든걸로 저렇게 import 해두면 해당 entity에 디비가 실행이된다.

※ 중간중간 npm run start:dev 명령어를 사용해 개발모드로 실행시켜서 재대로 해당 디비에 접속되는지 확인해보고 하시는걸 추천드려요 

 

자 이제 위에처럼 디비 접속 세팅을 다했쓰면

이제 디비에 저장되어있는 데이터로 로그인을 만들어봅시다으

 

◈ service, controller 만들기

 

아까 nest g 명령어로 controller와 service를 만든것을 이제 활용해볼겁니다

 

먼저 저는 service먼저 만들고 그다음에 controller를 만드는게 편해서 (순서는 편하실대로 하시면됩니다)

 

일단 첫번째로 밑에 스크린샷 처럼 constructor 이란걸 만들어줘야합니다. 

 

요런 식으로 만드러줍니다

 

그런다음 레퍼지토리를 만들어줘야하는데

private 레퍼지토리이름(마음대로 지으셔도되요): Repository<아까 모듈에 셋팅했던 entity이름>

이런식으로 작성을하여 constructor안에 넣어줍니다

 

그러면 저 레퍼지토리이름으로 해당 디비를 조회 할 수가 있습니다.

밑에 사진 참고해서 봐주세욤

 

요런식으로 레퍼지토리를 사용하여 해당디비의 테이블에서 조회(쿼리)를 실행 할수 있습니다.

 

자 이제 이렇게 sevice에서 만든 코드를 controller에서 활용을 해봅시다

 

controller에서 앞에만든 service를 import 하고

export class 안에 constructor을 만든다( 앞에만든 service를 넣어서) 밑에 사진 참고

 

interface는 무시하고 그 밑에 있는 @Controller 부터 참고

constructor을 추가하고 

@Controller(경로) 이거는 저 괄호안에 이제 api통신을 할때 쓰는 경로를 만드는 것이다.

예를들어 저위 사진처럼 admin으로 한다면 

 

위에 코드를 로컬에서 실행시켰을때 localhost:3000/admin

이런식으로 시작을 하게 만드는 경로를 정해주는 것 임

 

그리고 이제 sevice에서  만든 코드를 가지고 여기서 localhost:3000/admin/login 경로로 들어가면 로그인이 가능하게 만들어 보면 (밑에 사진 참고)

이런식으로 저는 만들었습니다.

중간중간 session에 저장을 시키는 부분도 있지만 그런부분은 참고만 하시구 전체적인 sevice를 활용하는

방법을 좀 봐주셨으면 합니다.

 

설명을 좀 하자면 @Post('/login')

Post방식으로 localhost:3000/admin/login 경로로 데이터를 보낸다는 말이다 이런식으로
Get, Delete, Put, Patch 등등 여러방식으로도 작성이 가능하다

요로코롬 하면 

 

디비와 연동이 되어 해당 테이블에서 데이터를 조회해서 알수있는 api 완성!!

 

다음글은 로그인데이터를 조회를 해서 session에 저장하는 법을 알아보겠씀니당