크롤링을 본격적으로 시작하려고 하다 보니 기존 방식으로 긁기만 하면 나중에 골치가 아프겠다는 생각이 들었다. 왜냐하면 멜론 1위 ~ 100위 주간 차트를 몇백개씩을 긁어올 텐데, 같은 가수, 같은 앨범, 같은 곡에 대한 순위가 주마다 다를 것이고 순위 데이터의 양도 굉장히 많을 것이기 때문에 이를 그저 하나하나 긁어와서 그대로 저장하면 데이터를 사용할 때 어디서부터 손을 대야할지 감이 안 올 것 같았다. 저장 형식도 DB 없이는 약간 답이 없고..
따라서, 작년 한이음 멘토링에서 배운 React.js
- Nodejs
기반의 풀스택 구축 방법 중, 먼저 백엔드 기초만 구축하여 크롤링한 데이터를 사용하기 쉽게 변환하여 AWS RDS에 저장할 계획이다. 작년에 풀스택을 경험하면서 노드를 배워둔 것은 매우 잘한 짓 중에 하나였다고 생각한다.
아래의 내용은 작년 한 해 동안 한이음 멘토링을 통해 만난 멘토님의 웹페이지를 통해 학습한 내용을 까먹었으니 이번 기회에 다시 학습하면서 나의 이해를 돕기 위해 서술해 둔 것이다. 멘토님이 하신 방법을 그대로 따라하며 내 개발에 필요한 부분을 덧붙일 예정이니, 많은 부분이 멘토님 홈페이지에 올라와 있는 내용과 매우 유사하다. 멘토님 홈페이지에는 React.js
, Node.js
이외에도 Anguler.js
, Vue.js
, Spring.js
, devops
등 실제 개발에 도움이 되는 내용이 많이 있으니 참고할 사람이 있다면 방문해 보시길 :)
그럼 이제 시작하도록 하자.
작년 한 해 동안 백엔드 개발을 하면서 유용하게 잘 썼던 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
를 입력하면 된다.
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
를 실행했을 때와 같은 결과를 가져옴을 알 수 있다.