Javascript

📌강의목표와 커리큘럼

"버튼을 클릭해서 검색한다."

잘 모르는 정보를 얻기 위해 검색
1. 알고 있는 키워드를 넣어(user input)
2. 검색 기능(feature)을 활용하여
3. 원하는 정보(data)를 얻는다.

데이터, 화면표현, 유저에 대해서 알아야 한다.

데이터 처리(데이터 -> 화면표현)

• 데이터를 담는 변수
• 데이터의 형태
• 가공을 위한 함수를 생성
  • flow control, 빌트인 객체
• 실행을 위한
  • 엔진
  • 언어가 갖고 있는 매커니즘
  • Error 처리

화면 렌더링과 인터렉션( 화면표현 <-> 유저)

• 브라우저에서
• 파일이load되고
• 실행
• 데이터를 조회하고: 비동기
• 보여주는과정: Rendering
• 인터렉션이 되도록 셋팅: Event

어플리케이션과 서비스

 "버튼을 클릭해서 검색한다"   -->
 "로그인을 할 수 있다"      -->   어플리케이션
 "메뉴를 이동할 수 있다".    --> 
 
 

 새로 만들고, 유지보수한다.   -->
 코드를 잘 관리하는 방법      -->   서비스
 서비스 개발을 위하여 계획하기   -->

정리

• 유저의 Pain Point를 해결하기 위해
  • 서비스를 만든다.
• 서비스를 만들기 위해
  • 웹 개발을 배운다.
• 웹을 개발하기 위해
  • Javascript를 배운다.
• 데이터 처리
  • 변수, 형태, 함수, 실행
• Interaction
  • 이벤트 심기
  • 브라우저 이해하기

📌브라우저와 개발자도구

Browser

• Chrome
• Safari
• Opera
• Edge

  회사마다 지원하는 스펙이 다름
  회사마다 사용하는 엔진이 다름

브라우저에서 확인하기 위해서는

• 기본
  • HTML 파일을 불러온다.
• 다른리소스
  • html 파일 내에 다른 파일을 불러올 수 있도록 작성.
  • Javascript, css ...

개발자 도구

• Elements, Console, Sources, Network, Performance, Memory, Application, Security ...

📌브라우저와 디버깅

• 개발을 하다보면, 수많은 이슈를 만나게 된다.

이슈: 개발 중에 발생 예기치 않은 상황(버그, 에러)

• 이슈가 발생하면 개발자는 분석을하고 해결을 해야 한다.

디버깅: 분석 하는 과정

• 개발 단계 중에 시스템의 논리적인 오류나 비정상적 연산을 찾아내고 그 원인을 밝히고 수정하는 작업 과정
• 디버깅 방법
  • 코드 내에 log함수 심기
    • console.log
    • console.dir
    • ...
  • 개발자 도구 -> source 탭 활용

📌JavaScript언어의 특징 - 인터프리터 언어

컴퓨터는 내가 작성한 코드를 어떻게 이해할까?

목표: 기계가 이해해야한다.

방법: 개발 언어마다, 처리되는 방식이 다르다.

Fundamental

• 사람이 이해한 언어로 작성되면 기계어로 번역되어야합니다.

컴파일러 언어

• 사람이 코드를 작성한다.
• 기계어로 변환한다.
• 기계에서 실행한다.

인터프리터 언어(자바스크립트)

• 사람이 코드를 작성한다
• 기계에서 실행한다.(변환하지 않고 바로 실행)
• 변환하며 진행한다.

• 컴파일 단계가 없음
• 컴파일러 언어에 비해, 실행 속도가 느림
  • 모던 브라우저 내의 v8엔진에서는 속도 개선이 됨

📌JavaScript언어의 특징

• 변수의 타입: 동적 타입 언어
• 함수의 특징: 일급 객체
• 상속의 형태 : 프로토타입 기반의 상속
• 패러다임 지원: 함수형 프로그래밍, 명령형 프로그래밍, 객체지향 프로그래밍 ...

동적 타입 언어

• 변수에 들어가는 값에 따라서, 런타임에 타입이 추론된다.

일급 객체

• 함수는 일급객체의 특징을 가진다.
• 함수는 객체와 동일하게 사용할 수 있다.
• 함수는 값과 동일하게 취급한다.
  • 변수 할당문
  • 객체 프로퍼티 값
  • 배열의 요소
  • 함수 호출의 인수
  • 함수 반환문

프로토타입 기반의 상속

• 언어가 갖고 있는 프로토타입 체이닝 구조를 통하여 상속 가능

프로그래밍 패러다임 지원

• 여러 프로그래밍 패러다임 지원
  • 명령형 프로그래밍, 함수형 프로그래밍, 객체지향 프로그래밍

📌JavaScript 표준화 - JavaScript의 탄생 배경과 ECMAScript

Fundamental

• 기술은 시간이 지남에 따라, 항상 더 나은 방향으로 고도화
• 소프트웨어, 개발 언어도 마찬가지
• 특정 시점을 기준으로 개선: 버전으로 관리

자바스크립트의 발전

• 자바스크립트도 탄생 이후로 성장 시점마다 버전이 존재
• 자바스크립트를 사용하는 개발자는 버전을 확인하며 개발
  • ECMAScript 2015
  • ECMAScript 2016
  • ECMAScript 2022

자바스크립트는 왜 탄생했고, 왜 표준화 작업을 했을까?

• 넷스케이프 개발자(brendan eich)
• 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 만듦
• 이름변천사: 모카 -> 라이브스크립트 -> 자바스크립트
• 1995년 발표
• 자사 소프트웨어 사용의 점유율을 높이기 위해 브라우저마다 동작하는 기능을 경쟁적으로 추가, 즉 같은 자바스크립트 파일인데, Ie에서는 동작, netscape에서는 동작 안하는 현상 발생
• 크로스 브라우정 이슈

  모든 브라우저에서 자바스크립트는 동일하게 동작해야한다!

  • 1996년 표준화 개발 진행(넷스케이프 -> (ecma 요청)
  • 1997년 ecma 총회때 채택
    • 표준화 목록 중 하나: ecma-262
    • ecmascript로 명명(ecmascript 1, es 1)
  • ecma의 여러 committee 중 tc39 committee가 관리함

해당 표준화 정책을 고려한 개발이 필요

• 언어 버전을 고려하며 개발해야함
• 이를 도와주는 솔루션
  • (트랜스 파일러)Babel
  • (lint) eslint
  • (Bundler) Webpack

📌JavaScript 표준화 - ECMAScript 2015+로 개발하기

ECMAScript2015

• 6판을 위한 작업은 2009년부터 진행(15년)
• 목표: 아래의 대상으로 사용하는데에 용이하도록 토대를 제공
  • 대규모 어플리케이션
  • 라이브러리 생성
  • 다른 언어의 컴파일
• 개선사항
  • 모듈, 클래스 선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍, promise, 구조분해 패턴, 등의 개선이 존재

ECMAScript와 브라우저

• 브라우저는 브라우저의 버전마다, 지원하는 자바스크립트 스펙이 상이
  • ecmascript의 기준을 따라가지는 않는다.
• 개별 기능의 지원: caniuse 확인 가능

개발에는 사용하고 싶은데, 브라우저 지원이 안될경우?

• polyfill과 babel 사용

polyfill

• 지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드
• 폴리필은 브라우저가 다른방식으로 동일한 기능을 구현하는 문제를 해결하는데 사용

Babel

• 이전 버전의 브라우저에서 es6 이전 버전의 javascript로 변환하는데 사용되는 도구
• 문법을 번역 및 변환
• 폴리필 기능