TILJavascript

javascript-study-02

TIL, Web, coding, javascript

JavaScriptBanner

JavaScript Study 02

  • 자바스크립트 특징
  • 자바스크립트 엔진
  • 자바스크립트 실행환경
  • 웹 브라우저는 어떻게 동작하는가?
  • 웹 브라우저 동작 과정
  • 브라우저의 핵심 역할
  • 서버의 핵심 역할
  • ESLint

자바스크립트 특징

  • 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
  • 프로토타입 기반의 객체 지향 언어 ( 다른 언어에서 함수는 구문이지만 JS는 값)
  • 값은 주고 받을 수가 있다. (함수형 프로그래밍)
  • JS 는 절차지향(명령형), 객체지향, 함수형이 모두 가능한 멀티 패러다임 프로그래밍 언어

자바스크립트 엔진

자바스크립트를 실행할 수 있는 환경으로 브라우저에 내장되어있다.

내부적으로 사용율이 높은 것은 컴파일을 하는 특징을 지니고 있으며 인터프리터와 컴파일러를 결합해서 작동한다.

현재 IE를 제외한 대부분의 브라우저는 ES6 까지 지원이 되고있다.

(자바스크립트는 인터프리터언어라고는 하지만 그 기준이 위와 같은 잣대로 인해 모호해지고 있다.)


자바스크립트 실행환경

<head> 안에는 기본적으로 <meta ~ >가 들어간다

시멘틱 문법상 <head>는 눈에 보이지 않는 데이터들을 모아놓은 집합이다.

따라서 script파일은 <haed>안에 들어가야 맞다.

하지만 인터프리터는 위에서 한줄 할줄 읽는다.

만약 script 가 head에 들어갈 경우 script에 정의된 변수나 객체들이 html에 랜더링 되어야 값들을 참조 못할 수 있다.

따라서 body 태그 최하단에 넣어주는 것이 바람직하며 시맨틱적인 표준을 지키고 싶다면 async defer 와 같은 옵션을 이용한다.


웹 브라우저는 어떻게 동작하는가?

  • 클라이언트 : 서비스를 받는 입장 ( 요청하는 입장 )
  • 서버 : 서비스를 하는 입장 ( 응답하는 입장)

도메인 : ip를 식별하는 이름.

암묵적인 룰 : 웹서버는 root로 요청이 오면 index.html를 주도록 되어있다. ex) www.naver.com


웹 브라우저 동작 과정

웹브라우저 동작 원리 - poiemaweb

  1. 클라이언트는 네이버에 접속을 시도한다.
  2. 네이버에 접속하기 위해서 인터넷 브라우저 주소창에 www.naver.com 을 입력한다.
  3. www.naver.com에 대한 IP 주소를 알기 위해서 DNS서버에 먼저 접속한 후DNS서버에게 www.naver.com에 해당되는 IP주소를 요청한다.
  4. DNS서버는 www.naver.com에 해당되는 IP주소를 응답한다.
  5. IP주소를 알게 된 브라우저는 다시 해당 IP주소를 통해서 네이버 서버에 접근하게 된다.
  6. 클라이언트는 서버에게 해당 페이지에 대한 접속과 .html 파일을 요청한다.
  7. 서버는 네이버 메인 페이지에 대한 화면 요소 정보가 담긴 index.html파일을 응답한다.
  8. 브라우저의 렌더링 엔진의 html파서는 index.html파일을 로드하고 파싱을 시작한다.
  9. 파싱중 <link> 를 만나게 된다. <link>에는 .css파일이 적혀있었다.
  10. html파서는 파싱을 중지한후 클라이언트는 다시 서버에게 .css파일을 요청한다.
  11. 서버는 .css파일을 응답한다.
  12. 클라이언트의 렌더링 엔진의 html파서는 제어권을 css파서에게 넘겨준다.
  13. css파서는 .css파일을 로드하고 파싱을 시작한다.
  14. 파싱이 완료되고 CSSOM트리가 완성된다.
  15. css파서는 제어권을 다시 html파서에게 넘겨준다.
  16. 중지되었던 html 파싱을 재 시작한다.

JS엔진 동작 원리 - poiemaweb

  1. 파싱하던중 <script> 를 만나게 된다. <script>에는 .js파일이 적혀있었다.
  2. html파서는 파싱을 중지한 후 클라이언트는 다시 서버에게 .js 파일을 요청한다.
  3. 서버는 .js파일을 응답한다.
  4. html파서는 .js파일을 읽을 수 없기 때문에 제어권을 브라우저에 탑재된 자바스크립트 엔진에게 넘겨준다.
  5. 제어권을 넘겨받은 자바스크립트 엔진은 DOM api를 이용하여 .js파일을 로드한다.
  6. 로드된 .js파일을 토크나이즈 하여 소스코드를 어휘분석하여 의미를 갖는 최소단위인 토큰으로 분리한다.
  7. 분리된 토큰을 구문분석하여 문법의 의미와 구조를 반영한 트리인 AST를 생성한다.
  8. AST는 자바스크립트 엔진의 인터프리터가 읽을 수 없기 때문에 인터프리터가 실행할 수 있는 중간코드인 바이트코드로 변환되고 실행된다.
  9. 실행된 후 제어권을 다시 렌더링엔진의 html파서에게 전달한다.
  10. 제어권을 돌려받은 html파서는 중지되었던 파싱을 재 실행한다.
  11. 파싱이 완료되어 DOM트리가 형성된다.
  12. 전에 만들어진 CSSOM트리와 DOM트리를 합쳐 RENDER트리로 만든다.
  13. RENDER트리를 기반으로 클라이언트의 화면에 표출한다.

브라우저의 핵심적인 역할 :

  • 서버에 HTML, CSS , Javascript를 요청 (request)
  • 서버로부터 받아온 HTML , CSS , Javascript를 파싱하는 역할.

서버의 역할

  • 무한 대기 ( 리퀘스트를 받기 위해서 )
  • 요청에 대한 응답 (response)

응답받은 파일(html, css)은 메모리상에 올린다. 이를 Read 라 한다.

그 후 Rendering Engine이 실행할 수 있는 형식으로 만들어 준다. 이를 Parsing 이라 한다.

Parsing이 완료되면 Tree가 만들어지는데 이를 DOM tree ( CSS라면 CSSOM tree)가 만들어진다.

tree : 자료구조의 하나로 거슬로 올라가고 / 따라서 내려가기 편한 형태의 자료구조.


Dom이 완성되기 전에 자바스크립트가 실행이 된다.

자바스크립트 엔진은 AST라는 트리를 만든다.

실행이 종료되면 돔을 만드는 작업을 마저한다.


중요단어

파싱, 돔트리, 렌더트리, CSSOM트리

검사창을 통해 테스트 하는 방법

  1. console.log

  2. 디버깅이란? 논리적인 오류를 검출하여 제거하는 과정.

    디버깅하는법 : 검사창을 통해 에러 확인 . Sources 탭에서 에러부분에 밑줄이 쳐있다.

    break 거는법은 의심가는 줄을 선택한다. 선탹된 소스부분은 디버깅시 넘어가지 않고 멈춘다.

ESLint

코드 Linting 이란? 특정 스타일 규칙을 준수하지 않는 문제가 있는 소스코드를 찾는데 사용되는 방식

Linter는 이러한 Linting을 수행하는 도구를 의미.

ESLint는 특정 스타일 규칙을 제한하거나 새롭게 개정까지 가능하다.

대부분의 프로그래밍 언어에는 컴파일하는 과정이 있어서 컴파일시 수행되는 Linter가 내장되어있다.

하지만, Javascript는 컴파일하는 언어가 아니기 때문에 이러한 오류를 잡기 위해 ESLint 와 같은 프로그램을 적극적으로 이용하여 실행하지 않고 기본적인 코드 오류, 구문 오류, 잘못된 규칙등을 발견할 수 있다.


ESLint 사용 2가지 방식

  1. JavaScript 개발시 사용되는 에디터에 플러그인을 추가하는 방식
  2. Webpack에 번들링 하여 사용하는 방식.

ESLint 설치 및 설정

  1. 폴더 생성 후 npm 초기화 및 npm으로 eslint 관련파일 설치

    • eslint
    • eslint-config-airbnb-base : arirbnb 에서 제정된 코드 스타일 규칙은 좋기로 유명하다.
    • eslint-plugin-import
    • eslint-plugin-html

  • 아래 명령 실행

    $ cd <project-folder>
    $ npm init -y

    $ npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html --save-dev

- 주의 : ESLint는 가급적이면 해당 폴더에서만 사용할 수 있도록 설치 하는것이 좋다. 전역설치는 매번 추가 설정이 필요로 한다.

설치 완료 후 폴더 상태

  1. node_modules 폴더
  2. package-lock.json (없을 수도 있다.)
  3. package.json

  1. VSCode에 extention 설치

install-extention


  1. 사용중인 폴더에 .eslintrc.js 파일 생성 후 아래 코드 넣기

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    module.exports = {
      "parserOptions": {
        "ecmaVersion": 9
      },
      "env": {
        "browser": true,
        "commonjs": true,
        "node": true,
        "jquery": true
      },
      "extends": "airbnb-base",
      "plugins": [ "import", "html" ],
      "rules": {
        // "off" or 0 - turn the rule off
        // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
        // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
        "no-console": "warn",
        "quotes": [ "error", "single" ],
        "no-underscore-dangle": "warn",
        "no-plusplus": [ "error", { "allowForLoopAfterthoughts": true }],
        "comma-dangle": [ "error", "never"]
      }
    };

  2. ESLint 사용처 명시하기

eslint설정

(맥OS 기준) - 설정 탭 접근 - 오른쪽 상단 아이콘 클릭 - 아래 코드 추가

1
2
3
4
5
"eslint.validate" : [
    "javascript",
    "javascriptreact",
    "html"
]

ESLint 사용하기

eslint적용후_화면

ESLint 가 정상적으로 적용이 완료되었다면 위와 같이 전혀 문제 없어보이는 코드에도 에러, 경고등을 표시한다.

마우스를 살포시 올려보면 무엇이 에러인지 적혀있다.

위 예제에서는 “ var를 쓰지말고 let 이나 const를 써라 “라고 경고하고 있다.


ESLint 규칙 설정하기 (.eslintrc.js)

eslintrc설정

위와 같이 마우스를 올릴 경우 나오는 에러 혹은 경고등을 .eslintrc.js 파일에서 설정이 가능하다.

  • off : 0
  • warn : 1
  • error : 2
Share