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
  • 참고

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();

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();
})();