Typescript와 Express로 재밌는 무언가를 만들어보자!(1)

Hugo Kim·2019년 7월 30일
14
post-thumbnail

서론

안녕하세요! Medium에서 글을 쓰다가 코드는 안예쁘고, github gist를 쓰기엔 귀찮아서 velog로 찾아온 사람입니다.

이상한 소리는 집어치우고, 서론이지만 본론으로 들어가봅시다. 저는 TS와 React를 좋아하는 프론트엔드 개발자입니다. 하지만 모든 개발자들이 그러하듯이 풀스택!!!의 꿈을 가지고 Node.js를 시작하게 되었습니다.

하지만 프론트엔드 개발만 해왔던 저로서는 이것저것 새로운 개념이 배우기가 너무 어려웠습니다. 그래서 제가 겪었던 의문들과 삽질들을 다른 분들께서는 하지 않고 꽃길만 걷길 바라는 마음에서 이번 포스트를 작성하게 되었습니다. 그래서 포스트는 백엔드, Typescript, Express가 낯선 사람들을 위해서 상세하게 작성할 예정입니다.

본론으로 돌아와서 이번 포스트에서는 Express와 ES6를 가지고 프로젝트를 하려고 했지만 프론트엔드 개발에서 경험했던 Typescript가 너무 좋아서 Express + Typescript라는 기술 스택을 이번 포스트에서 다루게 되었습니다.

What would we do?

그래서 어떤 프로젝트를 할 예정이냐? 바로 제가 예전부터 하고 싶었던 크롤러를 만들 것입니다. 대한민국의 1등 포털사이트 네이버의 실시간 검색어를 크롤링할 계획입니다. 크롤링에서 그치지 않고, mongoDB에 저장하고, 로깅을 통해서 우리의 서버가 어떻게 살아가고 있는지 알아봅시다. 그리고 유닛 테스트까지 경험해봅시다!

사용할 모듈

  1. express - Node.js 서버 어플리케이션을 쉽게 만들기위한 프레임워크
  2. cheerio - 웹 페이지에서 정보를 가져오기 위한 HTML, XML문서 파싱 라이브러리
    네이버에서 실시간 검색어 데이터를 가져오는 것을 도와준다.
  3. winston - 서버의 동작을 기록하기 위한 로깅 라이브러리
  4. typescript - 자바스크립트와 다른 아름다운 존재... 그저 빛...
  5. tslint - 타입스크립트를 위한 린터(문법, 스타일을 검사해주는 도구)
    Typescipt의 문법뿐만 아니라 코드 스타일(띄어쓰기, 탭 크기 등)까지 검사해주는 편리한 도구.
  6. dotenv - Node.js 어플리케이션에서 환경변수를 사용하기 위한 모듈
    .env 파일에서 환경변수를 가져와 process.env의 프로퍼티로 사용할 수 있게 만들어준다. 서버에서 민감한 정보(포트번호, DB주소 등)를 한 곳에서 관리할 수 있게 만들어준다.
  7. jest - 자바스크립트 테스팅 프레임워크
    테스트를 하기 위해 필요하다.
  8. @types/~ - Typescript를 사용할 때 기존 자바스크립트 라이브러리를 효과적으로 사용하기 위해서 필요한 타입 정의를 해둔 모듈

It's time to play!

먼저 프로젝트를 시작하기 이전에 프로젝트를 진행할 디렉토리에서 커맨드 창을 열어서 npm 패키지들을 사용할 준비를 해봅시다!

C://projects/my-first-ts-express-croller
> npm init -y // npm init을 했을 때 모든 옵션이 y로 체크되는 옵션

npm init을 했을 때 새로운 폴더가 생기는 게 아니라 기존의 폴더에 package.json파일이 생기기 때문에 정확히 프로젝트를 담을 폴더를 새로 생성해주시고 그 폴더 내에서 명령어를 입력해주셔야 합니다. 이제 npm 패키지들을 설치할 준비가 끝났으니 설치할 시간입니다! 위에서 우리가 쓰기로 한 패키지들을 하나씩 설치해봅시다.

C://projects/my-first-ts-express-croller
> npm install cheerio express mongoose winston dotenv

왜 이번에 위에서 사용하기로 언급한 모듈들을 모두 설치하지 않았을까요? 바로 모듈에는 dependency와 devDependency 이렇게 두 가지 종류가 있기 때문입니다. dependency로 설치된 모듈들은 실제 배포 단계에서 포함되지만 devDependency로 설치된 모듈들은 빠지게 됩니다. 따라서 배포하게 되었을 때 빌드된 파일의 크기에 큰 영향을 주게 됩니다.

그렇다면 devDependency로 설치하게 되는 모듈들은 어떤 모듈들일까요? 바로 테스트에 필요하거나, 로컬 개발 환경에서만 필요한 모듈들이죠. 가장 흔한 예시가 바로 테스트에 필요한 jest, mocha, jasmine 같은 모듈들부터 우리가 개발할 Typescript도 마찬가지죠. 개발하는 과정에서는 Typescript이지만 실제로 구동되는 것은 컴파일된 결과인 js 파일이니까요. 따라서 @types/~ 모듈들도 마찬가지겠죠? 그리고 마지막으로 코드의 형식을 검사해주는 린터까지! 이렇게 개발단계에서만 필요한 모듈들을 devDependency로 설치하게 됩니다. 말이 길었네요! 빨리 설치하러 가봅시다! :)

C://projects/my-first-ts-express-croller
> npm install -D typescript tslint tslint-config-airbnb jest
> npm install -D @types/cheerio @types/dotenv @types/express @types/jest @types/mongoose

devDependency 모듈 설치는 dependency 모듈 설치와 다르게 -D 옵션을 붙혀서 설치를 해야합니다. (위에서 @types/~ 모듈들과 다른 모듈들을 따로 쓴 이유는 없습니다. 그냥 같이 써서 설치하시면 됩니다.) 그러면 이제 package.json을 보면 아래와 같이 보여질 것 입니다.

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
    "dependencies": {
    "cheerio": "^1.0.0-rc.3",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.6.6",
    "winston": "^3.2.1",
  },
  "devDependencies": {
    "@types/cheerio": "^0.22.12",
    "@types/dotenv": "^6.1.1",
    "@types/express": "^4.17.0",
    "@types/jest": "^24.0.15",
    "@types/mongoose": "^5.5.9",
    "jest": "^24.8.0",
    "tslint": "^5.18.0",
    "typescript": "^3.5.3"
  }
}

이번 포스트에서는 이렇게 모듈 설치까지 하고, 다음 포스트에서는 타입스크립트 설정, tslint 설정까지 해보도록 하겠습니다.

profile
ts와 react를 사랑하는 프론트엔드 개발자입니다.

8개의 댓글

comment-user-thumbnail
2019년 7월 30일

오오.. 기다리고있겠습니다..

1개의 답글
comment-user-thumbnail
2019년 8월 7일

오.. 보고 따라해봐야겠어요! ㅋㅋ

1개의 답글
comment-user-thumbnail
2019년 8월 8일

잘 봤습니다!

1개의 답글
comment-user-thumbnail
2022년 8월 8일

잘봤습니다.

답글 달기