[9주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 38

자바 스크립트

 

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

잘 모르는 정보를 얻기 위해 검색

 

1. 알고 있는 키워드를 넣어 (user input)

2. 검색 기능(feature) 을 활용하여

3. 원하는 정보(data) 를 얻는다.

 

데이터 가공

• 데이터를 담는 변수
• 데이터의 형태
• 가공을 위한 함수를 생성
  • flow control
  • 빌트인 객체
• 실행을 위한
  • 엔진
  • 언어가 갖고 있는 매커니즘
  • Error 처리
  화면 렌더링과 인터렉션
• 브라우저에서
• 파일이 load되고
• 실행
• 데이터를 조회하고: 비동기
• 보여주는 과정: Rendering
• 인터렉션이 되도록 셋팅: Event

데이터 → 데이터 처리 → 화면 표현 → interaction → 유저

 

1. 실습 환경 Setting

2. 브라우저와 개발자도구

3. 브라우저와 디버깅

 

인터프리터 언어 - js특징

 

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

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

 

fundamental

 

컴파일러 언어

1. 사람이 코드를 작성한다.

2. 기계어로 변환한다.

 

인터프리터 언어

1.사람이 코드를 작성한다

2.기계에서 작성한다

컴파일 단계가 없음

컴파일러 언어에 비해, 실행 속도가 느림

모던 브라우저내의 v8엔진에서는 속도 개선이 됨

 

js 와 러스트 비교

 

js언어의 특징 - 그 외

 

변수의 타입

함수의 특징

상속의 형태

패러다임 지원

 

동적 타입 언어

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

 

일급 객체

함수는 일급객체의 특징을 가진다.

함수는 객체와 동일하게 사용할 수 있다.

함수는 값과 동일하게 사용된다.

 

프로토타입 기반의 상속

언어가 갖고 있는 

프로토타입 체이닝 구조를 통하여 상속 가능

 

여러 프로그래밍 패러다임 지원

명령형 프로그래밍

함수형 프로그래밍

객체지향 프로그래밍

 

js 표준화 -js 의 탄생 배경과 ecmascript 

 

fundamental

 

자바스크립트의 발전

js 도 탄생 이후로 성장 시점만다 버전이 존재

js 를 사용하는 개발자는 버전을 확인하며 개발

 

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

 

웹페이지의 보조적인 기능을 수행하기 위해 만듦

 

자사 소프트웨어 사용의 점유율을 높이기 위해 브라우저마다 동작하는 기능을 경쟁적으로 추가함

 

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

 

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

 

언어 버전을 고려하며 개발해야함

이를 도와주는 솔루션

babel

,등

 

ecmascript 2015+  로 개발하기

 

ECMAScript 표기법

 

ECMAScript{{연도}}

ES{{연도}} - ES2015

,등

 

ECMAScript 2015

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

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

• polyfill과 babel 사용

polyfill

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

Babel

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

변수

데이터를 처리하기 위해, 기억해야 한다.

• 데이터를 처리하는 과정에서, 처리 흐름마다 값들을 기억해둘 필요가 있습니다.
• 컴퓨터는 데이터를 기억하기 위해 메모리를 활용합니다.
  • 메모리란, 컴퓨터의 기억장치

메모리

• 메모리에 데이터를 담아 기억
• 각각의 위치 주소값이 존재
• 위치를 찾기 위해서는 메모리의 주소값 사용

메모리의 주소값의 별칭, 변수

• 메모리 주소값을 대신할 식별자를 지정하고, 식별자를 통해서 데이터 접근
• 식별자 == 변수

변수란,

데이터를 담아둔 메모리의 주소를
쉽게 식별하기 위한 붙인 이름입니다.

 

자바스크립트의 변수 syntax

• 키워드
  let / const / var
• 변수명
• 할당 연산자
• 값

 

3단계를 거쳐 생성되는 변수

 

1. 선언 단계 : 변수를 변수 객체에 등록한다.

2. 초기화 단계 : 변수를 메모리에 할당하고, undefined로 초기화한다.

3. 할당 단계 : undefined로 초기화된 변수에 실제로 값을 할당한다.

 

변수 생성 3단계는

키워드별로 다르게 동작한다. (var, const, let)

 

var 키워드

코드 평가 단계 : 선언과 동시에 초기화 진행

코드 실행 단계: 값 할당 진행

 

var 키워드 - 호이스팅? Hoisting

• 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성
• 함수 호이스팅, 변수 호이스팅, ...

var 키워드 - 단점

• 키워드의 생략 가능
• 중복 선언 가능
• 변수 호이스팅

var 키워드 - 단점 - 전역변수화

• 전역 변수화 되어, 무분별한 변수 접근
• 스코프
  • 코드가 실행되는 과정에서,
    변수와 같은 식별자를 찾아야 하는 코드가 있을 때
    자바스크립트가 갖고 있는 규칙
  • 전역 스코프 (global), 지역 스코프 (local)
• 의도치 않은 변수값 변경, 코드 예측이 어려워짐 👎

a = 1; // var키워드 생략
var a = 2; //중복 선언 허용
console.log(window.a); // 전액변수화

const b = 1;
console.log(window.b);   //undefined

 

 

 

 

 

console.log(a)
const a = 1; // 레퍼런스 에러

 

 

 

 

컴퓨터는 어떻게 알고 데이터를 처리를 할까?

• 우리는 컴퓨터에게
  데이터의 종류를 지정해주고, 알려주어서,
  데이터 종류에 맞게 적합한 로직처리를 할 수 있게 해주어야 한다.
• 여기서 말하는 데이터의 종류를 데이터 타입, 자료형이라고 한다.

데이터 타입, 자료형

• 언어별로 지원하는 데이터 타입은 모두 다르다.
  • C언어: 문자, 정수, 실수, ...
  • Java: 문자, 정수, 실수, 논리, ...
  • Python: 문자, 정수, 실수, ...

자바스크립트의 데이터 타입 - 원시 타입

• 자바스크립트는 7가지의 원시 타입을 제공한다.
  • String, Number, BigInt, Undefined, Null, Boolean, Symbol
• 원시 타입의 특징
  • 값은 변경 불가능한 값이다. immutable value
  • “값”으로써 전달된다. (참조 형태로 전달되는 것이 아닌)

자바스크립트의 데이터 타입 - 원시 타입

• 자바스크립트에는 원시 래퍼 객체가 따로 존재한다.

원시 데이터를 사용할 경우,
해당 래퍼 객체들을 상속받아 사용할 수 있다.

• 원시 래퍼 객체와 원시 타입을 헷갈리지 말자!