Blog

깃플 기술스택 구경하세요~ (스터디 프로젝트편)

, , , , , , , , , , ,

Gitple의 서비스를 구성하는 기술 중 가장 기본이 되는 기술 스택을 가볍게 경험할 수 있는 스터디 프로젝트를 소개하려 합니다.

Client App와 Server App를 간단히 살펴보며 사용된 기술 스택을 확인하고 유용한 패키지를 소개하겠습니다.

프로젝트 위치는 아래 저장소를 확인해주세요.

Github: Gitple-study-project

시나리오

  • 사용자 인증
    • 회원가입, 로그인, 로그아웃
  • 콘텐츠 관리
    • 조회, 등록, 갱신, 삭제
    • 전체 콘텐츠 키워드 TOP 5

기술 스택

프로젝트에서 사용되는 기술 및 패키지들은 아래와 같습니다.

Common

스터디 프로젝트에서는 공통적으로 Typescript를 사용하며 yarn을 통해 패키지를 관리합니다.

1
2
3
4
───gitple-study-project/
   ├── client/
   ├── server/
   └── README.md

Client App

클라이언트 프로그램은 간단한 사용자 인증과 게시글 CRUD 화면으로 구성됩니다.

augular 4 cli로 프로젝트를 생성하였으며 bootstrap UI를 적용하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
───client/
   ├── e2e/
   │   ├── app.e2e-spec.ts
   │   ├── app.po.ts
   │   └── tsconfig.e2e.json
   ├── src/
   │   ├── app/
   │   │   ├── content-list/
   │   │   │   ├── content-list.component.html
   │   │   │   ├── content-list.component.scss
   │   │   │   └── content-list.component.ts
   │   │   ├── content-write/
   │   │   │   ├── content-write.component.html
   │   │   │   ├── content-write.component.scss
   │   │   │   └── content-write.component.ts
   │   │   ├── sign-in/
   │   │   │   ├── sign-in.component.html
   │   │   │   ├── sign-in.component.scss
   │   │   │   └── sign-in.component.ts
   │   │   ├── sign-up/
   │   │   │   ├── sign-up.component.html
   │   │   │   ├── sign-up.component.scss
   │   │   │   └── sign-up.component.ts
   │   │   ├── app.component.html
   │   │   ├── app.component.scss
   │   │   ├── app.component.spec.ts
   │   │   ├── app.component.ts
   │   │   └── app.module.ts
   │   ├── assets/
   │   │   └── .gitkeep
   │   ├── environments/
   │   │   ├── environment.prod.ts
   │   │   └── environment.ts
   │   ├── favicon.ico
   │   ├── index.html
   │   ├── main.ts
   │   ├── polyfills.ts
   │   ├── styles.scss
   │   ├── test.ts
   │   ├── tsconfig.app.json
   │   ├── tsconfig.spec.json
   │   └── typings.d.ts
   ├── .angular-cli.json
   ├── .editorconfig
   ├── karma.conf.js
   ├── package.json
   ├── protractor.conf.js
   ├── README.md
   ├── tsconfig.json
   └── tslint.json

Server App

서버 프로그램은 클라이언트 프로그램에서 호출할 REST API를 작성합니다.

node.js로 작성되며 express로 서버를 생성합니다. 콘텐츠 리스트 목록은 redis를 사용해 캐싱 되고 데이터베이스로 mongodb를 사용합니다.

  • node.js & express : 서버 생성
  • mongooose & redis : 데이터베이스 & 캐싱 - 백엔드편 참고
  • node-restful : restful api <-> mongodb 연동 패키지
  • passport & jwt : 인증 처리
  • lodash : 데이터 가공 유틸
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
───server/
   ├── src/
   │   ├── js/
   │   │   ├── auth.ts
   │   │   ├── authToken.ts
   │   │   ├── db.ts
   │   │   └── passport.ts
   │   ├── routes/
   │   │   ├── contents.ts
   │   │   ├── keyword.ts
   │   │   └── signup.ts
   │   └── app.ts
   ├── .env
   ├── package.json
   ├── README.md
   └── tsconfig.json

패키지 소개

REST API

node-restful - Github: node-restful

rest는 http 프로토콜 인프라 상에서 자원의 표현으로 구분하여 자원의 상태를 주고받는 아키텍처 형식으로 분산 시스템 설계에 매우 유용하며 멀티 플랫폼 간의 데이터 통신이 간편합니다.

restful은 rest의 제약 조건 집합(아키텍처 스타일, 원칙)을 모두 만족하게 하는 것을 의미합니다.

이 스터디 프로젝트에서는 rest 응답과 mongodb와의 연동을 위해 node-restful이라는 모듈을 사용합니다. 이 모듈은 mongodb에 특화된 모듈로 rest 요청 및 처리를 간편하게 해줍니다.

사용자 인증 - passport & jwt

인증 처리를 위해 passport 미들웨어와 json web token 방식을 사용합니다.

passport - Github: passport

여러 인증 로직을 간편하게 사용할 수 있게 도와주는 미들웨어로 session, jwt, oAuth 등 여러 방식의 인증 로직을 제공합니다.

passport는 strategy를 인증 방식을 사용합니다.

strategy란 디자인 패턴의 하나로 객체들이 할 수 있는 행위 각각에 전략 클래스를 생성하고, 유사 행위들을 캡슐화하는 인터페이스를 정의하여, 객체의 행위를 동적으로 바꾸고 싶은 경우 직접 행위를 수정하지 않고 전략을 바꾸어 행위를 유연하게 확장하는 방법입니다.

passport는 이 starategy 전략을 사용하여 session, jwt, oAuth 등의 인증 방법을 구현해놓았습니다.

스터디 프로젝트에서는 local starategy와 jwt starategy를 사용하여 인증을 처리합니다.

local strategy 전략을 사용하여 sign in을 처리하고 jwt strategy를 사용하여 api 호출 시 요청에 대한 인증을 처리합니다.

키워드 추출

각 콘텐츠 내용에서 키워드를 추출하기 위해 TextRank 알고리즘을 이용합니다. 스터디 프로젝트에서는 node-summarizer을 사용해 키워드를 추출하고 lodash를 사용하여 데이터를 가공합니다. 가볍게 사용해보는 취지이므로 조사, 어미 등의 자연어 처리는 하지 않아 정확한 키워드 추출은 확인할 수 없지만 간단한 키워드 추출 및 가공 방식을 확인할 수 있습니다.

node-summarizer - Github: node-summarizer

TextRank는 그래프 기반의 순위화 알고리즘으로 Google의 PageRank 알고리즘을 활용한 알고리즘입니다. 스터디 프로젝트에서는 TextRank 알고리즘을 구현한 node-summarizer을 사용하여 간단하게 키워드를 추출합니다.

lodash - Github: lodash

lodash는 javascript 유틸리티 라이브러리로 숫자, 문자, 객체 등의 배열 처리 작업을 편리하게 해주는 도구입니다. 스터디 프로젝트에서는 javascript 기본 함수와 lodash를 적절히 사용하였지만 lodash를 더 활용하여 체이닝을 통해 간결하게 로직을 정리할 수도 있습니다.

공유하기