AS-IS

실무에서 개발 시 아래의 과정을 거쳐야한다.

1. 개발 환경 url에 접속 후 로그인
2. 로그인 한 계정의 auth token을 조회하는 페이지로 이동
3. token 복사 후 auth.ts 파일에 붙여넣기
4. dev server 실행하여 axios 동작 시 authorization에 bearer token으로 적용
5. 정상 데이터가 들어옴 → 개발 작업 진행

여기에서 1, 2, 3을 매번 수동으로 해야하는게 번거로워서 크롤러로 작업을 바꿔봤다.

TO-BE

1. predev 로 node 환경의 크롤러 동작
   1. 크롤러 행동: 로그인 → 토큰 정보 가져오기 → auth.ts에 저장
2. 크롤러 동작 완료 후 실제 dev script 실행

package.json

{
  "name": "front-end",
  "version": "2.0.0",
  "description": "front-end",
  "main": "index.js",
  "scripts": {
    "predev": "node ./configs/refreshAuthToken.js", // add
    "dev": "webpack-dev-server --config ./configs/webpack.config.dev.js",
  },
  // ..
}

.env : .gitignore에 포함된 파일. 공유하지 않으며, 로컬에만 가지고 있음

LOGIN_PAGE={로그인페이지URL}
TOKEN_PAGE={토큰조회페이지URL}
EMAIL={로그인계정}
PASSWORD={로그인비밀번호}
TOKEN_PATH=utils/auth.ts

refreshAuthToken.js

const puppeteer = require('puppeteer');
const dotenv = require('dotenv');
const fs = require('fs').promises;
const path = require('path');
const tsPath = path.resolve(__dirname, '../src/ts');

dotenv.config();

const crawler = async () => {
  console.log('\\x1b[33m%s\\x1b[0m', '>>>>>> start: 토큰 갱신 시작');
  try {
    const browser = await puppeteer
      .launch
	    // NOTE: 디버깅 시에만 주석 해제
      // {
      //   headless: true,
      //   args: ['--window-size=1920,1080', '--disable-notifications'],
      // }
      ();
    const page = await browser.newPage();

    // NOTE: 디버깅 시에만 주석 해제
    // await page.setViewport({
    //   width: 1080,
    //   height: 1080,
    // });

    page.on('dialog', async dialog => {
      console.log(dialog.type(), dialog.message());
      await dialog.dismiss();
    });

    await page.goto(process.env.LOGIN_PAGE);
    await page.type('#username', process.env.EMAIL); // email 입력
    await page.type('#password', process.env.PASSWORD); // password 입력
    await page.click('button[type=submit]'); // login submit!

    await page.waitForNavigation();
    console.log('\\x1b[33m%s\\x1b[0m', '>>>>>> login: 로그인 성공');

    await page.goto(process.env.TOKEN_PAGE);

    const bodyHandle = await page.$('body pre');
    const html = await page.evaluate(body => body.innerHTML, bodyHandle);
    const token = await JSON.parse(html).data.tokenValue;

    await fs
      .writeFile(path.resolve(tsPath, process.env.TOKEN_PATH), `export default '${token}';`)
      .then(() => {
        console.log('\\x1b[33m%s\\x1b[0m', '>>>>>> complete: 토큰 갱신 성공 :) ');
      })
      .catch(err => console.log('\\x1b[32m%s\\x1b[0m', '>>>>>> error: 토큰 갱신 실패 :('));

    // 브라우저 종료
    await page.close();
    await browser.close();
  } catch (e) {
    console.log('\\x1b[31m%s\\x1b[0m', '>>>>>> error: 토큰 갱신 실패 :( ');
  }
};

crawler();

실제 실행하면 아래와 같다.