콘솔에 출력하기

• console.log("hello world!");
• node.js 있으면 → node main.js

API란?

• Application Programming Interface
• 브라우저가 이해할 수 있는 함수들
• node에도 api 가 있어 사용 가능
  • http://blog.wishket.com/api란-쉽게-설명-그린클라이언트/

Dev Tools

• 개발자 툴을 사용하면 현업이나 프로젝트 만들 때 유용하게 사용할 수 있음

공식 사이트

• https://developer.mozilla.org/ko/
• w3schools.com은 공식사이트 아니다

async vs defer

• 기본 방식

  한줄씩 코드를 읽고 DOM으로 변환시켜줌

  → DOM이란? https://m.blog.naver.com/magnking/220972680805

  • HEAD에 바로 스크립트 파일 넣기

    

    • 과정 : HTML 파싱하기 → 파싱 중단후, script 만나면 main.js 페칭하고 실행하기 → 다시 HTML 파싱하기
      • 파싱 뜻 : 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것
    • 단점 : JS파일이 엄청 크고 서버 속도가 느리면 유저가 보기 힘들어짐

  • BODY 끝에 바로 스크립트 파일 넣기

    

    • 과정 : HTML 파싱하기 → 페이지가 준비된후, script 만나면 main.js 페칭하고 실행하기
    • 장점 : JS 파일 받기 전에 이미 페이지가 준비되어 있어 유저들이 미리 HTML 파일 볼 수 있음
    • 단점 : JS에 의존적인 파일이라면 페치되고 실행하기까지 오래걸림

• head + async

  

  • 과정 : HTML 파싱하기 → script 만나면 main.js 페칭하기 → HTML의 head부분 파싱 마치면 JS 실행하기 → 나머지 html 파싱하기
  • 장점 : body 끝에 사용하는 것보다는 페칭이 병렬적으로 이루어지기 때문에 다운로드 시간을 절약할 수 있음
  • 단점 : JS가 html이 파싱하기 전에 실행되기때문에 쿼리 조작하려는데 html이 안뜬 경우가 생김 / html이 js실행하기 위해서 파싱을 멈추는 구간이 있기 때문에 좀 느리다는 단점이 있음

  

  • 과정 : a.js 다운(==페칭) → b.js 다운 → c.js 다운 (하지만 다운이 끝나는 순으로 실행됨
  • 단점 : 실행 순서가 중요한 js파일들일 때는 문제가 생김

• head + defer (가장 좋은 방법)

  

  • 과정 : HTML 파싱하기 → script 만나면 main.js 페칭하겠다고 예약하기(html 파싱 멈추지 않음) → HTML 끝까지 파싱 마치면 JS 실행하기
  • 장점 : body 끝에 사용하는 것보다는 페칭이 병렬적으로 이루어지기 때문에 다운로드 시간을 절약할 수 있음
  • 단점 : JS가 html이 파싱하기 전에 실행되기때문에 쿼리 조작하려는데 html이 안뜬 경우가 생김 / html이 js실행하기 위해서 파싱을 멈추는 구간이 있기 때문에 좀 느리다는 단점이 있음

  

  • 과정 : html 파싱하면서 js파일들 몽땅 다운(==페칭) → html 파싱 끝나면 a.js → b.js→ c.js 순으로 실행
  • 장점 : 순서 중요한 js파일들에게 문제가 안됨