TIL 7월 27일 - git 기본 조작, async/await와 Puppeteer

git 기본 조작

• 명령어들
  • git commit
  • git branch
    • 예시

  $git branch bugFix

  • git checkout
    • HEAD의 위치를 옮길 때 사용
    • 예시

  $git checkout bugFix # HEAD가 bugFix로 이동
  $git chekcout bugFix^ # ^연산자는 는 상대참조를 위한 것인데 예시에서는 bugFix의 바로 전 부모 commit을 가리킨다.
  $

  • git reset : 작업 내용을 되돌리는 기능인데, 브랜치가 이전 커밋을 가리키도록 해버리는 방식.
  • git revert : 작업 내용을 되돌리는 기능, 되돌린 내용을 아예 새로운 commit으로 만들어버린다. 덕분에 push를 할 수 있다.
• HEAD
  • checkout한 커밋을 가리킨다.
  • 일반적으로 브랜치의 이름을 가리키고 브랜치가 커밋을 가리키는 식으로 커밋을 가리키고 있다. (즉, HEAD -> bugFix -> 가장 최근의 commit)
  • 브랜치에서 분리하여 commit을 가리키게할 수도 있다.
  • 예시

  $git checkout commithash # 커밋 해시값은 f3c7cee96f33938631a9b023ccf5d8743b00db0e와 같다.
  # 하지만 아래와 같이 해도 git은 알아듣는다고 한다. 
  $git checkout f3c7cee

• 참고
  • https://learngitbranching.js.org/

async/await와 Puppeteer

• async await는 Promise를 좀 더 간편하게 사용할 수 있게하는 syntax(문법)이다.

Async

• async keyword는 function 앞에 붙일 수 있다.
• async keyword를 붙이면, 그 function이 항상 promise를 반환하는 것이라고 가정한다. 실제로 promise가 아닌 값을 반환하더라도 자체적으로 resolved된 promise로 만들어버린다.
• 예시

async function f() {
  return 1;
}

f().then(alert); // 1

// 위 코드는 아래 코드와 같다.

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

await

• async function 안에서만 사용된다.
• await는 promise가 결과를 반환할때까지 기다리게 한다.
• 예시(출처 : javascript.info)

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait till the promise resolves (*)

  alert(result); // "done!"
}

f();

• 참고
  • https://javascript.info/async-await

Puppeteer

• Puppeteer와 같이 브라우저 컨트롤을 해주는 상황에서 async await는 유용하다.
• 예시

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });

  console.log('Dimensions:', dimensions);

  await browser.close();
})();

• 참고
  • https://github.com/GoogleChrome/puppeteer