04.17 디지털 트윈 부트캠프 5일차!

Javascript

조영광 uvc front-end 개발자(back-end도 약간)

 

과제가 매일 있을 예정

1. 자바스크립트란?
2. 데이터타입 & 변수
3. 연산자
4. 제어문(조건문, 반복문)
5. 함수(함수표현식, 화살표 함수, 콜백 함수)
6. 객체
7. 배열 & 내장 함수
8. 비동기 프로그래밍
9. 프로미스
10. async/await
연습문제
FreeCodeCamp
프로젝트

 

자바스크립트란?

여러 가지 언어에서 좋은 것들만 가져와 약 10일만에 만든 언어로 유연성 있고 접근성이 좋은 언어이다.

인터넷에서만 사용되는 인터프리터 언어였으나 최근에는 Node.js를 통해 서버에도 사용된다.

자바나 파이썬과 달리 따로 다운로드할 필요 없으며 브라우저에서도 바로 사용이 가능하다.

모카 -> 라이브스크립트 -> 자바스크립트

웹페이지를 좀 더 동적으로 표현하기 위해 개발됨

초창기에는 웹페이지의 보조적인 기능만 담당

 

자바스크립트의 역사

1999년 Ajax가 등장해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있게 됨(성능 향상)

2005년 구글맵스 자바스크립트/Ajax 기반으로 동작 -> 자바스크립트 개발 프로그래밍 언어로 가능성을 열어줌

2006년 jquery 등장 -> 개발하기 쉽게 만들어주는 라이브러리 등장

2008년 구글의 V8 자바스크립트 엔진 등장(빠른 성능) => 웹 서버에서 수행되던 역할을 클라이언트(브라우저)가 할 수 있게 해 줌

2009년 Node.js 등장, 브라우저에서만 동작하는 자바스크립트를 서버용으로 개발하기 위한 환경 구성 => 프론트  +백엔드 영역을 아우르는 웹 프로그래밍 언어

 

인터프리터 vs 컴파일러

인터프리터 언어

즉시 실행 가능 컴파일이 필요 없으나 처리 속도가 느림, 용량이 작다, Python, Ruby처럼 비교적 고수준에 가까운 언어

컴파일러

컴파일을 통해 실행가능한 파일로 변경 해야하며 처리 속도가 빠르다. 용량이 크다, C, c++처럼 비교적 저수준에 가까운 언어

 

ES6

Netscape는 JS, MS사의 IE는 Jscript로 각각 표준이 달라 ECMA 탄생, JS 개발 명세 확인

 

크로스 플랫폼

웹/모바일 하이브리드(Ionic)/서버(Node.js)/데스크톱(Electron)/머신러닝(Tensorflow.js)/로보틱스(Johnny-Five) 지원웹 어플리케이션에서 할 수 있는 기능이 많아 짐에 따라 개발 복잡도 증가-> 많은 라이브러리 출현, 유연하면서 확장이 쉬운 프레임워크 출현(Vue, React, Angular 등)

 

표기법

dash-case: HTML, CSSsnake_case: HTML, CSScamelCase: JavascriptPascalCase: Javascript

 

키보드 특수 문자

` Back Quote

# Sharp

& And(조건 연산자)

* (DB전체조회), (곱하기)

- Dash_ underline

| Or(또는)

; 세미콜론

: 콜론

 

web IDE CodeSnadBox

온라인 코드 에디터

New SandBox -> Vanila -> 톱니바퀴(configuration) -> .prettierrc create 선택 -> Use Single Quotes 켜기 -> 우측 최상단의 케밥 메뉴 아이콘 선택 -> Preiview on edit, Instant preview 끄기

 

---

데이터 타입 & 변수

데이터 타입

메모리 저장을 위해 공간 확보를 할 메모리 크기를 알아야 하고 값의 종류에 따라 확보할 메모리 크기가 다르다. 이때 값의 종류

메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할지에 대한 정보 제공

ECMAScript 표준은 7개의 데이터 타입 제공

Primitive: Boolean, Null, Undefined, Number, String, Symbol, Object

Object: Array, Object, Fucntion, RegEx, Date, ...

 

원시타입

변경 불가능한 값으로 값에 의한 전달이다.(pass-by-pass)

 

숫자(number)

하나의 숫자 타입만 존재

• 배정밀도 64비트 부동소수점 형을 따름 -> 모든 수를 실수로 처리

 

 

문자열(String)

텍스트 데이터를 나타내는데 사용

• 작은 따옴표 또는 큰 따옴표 안에 문자를 넣어 생성하며 일반적으로 작은 따옴표를 사용한다.
• 한 번 문자열이 생성되면 그 문자열은 바꿀 수 없다.

 

 

변수 str2는 'hello'를 가리키고 있다가 문자열 'hi'를 가리키도록 변경된 것이다.

 

 

불리언(boolean)

논리적 참, 거짓을 나타내는 true와 false 존재

• 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용
• 비어 있는 문자열과 null, undefined, 숫자 0은 false로 간주

 

undefined

선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.

• undefined 타입의 값은 undefined가 유일
• 선언되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 속성에 접근할 경우 undefined 반환
• 개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값

 

null

의도적으로 변수에 값이 없다는 것을 명시할 때 사용

• null 타입의 값은 null이 유일하며 대소문자를 구별하므로 Null, NULL과는 다르다.

 

symbol

ES6에서 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값

• 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용
• Symbol함수를 호출해 생성

유일하게 변수를 만들어 주는 타입이다.

 

객체 타입

참조에 의한 전달(pass-by-reference) 방식으로 전달

• 객체는 데이터와 그 데이터에 관련한 동작을 모두 포함할 수 있는 개념적 존재이다.
• 이름과 값을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체

 

변수

데이터를 기억해 필요한 때에 재사용하기 위해 고유의 이름인 식별자를 명시한 것

• var, let, const 키워드를 사용해 선언
• 할당 연산자를 활용해 값을 할당
• 식별자인 변수명을 사용해 변수에 저장된 값을 참조

 

변수 선언

한 번 쓰고 버리는 값이 아닌 일정 기간 유지할 필요가 있는 값에 사용

선언만 되어있는 변수는 undedfined, 선언하지 않은 변수에 접근 시 ReferenceError

 

변수의 중복 선언

var 키워드로 선언한 변수는 중복 선언 가능

실수로 변수를 중복 선언했다면 변수의 값이 변경되는 부작용을 발생시킨다.

변수의 중복 선언은 문법적으로 허용되지만 사용하지 않는 것이 좋다.

 

동적 타이핑

자바스크립트는 동적타입 언어이다.

값이 할당되는 과정에서 값의 타입에 의해 자동으로 타입 결정

 

변수 호이스팅

var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨져 동작하는 특성

var 키워드를 사용해 선언한 변수는 중복선언이 가능 하므로 문법적 문제가 없다.

모든 선언문(var, let, const, function, function*, class)이 선언되기 전에 참조 가능

• 선언 단계
  변수 객체에 변수 등록, 이 변수 객체는 스코프가 참조하는 대상이 됨
• 초기화 단계
  변수 객체에 등록된 변수를 메모리에 할당. 이 단계에서 변수는 undefined로 초기화
• 할당단계
  undefined로 초기화된 변수에 실제값 할당

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
이후 변수 할당문 도달 시 값의 할당이 이루어진다.

 

var 키워드 변수의 문제점

• 함수레벨 스코프
  전역 변수 남발
• var 키워드 생략 허용
  의도하지 않은 변수의 전역화
• 중복 선언 허용
  의도하지 않은 변수값 변경
• 변수 호이스팅
  변수를 선언하기 전 참조 가능

전역 변수는 유효 범위가 넓어 어디서 어떻게 사용될지 파악 힘듦

변수의 유효 범위는 좁을수록 좋다.

ES6은 var의 이러한 단점을 보완하기 위해 let과 const를 도입

 

연산자

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다.

 

산술 연산자

피연산자를 대상으로 수학적계산을 수행해 새로운 숫자 값을 만든다.

산술연산을 할 수 없는 경우 NaN을 반환

 

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

 

단항 산술 연산자

1개의 피연산자를 대상으로 연산

증가/감소(++/--) 연산자는 위치에 따라 피연산자의 값을 변경하는 부수 효과

• 피연산자 앞에 위치한 전위증가/감소 연산자는 피연산자의 값을 증가/감소시킨 후 다른 연산 수행
• 피연산자 뒤에 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소

 

 

• x++ 선대입 후증가
• ++x 선증가 후대입
• x-- 선대입 후감소
• --x 선감소 후대입

 

문자열 연결 연산자

-+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작

 

할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당

 

비교연산자

좌항과 우항의 피연산자를 비교해 불리언 값으로 반환

주로 if문이나 for문과 같은 제어문의 조건식에서 사용

 

동등/일치 비교 연산자

• 동등 비교(==) 연산자
  좌항과 우항의 피연산자를 비교할 때 타입을 일치시킨 후 비교
• 일치비교(===) 연산자
  좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에만 true 반환
• 부동등비교(!=)
• 불일치비교(!==)

 

대소 관계 비교 연산자

피연산자의 크기를 비교해 불리언 값 반환

>, <, >=, <=

 

삼항조건연산자

조건식의 평가 결과에 따라 반환할 값을 결정

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

물음표 앞의 첫번째 피연산자가 조건식, 즉, 불리언 타입의 값으로 평가될 표현식이다.

평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다.

• 조건식이 참 -> 콜론(:) 앞의 피연산자가 평가되어 반환
• 조건식이 거짓 -> 콜론(:) 뒤의 피연산자가 평가되어 반환

 

논리 연산자

우항과 좌항의 피연산자(부정 논리 연산자의 경우, 우항의 피연산자)를 논리 연산

• || 논리합(OR)
• && 논리곱(AND)
• ! 부정(NOT)

 

쉼표 연산자,

왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 피연산자의 평가 결과를 반환

 

그룹연산자()

그룹 내의 표현식을 최우선으로 평가 -> 연산자의 우선 순위를 1 순위로 높일 수 있다.

 

typeof 연산자

자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환

7가지 문자열 string, number, boolean, undefined, symbol, object, function 중 하나를 반환

null을 반환하는 경우는 없으며 함수의 경우 function 반환

---

데이터 타입 & 변수

• 변수
  포함 가능한 기호: _, $
  숫자가 아닌 문자로 시작
  예약어 피하기
• 상수
  선언과 초기화가 동시에 이루어지지 않을 때 에러 확인
• 연산자
  3항 연산자
  
  • 0보다 크면 양수 0보다 작으면 음수 출력
    출력된 값 변수에 넣어서 변수
    90점 이상 A+, 60점 이상 C+, 둘 다 아니면 F 출력