TIL_170925 Javascript란

Eslint

  • 문법 검사 확장 프로그램
  • 프로젝트를 할떄마다 해당 폴더에 설치
  • 익숙해지면 set up 기준 git clone으로 응용
  • eslint.org
  • http://poiemaweb.com/eslint
  • 해당 설치하고 vscode하단에 html파일을 로드했을 때, 하단에 ESLint 흰글씨가 나와야함
  • 자바스크립트 파일뿐만이 아니라, html에서 불러온 js파일도 문법검사를 해줌
  • 위 링크의 방법으로 설치했을때 ESLint!노란색으로 표기되면 오류

  • 그럴경우 밑의 방법으로 진행 (글로벌이 아닌 로컬로)

    1
    2
    3
    $npm init --y
    $npm install -save-dev eslint
    $./node_modules/.bin/eslint --init

  • 이후 퀘스쳔은 상단 링크와 동일하게 진행

프로그래밍이란?

상식(지식, 언어 등)을 바탕으로 한 커뮤니케이션과 같다. 약속된 문법(syntax)을 맥락(semantic)에 맞게 표현해야 좋은 프로그래밍.

컴퓨팅 사고(Computational thinking)

문제 해결을 목적으로 프로그래밍을 할 때 컴퓨터가 이해할 수 있는 구문을 어떻게 만들지에 관한 인간의 사고. 문제를 정확히 정의하고, 여러 단계로 나눈 뒤 알맞게 배열하는 방식이 요구된다.

자바스크립트의 등장

자바스크립트 역사

    1. Brendan Eich
  • 웹브라우저 안에서, 웹페이지에 효과를 주거나 기능을 향상시키는 목적
  • 1996년부터 표준화 작업 -> ECMAScript

자바스크립트 특징

  • 인터프리터 언어
  • 컴파일 언어와 달리 중간 파일을 생성하지 않고 곧바로 코드를 파싱(해석)하고 실행
  • 단점: 실행해봐야 오류를 찾을 수 있음
  • 규칙이 자유로움.
  • 다른 언어와 달리 정해진 타입이 없어 절차형,명령형,객체지향 등 다양한 코딩 방법론 가능
  • 다른 언어에 비해 자유로운 설계, 그만큼 사용 방식에 혼란이 가중 될 수 있음

자바스크립트가 활용되는 환경 1 : 브라우저를 이해하자

- 자바스크립트가 동작하는 환경 중 하나인 브라우저의 작동방식을 이해할 필요가 있음
- 최근에는 경량화된 v8엔진을 기반으로 한 NODE.JS에서도 자바스크립트가 동작함
- 우선 웹은 HTTP프로토콜에 따라 작동 (프로토콜의 종류는 1.1버전 2.0버전)
- 기본 동작 원리
1. Client측에서 원하는 IP/도메인을 요청(Request)
2. Server에서 요청(Request)을 확인한 후, 클라이언트가 요청한 파일이 있는지 확인
3. 파일(HTML,CSS,JS 등)이 있으면 해당 파일과 함께 응답(Response)메시지를 보냄 (파일이 없으면 404 not found 오류메세지)  
4. Server에서 받은 파일을 렌더링 한 후, 그 결과물을 브라우저 화면에 표시

브라우저가 렌더링 하는 방식

- 브라우저가 HTML파일을 렌더링 할 떄 CSS/JS 구문을 만나면 HTML렌더링을 멈추고 해당 구문을 모두 해석
- 이때 CSS는 렌더링의 결과물로 CSSOM이라는 트리를 남김
- 이 트리는 나중에 HTML렌더링의 결과물인 돔 트리와 합쳐짐 -> 렌더링 트리
- 렌더링 트리는 노드들의 레이아웃(높이,너비 등)을 조정하는 데 사용
- [렌더링 트리 생성, 레이아웃 및 페인트]
:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko

[참고] script 태그 위치

- script 태그 안에 위치한 자바스크립트 코드는 위치에 따라 HTML DOM 생성에 악영향을 미칠 수 있음 (렌더링과 실행이 동시에 이뤄지기 때문에)
- --> 자바스크립트 관련 코드는 body태그가 마무리된 그 다음 지점에 입력하는 것을 추천
- 만약 자바스크립트 렌더링을 HTML 렌더링과 동시에 이뤄지게 하고 싶다면 HTML5 표준에 정의되어 있는 defer 속성을 입력

1.<head>에 삽입되는 경우
- defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시
- IE8이하는 지원하지 않으므로 두번째 경우를 사용하도록 권장

1
2
3
4
5
<head>
...생략...
<title>메인 페이지</title>
<script defer src="main.js"></script>
</head>


2.</body>앞에 삽입되는 경우
- 문서의 DOM 로드가 완료된 시점에 javascript 로드가 실행되게 함

1
2
3
4
<body>
...생략...
<script src="main.js"></script>
</body>

구문(statement)

  • 실행시키는 각각의 명령
  • 값, 연산자, 표현식, 키워드, 주석으로 구성되는 명령 집합.
  • 구문은 코드블록(){구문;}으로 그룹화: 함께 실행되어야함을 정의

표현식

  • 값, 변수, 연산자의 조합
  • 연산을 통해 하나의 값으로 평가될 수 있는 문장

변수

  • 값을 할당, 참조하기 위해 사용
  • 변수명: 메모리에 할당된 공간을 가리키는 식별자

연산자

  • 하나 혹은 그 이상의 값을 하나의 값으로 만들때 사용

키워드

  • 수행할 동작을 규정한 것 (var, function…)

주석

  • 작성된 코드의 의미를 설명하기 위해 사용

오늘의 느낀점

  • 드디어 기다리던 자바스크립트 수업 시작!!! :) 기대만발
  • 설명할 수 있을 때까진 알고있는게 아니다.
  • 자바스크립트 기본 용어에 친숙해 질 수 있도록 노력하자