크롤링을 본격적으로 시작하려고 하다 보니 기존 방식으로 긁기만 하면 나중에 골치가 아프겠다는 생각이 들었다. 왜냐하면 멜론 1위 ~ 100위 주간 차트를 몇백개씩을 긁어올 텐데, 같은 가수, 같은 앨범, 같은 곡에 대한 순위가 주마다 다를 것이고 순위 데이터의 양도 굉장히 많을 것이기 때문에 이를 그저 하나하나 긁어와서 그대로 저장하면 데이터를 사용할 때 어디서부터 손을 대야할지 감이 안 올 것 같았다. 저장 형식도 DB 없이는 약간 답이 없고..

따라서, 작년 한이음 멘토링에서 배운 React.js - Nodejs 기반의 풀스택 구축 방법 중, 먼저 백엔드 기초만 구축하여 크롤링한 데이터를 사용하기 쉽게 변환하여 AWS RDS에 저장할 계획이다. 작년에 풀스택을 경험하면서 노드를 배워둔 것은 매우 잘한 짓 중에 하나였다고 생각한다.

아래의 내용은 작년 한 해 동안 한이음 멘토링을 통해 만난 멘토님의 웹페이지를 통해 학습한 내용을 까먹었으니 이번 기회에 다시 학습하면서 나의 이해를 돕기 위해 서술해 둔 것이다. 멘토님이 하신 방법을 그대로 따라하며 내 개발에 필요한 부분을 덧붙일 예정이니, 많은 부분이 멘토님 홈페이지에 올라와 있는 내용과 매우 유사하다. 멘토님 홈페이지에는 React.js, Node.js 이외에도 Anguler.js, Vue.js, Spring.js, devops등 실제 개발에 도움이 되는 내용이 많이 있으니 참고할 사람이 있다면 방문해 보시길 :)

그럼 이제 시작하도록 하자.

Backend 기초 구축하기

express 설정 및 typescript 설정

작년 한 해 동안 백엔드 개발을 하면서 유용하게 잘 썼던 IntelliJ 툴을 다시 사용하도록 한다. 나는 원래 VSCode에 모든 확장을 때려박아 모든 코딩을 거기서 하는 편이지만, 나중에 DB 제어할것을 생각하면 IntelliJ만 한 게 없는 것 같다. (물론 VSCode에도 DB 제어 확장이 있을 것 같긴 하지만 내가 모르기에.. 아시는 분은 알려주시면 감사하겠습니다..) 이 툴도 몰랐는데 작년 프로젝트 시작할 때 멘토님이 추천해 주셨다.

어제 멜론 크롤링을 했던 파이썬 폴더가 있는 작업 폴더를 툴에서 열고, 아래의 명령어를 통해 여기를 npm 저장소로 만든다.

    npm init -y

위의 명령어를 실행하면 작업하던 디렉터리에 package.json 파일이 생성된다. node로 REST 서버를 구축하기 위해 express 라이브러리를 설치한다.

    npm install --save express

npm install 명령어에 --save 옵션을 사용하면 패키지 설치와 함께 package.json의 dependencies에 설치된 패키지 이름과 버전이 기록된다. 위와 같이 express를 설치하게 되면 package.json에 기록이 되고 node_modules 폴더에 해당 모듈의 폴더로 설치된다.

src/index.js에 다음과 같은 파일을 만든다.

let express = require('express');
let app = express();

app.get('/api/hello', function(req, res) {
    res.send('hello world');
})

app.listen(8000, () => {
    console.log('server is listening 8000');
})

터미널에서 node src/index.js 명령어를 이용해 코드를 실행시키면 다음과 같이 콘솔창에 로그가 뜨고, http://localhost:8000/api/hello 로 접속하면 브라우저에 hello world가 찍힌다.

코드 실행을 중지하기 위해서는 터미널에 ctrl+c 키를 이용하여 ^C를 입력하면 된다.

typescript 설정

CommonJS는 웹 브라우저 밖의 자바스크립트를 위한 모듈 생태계의 규칙을 설립하기 위한 프로젝트이다.

흔히 아는 ES6는 ECMA스크립트(ES)의 6번째 에디션으로, Ecma 인터네셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. ES는 자바스크립트를 표준화하기위해 만들어졌고 지금도 자바스크립트가 제일 잘 알려져 있지만, 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다.

우리가 느낄 수 있는 가장 큰 차이라고 하면, 자바스크립트에서 모듈을 불러오고 내보낼 때 CommonJS에서는 require, export를 사용하고 ES6에서는 import와 export를 사용한다. 나는 ES6 문법을 따라가도록 할 것이다.

ES6의 import, export를 사용하기 위한 방법은 두 가지 방법이 있다.
1. commonJS 스크립트를 es6로 변환해주는 babel을 사용하는 방법
2. typescript 모듈을 사용하는 방법

나는 요즘 핫한 typescript를 사용할 것이므로, express 모듈의 타입스크립트 모듈을 설치해야한다.

npm install -D @types/express

src/index.js에 적힌 내용을 es6 문법으로 모두 수정해야 한다. import, arrow function등을 사용하여 모두 수정하도록 한다.

import express from 'express';

const app = express();

app.get('/api/hello', (req, res) => {
    res.send('hello world');
})

app.listen(8000, () => {
    console.log('server is listening 8000');
})

다음으로, 타입 스크립트 설정을 추가한다.

먼저 .js 확장자 대신 .ts 확장자를 이용해야 하므로, src/index.js를 src/index.ts로 확장자를 변경한다. IntelliJ 에서 파일 이름 변경은 우클릭에서 Refactor 카테고리 안에 숨어있다.

다음으로는 typescript 컴파일러를 설치한다. 컴파일러를 설치해야만 확장자가 .ts.인 파일을 통해 .js es6 파일을 생성해 주는 tsc 명령어를 사용할 수 있다.

npm install -D typescript

처음 이 디렉토리를 npm 저장소로 만들었던 것과 같이 typescript를 적용하기 위해 다음의 명령어를 이용하여 tsconfig.json 파일을 생성한다.

tsc --init

tsconfig.json에 다음과 같은 몇 가지 설정을 한다.

{
    "compilerOptions" : {
        "target" : "es6", // ECMAScript에서 어떤 버전을 쓸 것인지를 정의. 
        "module" : "commonjs", 
        "outDir" : "dist", // .ts가 변환되어 생성된 .js들은 "dist" 디렉토리에 저장됨
        "moduleResolution" : "node", // node.js의 모듈 해석 방식을 사용함
        "sourceMap" : true // 소스맵(*.map) 파일 생성 여부
    },
    "lib" : ["es2015"]
}

설정 후, 실행을 해야 한다. 이제 파일 확장자가 .ts 이므로 typescript로 컴파일하여 .js 파일을 생성한 다음에 실행해야 하므로 실행 명령어는 다음과 같다.

tsc && node dist/index

실행을 해 보면 아까 index.js를 실행했을 때와 같은 결과를 가져옴을 알 수 있다.