딥다이브 북스터디_ 1. 시작-프로그래밍과 자바스크립트의 배경

1. 프로그래밍이란?

컴퓨터에게 원하는 동작을 실행시키는 것.

이를 위해 우선적으로 실행하고자 하는게 무엇인지, 현재의 문제와 요구사항을 명확히 정의해야한다.

그 후 복잡한 요구사항(문제)를 단순하게 분해하고, 순서에 맞게 동작을 나열한다.

 

사람과 달리 컴퓨터의 사고방식은 0과1로 구성되어있기에

명확하고 구체적인 개념의 기준을 정의하고 사용해야한다.

 

프로그래밍 언어

컴퓨터의 기계어와 사람이 사용하는 언어간의 간극을 해결하기위해

프로그래밍 언어를 사용해 동작(프로그램)을 작성하고, 일종의 번역기인 컴파일러(or 인터프리터)를 사용한다.

프로그래밍언어는 약속된 문법으로 구성된 언어이다. 이는 구문(syntax문법)과 의미(semantics)의 조합으로 표현된다.

- 구문과 의미(syntax & semantics)

문법에 맞는 문장을 구성하는 것 + 적절한 의미의 어휘선택 

문법에 문제가 없더라도 의미는 없는 문장(코드)들 나열해봐야 문제해결은 되지 않는다.(문맥이 중요하다.)

 

-프로그래밍언어의 문법

• 변수와 값 - 변수를 통해 값을 저장, 참조
• 연산자 - 값을 연산, 평가
• 표현식과 문
• 조건문, 반복문에 의한 흐름제어 - 코드의 실행순서 제어
• 함수 - 재사용이 가능한 문의 집합
• 자료구조 
  • 객체, 배열 등 - 자료의 구조를 지정함

프로그래밍 => 적절한 자료구조와 함수의 집합을 만들고, 그 흐름을 제어하여 요구사항을 구현하는 것.

 

---

2. 자바스크립트란?

처음은 웹페이지의 보조적인 기능을 수행하기 위해 

브라우저에서 동작하는 가벼운 프로그래밍 언어로 개발되었다.(브렌던 아이크 개발/넷스케이프 커뮤니케이션스 도입)

 

모카 = 라이브스크립트 = 자바스크립트 라는 이름으로 최종 명명

 

현재, 모든 브라우저의 표준 프로그래밍 언어로 자리잡음.

 

과거, Microsoft에서 자바스크립트 파생버전 JScript로 자사 브라우저에서만 동작하는 기능을 넣어 (점유율 경쟁)

호환성문제(크로스 브라우징 이슈)가 있었음. 

=> ECMA에 자바스크립트의 표준화 : 현재 ES6 (ECMAScript6)

 

---

자바스크립트 성장의 역사

-1. Ajax(Asynchronous Javascript And Xml)

서버 - 브라우저가 비동기방식으로 데이터를 교환할 수 있는 통신기능.            

XMLHttpRequest(xhr)객체로 전체페이지가 아닌 필요한 부분만 요청할 수 있다.

* XML = 데이터를 정의하는 규칙을 제공하는 마크업 언어로, 

xml을 사용하면 공유가능한 방식으로 데이터를 정의, 저장가능함

따라서 화면에서 변경할 필요가 없는 부분은 다시 렌더링하지않고, 필요한 부분만 서버로부터 전송받아 변경되는 부분만 한정적으로 렌더링한다. 

==> 빠른 성능과 부드러운 화면전환

 

+ 그외 비동기통신 방식

https://cocoon1787.tistory.com/756

[개발상식] Ajax, axios, fetch 차이점 장단점

 

-2. jQuery

쉽고 직관적인 자바스크립트 라이브러리.

DOM과 이벤트를 쉽게 제어할 수 있다.

http://www.tcpschool.com/jquery/intro

 

- 3. V8 자바스크립트 엔진

자바스크립트로 웹애플리케이션을 구축하려는 시도가 증가하면서

더욱 빠르게 동작하는 JS엔진이 필요해짐.

=> 구글에서 V8자바스크립트엔진 -> js언어로 빠르고 부드러운 UX(user experience)제공가능해짐.

이후 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동했고, 프론트엔드 영역이 주목받게 됨.

*js엔진 : js를 해석,실행하는 프로그램 또는 인터프리터.

- 4. Node.js

 구글의 V8자바스크립트엔진으로 빌드된 js런타임환경으로,

브라우저를 벗어난 환경에서도 동작할 수 있게 엔진을 브라우저에서 독립시킨 자바스크립트 실행환경이다.

*런타임환경: 프로세스나 프로그램이 동작하는 동안

운영체제(or 소프트웨어)가 제공하는 실행환경

- 5. SPA 프레임워크

발전을 겪어오며, 데스크톱애플리케이션만큼의 성능과 UX의 제공이 필수가 되었고

이에 따라 복잡해진 개발과정을 수행하기위해 여러 패턴과 라이브러리 등장 -> 변경에 유연하면서 확장하기 쉬운 프로그램 아키텍처의 구축에 어려움이 생김 => 프레임워크 등장.

(Angular, React, Vue.js, Svelte 등)

 

---

자바스크립트와 ECMAScript

클라이언트 사이드 web API는 ECMAScirpt와는 별도로 월드와이드 웹콘소시에서 별도의 사양으로 관리.

클라이언트 사이드 = 브라우저

* ecma는 터미널에서 node로 확인/브라우저 둘다 확인 가능하나(const, let,..),

  client side = 브라우저 onclick, alert 같은건 터미널로 확인불가 -브라우저(개발자도구 등)로 확인해야함.

https://developer.mozilla.org/ko/docs/Web/API

Web API | MDN

---

자바스크립트 특징

웹브라우저에서 작동하는 유일한 프로그래밍 언어.  html,css와 함께 웹을 구성하는 요소이다.

 

런타임에 컴파일되는 인터프리터 언어로(실행파일 생성x),

인터프리터 언어의 동적 기능 지원을 살리면서 실행속도가 느리다는 단점을 극복한다.

 

명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 다중 패러다임 프로그래밍 언어이다.

상속, 정보은닉을 위한 키워드는 없지만 클래스기반 객체지향 언어보다 효율적이고 강력한 프로토타입 기반의 객체지향 언어. (-클래스: es6에서 도입됨)

 

*프로토타입

강의를 듣고서도 이해가 잘 안가던 내용이라 구글링하며 개념을 도식화해보았다.

 

프로토타입: 클래스의 상속과 달리, 원형을 복제해 객체의 동작방식을 재사용할수있다.

 

JS에서는 조금 다른데,

원형을 복제하는 것이 아닌, 프로토타입 링크로 원형객체를 참조한다.

 

지금 듣는 강의에서는 대부분 코드중심으로 설명을 잘 해주셔서 이런 도식화된 개념을 먼저 머릿속에 넣어두고 들으면 좋은 것 같다. (반대 순서로 하면 강의들을때는 아는 것 같다가 강의끄고나면 모름..🥲)

참고- https://ui.toast.com/weekly-pick/ko_20160603

 

---

3. 자바스크립트 실행환경

 

실행환경	용도	Dom API	파일시스템
브라우저	웹페이지를 브라우저 화면에 렌더링	O	X	브라우저는 네트워크통신으로 html문서를 받아옴. → 파싱(해석) → dom tree+css = render tree 브라우저 동작방식
Node.js	브라우저 외부에  js실행환경 제공	X	O	npm : node.js에서 사용할 모듈들을 패키지로           모아둔 저장소&설치,관리 매니저 참고 - 모듈화와 npm  http://poiemaweb.com/nodejs-npm

 

---

4. 변수

값이 메모리 상 저장된 위치의 이름.

값이 저장된 공간 자체 혹은 메모리 공간을 식별하기위해 붙인 이름. 

 

어떻게 저장이 되고, 이름을 붙인건지 흐름을 보자면

1 + 2 = 3 을 하기위해

1, 2를 기억하는 메모리와 그 둘을 연산하는 CPU가 필요하다. 

메모리는 여러개의 메모리 셀으로 구성되어있는데, 각 메모리셀은 1Byte(8bit)로 데이터를 저장할 수 있다.

 

CPU가 연산하고 난 결과값을 임의로 한 메모리셀에 저장하고,  3이라는 해당 결과값을 재사용하고 싶다면?

그 결과값이 저장된 셀의 메모리주소를 통해 직접 접근할 경우 심각한 오류가 생길수 있다. 그리고 매번 코드가 실행될 때마다 값을 임의의 위치에 저장하기 때문에 같은 코드, 같은 값이더라도 메모리주소는 바뀐다.

따라서 기억하고 나중에 다시 사용할 값의 주소에 변수라는 이름을 붙여 사용한다.

 

※ 변수 선언방식

	재할당	중복선언
var	O	O
let	O	X
const	X	X

const는 단 한번만 값을 할당할 수 있다. 즉, 값이 상수가 된다.

let은 재할당은 가능하나, 중복선언은 불가하다. 

// var의 재할당

var a = 11;
console.log(a) //11
a = 12
console.log(a) //12 - 재할당
var a = 13;
console.log(a) //13 - 중복선언(마지막으로 선언한 값이 출력됨)

    function testA() {
      var a = 10;
      return a;
    }
    console.log(test()); //함수 내부 a값을 출력. 10

    function testB() {
      var b = 22;
      return b;
    }
    console.log(test());//함수 내부 b값을 출력. 10

console.log(b)   //undefined -전역b는 아직 할당된 값이 없음. 기본 초기화값인 undefined출력됨.
var b = 20;   //호이스팅으로 선언된 b는 파악되었으나, 20이라는 값 할당은 인터프리터 방식대로(순서대로) 진행됨.

 

---

5. 표현식과 문

표현식 = 값이 출력되는 문.

var a = 10+20;  //30
a;  //30

10  //10
"사과"  //사과

1 + 2  //3
a !== 10  //true

const person = { name: 'lee', birth: 1999 };
person.name   //lee
person['birth'];  //1999

function plus(x) {
    return x + 1
}

plus(2) //3

 

문 = 명령문

문은 토큰의 집합으로 구성되며,

문의 집합은 프로그램이 된다. 프로그램의 최소 실행단위가 문.

할당문, 선언문, 조건문, 반복문 등이 있다.

 

---

6. 데이터 타입

	데이터 타입
원시타입	number	숫자. 정수와 실수 구분없이 숫자라는 하나의 타입으로 존재한다.
	string	문자열
	boolean	논리값 true, false
	undefined	var로 선언된 변수의 초기화 값
	null	값이 없음. 빈값의 의도적 표현.
	symbol	ES6에서 추가된 7번쨰 타입
객체타입		객체, 함수, 배열 등.    원시타입 외의 모든 값은 객체타입.

 

 

---

 

스터디 마지막 시간에 나온

몇가지 질문사항을 정리해보았다.

 

1. 변수를 적게 쓰라고 하는 이유는?

메모리를 적게쓰기? 아니다.
이건 알고리즘 코테때문에 생긴 오해..

 시간복잡도 : 실행속도 / 공간복잡도 : 메모리

변수의 개수는 버그와 에러의 발생빈도와 비례하기 때문이다.
변수지정은?  ☞  값을 재사용할 일이 있을 떄 변수를 지정하는것. 
필요할 때는 지정하지만, 변수를 남발하지는 말 것.

 코딩하다보면 타입에러가 자주 뜨는 것을 볼 수 있는데, 아래와 같은 상황이 있다.
a변수에 문자열인 값이 들어갔을 거라 생각하고 처리하는 코드썼는데, 
숫자인경우..오류가 나게 됨. 
그래서 재할당되는 var도 지양하는 것.

2.내부에서 컴파일이 진행되기도 하는데, 인터프리터 언어가 맞나?

 내부 일부과정에서 컴파일을 진행하더라도, 컴파일과정이 필요없고 실행파일을 만들지 않기 때문에 인터프리터 언어이다.

3.객체란?

주체가 볼 수 있는 모든 것. 
프로퍼티의 집합. 프로퍼티는 키와 값으로 이루어진 객체의 특징 모음.
ex)사람이라는 객체
{다리:2, 얼굴:1, 지성:120...}

4. 프레임워크와 라이브러리의 차이?

명확하게 구분되어지진 않지만, 대략적인 느낌은 다음과 같다.

프레임워크 ☞ 프레임워크라는 정해진 틀안에서 작성한 코드를 수동적으로 동작시키는 느낌.

                        어플리케이션을 만드는데 필요한 모든 것을 갖추고 있음.

                         Andriod, Spring, Vue, Angular

라이브러리  ☞ 특정기능 사용하려고 가져다 쓰는 느낌. 

                       Tensorflow, React

"리액트가 라이브러리다" 했을 때는 잘 이해가 되지 않았는데,

Python의 Tensorflow는 라이브러리, Java의 Spring은 프레임워크 라는 예시를 보니 어떤 느낌인지 와닿았다.

개발자의 자유도에 따른 차이도 큰 특징 중 하나인듯 하다.
리액트가 프론트3대장 중 하나지만, React는 UI라이브러리다.