[INDEX]=====================================================================================
<기본이론>
1. 프로그래밍 언어
2. 컴파일러 OR 인터프리터
3. 구문(syntax) 과 의미(semantics)
4. 프로그래밍이란
5. 렌더링
6. AJAX
7. V8 자바스크립트 엔진
8. UX (user experience)
9. Node.js
10. 비동기 I/O
11. 힙(Heap)
12. 콜스택 (call stack)
13. 스레드
14. WebAPI
15. 콜스택 큐(Queue)
14. Nodejs 의 구성과 "이벤트루프"
15. 컴포넌트 = 모듈(module)
16. CBD(Component Based Development) 방법론
17. SPA
18. 인터프리터 언어
19. 객체지향언어
20. 자료 추상화( =캡슐화)
21. 상속
22. 다형성
23. 그래서... 자바스크립트가 "객체 지향 언어라고?"
24. 디버깅
25. npm (Node package manager)
26. Web API 그리고 alert 함수
27. 메모리와 메모리셀, 그리고 변수
28. 할당(assignment)과 참조(reference)
29. 식별자
30. "var" vs "let const"
31. 함수 레벨 스코프
32. 블록 레벨 스코프
33. 런타임 그리고 "변수선언"
34. 변수의 "재할당" 과 "가비지 콜렉터"
35. 예약어
36. 값
37. 리터럴(literal)
38. 표현식
39. 데이터타입
40. 템플릿 리터럴
41. 데이터 타입을 정하는 이유
42. 동적 타입 언어
43. 동적 타입 언어의 단점
[MAIN]======================================================================================
1. 프로그래밍 언어
: 사람이 이해가능한, 기계어로 번역 "될" 약속된 구문이자 "표현수단"
2. 컴파일러 OR 인터프리터
: 프로그래밍 언어를 "기계어"로 바꾸어 주는 "번역기"
3. 구문(syntax) 과 의미(semantics)
: 프로그래밍 언어가 이 두개의 조합으로 표된다.
4. 프로그래밍이란
: "요구사항을 분석"해, 적절한 "자료구조"와 "함수의 집합" 으로 변환 한 후, 그 "흐름을 제어" 하는것
5. 렌더링
: HTML, CSS, 자바스크립트로 작성된 문서를 해석해, 브라우저에 시각적으로 출력한것.
또는
"서버데이터"를 "HTML 으로 변환"해, "브라우저에게 전달하는 과정" (SSR: 서버사이드렌더링)
6. AJAX
: Asynchronous JavaScript And Xml
비동기 방식의 데이터교환
초기 렌더링을 위해, "완전한 HTML을 전부 전송받아" 웹페이지를 렌더하여,
필요없는 부분까지 전부 리렌더 하여, 데이터낭비와, 화면 깜빡임이 생성되었다.
AJAX의 등장 이후 "필요한 부분만 렌더하여 가져올 수 있게 되었다."
7. V8 자바스크립트 엔진
: 구글이 만든, 더빠르게 동작하는 "자바스크립트 엔진"
8. UX (user experience)
: 사용자 경험 / 얼마나 사용하기 좋은가 의 척도
9. Node.js
: 기존에는 "자바스크립트" 는 "브라우저"의 "자바스크립트 엔진" 에서만 동작했다.
Node.js 는 자바스크립트를 "브라우저 이외의 환경에서도 동작 가능하도록" 자바크스립트 엔진을 브라우저에서 독립시킨, "실행환경"이다.
: 비동기 IO 를 지원하며, "단일스레드 이벤트 루프" 기반으로 동작하여, "요청처리 성능"이 좋다.
"데이터를 실시간 처리하기 위해, IO 가 빈번하게 발생"하는 "SPA"에 적합하다.
10. 비동기 I/O
: 비동기 인풋, 아웃풋 [동기는, 스레드I/O 작업을 시작 후, 완료될때까지 즉시 대기]
11. 힙(Heap)
: 자바스크립트 처리과정(자바스크립트 엔진) 중, "메모리가" 할당되는 곳
12. 콜스택 (call stack)
: 자바스크립트의 처리과정(자바스크립트 엔진) 중, "코드가 실행될 곳이 쌓이는 곳"
13. 스레드
: 프로세스 내에, "실제로 작업"을 하는 "주체"
=> 단일스레드 : 한번에 하나
14. WebAPI
: DOM, AJAX(promise), time, setTimeout 등이 처리되는, "자바스크립트 엔진과는 별개의 엔진(스레드)"
* 일반적으로 "자바크스립트 안에 포함된 개념으로 치부한다. (엔진 말고)"
15. 콜스택 큐(Queue)
: "WebAPI 에서, 처리되는 방식"
Task Queue (time, setTimeout ...)
MircroTask Queue (ajax, call back ...)
Animation Frames (Animation Frames ...)
로 나뉘어져 있고, 각각 먼저 처리되는 순이다.
"자바스크립트 엔진"에 "콜스택" 이 있다면
"Web API" 에서는 "콜스택 큐" 가 있어서, 들어온 것들을 이렇게 나누어 처리한다.
14. Nodejs 의 구성과 "이벤트루프"
NODEJS의 기본구성
1. 자바스크립트엔진
2. WebAPI
3. 콜스택 큐(Queue)
* 이벤트 루프
"NODEJS" 는 자바스크립트의 "구동환경(실행 환경)"이다
"NODEJS" 는 자바스크립트와는 다르게 "멀티스레드" 를 지원한다.
"자바스크립트 엔진" 은 "힙" 과 "콜스택" 두개로만 나뉘어, 콜스택에 쌓인 것은 하나씩만 처리한다.
"코드가 실행되면" 자바스크립트 엔진의 "콜스택" 에 코드가 하나씩 처리된다.
처리되는 과정중 "Web API" 에 해당되는 것들은, WebAPI 로 보내 처리한다 (ajax, time, call back ...)
- ** 이렇기에, 자바스크립트 엔진은 단일스레드지만, nodejs 는 멀티스레드이다.
WebAPI 는 들어온 코드들을, "콜스택 큐" 에 보내서, 순서대로 처리한다.
"이벤트 루프" 는 콜스택과 콜스택 큐에 어떤게 비워져 있고 어떤걸 채워야 할지 정하고 수행한다.
15. 컴포넌트 = 모듈(module)
: 여러개의 프로그램 함수들을 모아, 특정한 기능을 수행할 수 있도록 구성한 작은 "기능적 단위"
* nextjs의 Component 폴더에는, 한가지 기능만 수행하기 위한 여러 코드들이 모아져 있다.
16. CBD(Component Based Development) 방법론
: 컴포넌트들을 만들고, 컴포넌트를 "조합, 재사용" 하여, 애플리케이션을 만드는 방법론
17. SPA
: Single Page Application
18. 인터프리터 언어
: 소스코드를 "한줄 한줄 읽어가며 명령을 바로 처리"하는 언어 "번역 과 실행 이 동시에 이루어진다."
실행파일을 "생성하지 않는다."
"인터프리트 단계가 따로 나누어져 있지 않다(동시에)"
"인터프리트 단계와 실행단계가 분리되어 있지 않고 반복적으로 수행되므로, 코드 실행속도가 느리다"
예) 자바스크립트, SQL, 파이썬 등이 있다.
반) 컴파일러 언어
: 코드 실행 전, "컴파일 단계"를 거친다. "컴파일 단계"에서는, "소스코드를 머신코드로 변환한다."
컴파일 단계와 실행단계가 분리되어 있어, 명시적인 실행파일을 만들어 실행을 따로 한다.
실행에 앞서 컴파일은 "단 한번만 실행된다."
코드 실행속도가 빠르다.(매번 컴파일 단계가 있는 것이 아니라, 실행은 따로 하기 때문에)
19. 객체지향언어 **
- : 프로그램을 "독립된 단위인 객체" 들의 모임으로 파악하여, 사용하는 언어.
각각의 "객체"는 데이터를 주고 받고, 처리 할 수 있으며,
프로그램을 유연하고, 변경하기 쉽게 만들기 때문에, 보수가 간편하고 직관적인 코드분석이 가능한 장점이 있다.
<역사>
"객체 지향 프로그래밍" 은 변수를을 묶은 "구조체 (= 객체 = object)"로 시작되었다.
변수들을 묶어 만들어낸 "구조체 (= 객체 = object)" 가 사용되기 시작하면서, 점점 방대해지자,
"해당 구조체 안에서만 사용 가능한 함수, 함수군들 을 만들기 시작했고"
그 구조체 안에서만 필요한 "함수들을, 구조체 안에 넣기 시작함으로써"
"클래스 (= 구조체 + 함수)" 가 만들어졌다.
방대해진 "클래스"는, "데이터와 처리방식이 하나의 모듈처럼 관리"되면서, 작은 프로그램들이 독립적으로 돌아가는 형태 를 띄게 되고,
이는, "큰 프로그래밍"을 하더라도, "작은 부품들을 미리 만들어두고 조립하는 형식으로 결합" 하며 개발 할 수 있다는 사실을 알아내었고,
"작은 문제들(컴포넌트)"를 해결하는 "독립적 객체를 만들고" 조립하는 형식을 띄게 된 것이, [객체지향 프로그래밍] 이 되었다.
[객체지향언어의 가장 큰 특징]
1. 추상화 (캡슐화)
2. 상속
3. 다형성
4. 동적바인딩
20. 자료 추상화( =캡슐화)
: 데이터와 메서드를 하나로 묶고, "실제 구현 내용일부를 내부에 감추"는 행위
"추상 자료형" 을 [클래스(Class)]
"추상 자료형의 인스턴스(실제 들어가는 값)"을 [객체(Object)]
"추상 자료형이 정의된 함수"를 [메서드(method)] 라고 부른다.
장점 : "코드의 중복을 피한다"
: "외부에서 코드의 동작 원리를 알 수 없다."
EX. [정상적인 캡슐화] : 실행되는 함수가 실행은 되지만 "어떻게 된 코드인지 모름"
class Capsule {
int number;
public Capsule(int number) {
this.number = number;
}
public double getHalf() {
return number / 2;
}
}
------------------------------------------------------
class Main {
public static void main(String[] args) {
Capsule capsule = new Capsule(10);
System.out.println(capsule.getHalf());
}
}
EX. [캡슐화 되지않음] : "실행되는 함수의 로직이 눈에 드러나있음"
class Capsule {
int number;
public Capsule(int number) {
this.number = number;
}
public int getNumber() {
return number;
}
}
------------------------------------------------------
class Main {
public static void main(String[] args) {
Capsule capsule = new Capsule(10);
System.out.println(capsule.getNumber() / 2D);
}
}
==> 만약, 수백 수천개의 항목에 이 함수를 적용해야 한다면?
그리고 그걸 전부 고쳐야 한다면?
"생각만 해도 머리아프다"
정상적인 캡슐화가 진행되었다면, "클래서 내의 메서드를 수정함으로 수백 수천개의 값들을 동시에 바꿀 수 있다.,"
21. 상속
: "새로운 클래스"가 "기존 클래스"의 자료(객체)와 자료연산(메서드)를 이용 할 수 있게 하는 기능.
22. 다형성
: 다른 "클래스" 에, "같은 이름의 메서드" 를 집어넣어, 동작의 목표는 같지만, 다른 방식으로 결과를 도출해 내는 것 (오버라이드)
혹은 "같은 이름의 메서드" 가 아규먼트를 다르게 집어넣으면, 다른 동작을 하는것(오버로딩)
예시)
저글링, 뮤탈, 히드라 라는 "클래스"가 있고, 각각 moveto() 라는 메서드가 잇을때.
저글링은 뛰고 뮤탈은 날게되지만, 결국 "이동한다" 라는 개념은 같아지는 것
23. 그래서... 자바스크립트가 "객체 지향 언어라고?"
: 이제는 있다. "클래스". 하지만 없다. "private", "protected" 옵션
: 타입이 없는데 객체가 가진 메서드를 어떻게 동작시킬까?
- this 의 사용
const cat = {
name : "고양",
age : 1,
speak : () => {console.log("냐옹~", this.name, this.age)}
}
==> this 를 사용하여, 자신의 객체를 받는다.
: 상속과 다형성은?
- 1. 없으면 찾아가고, 있으면 받아쓴다.
- 2. 클래스가 아니라, 함수 를 클래스 처럼 사용
function Cat(name, age){
this.name = name
this.age = age
}
Cat.speak = () => {console.log("냐옹~", this.name, this.age)}
const cat = Cat("냐옹이",1)
cat.speak() // "냐옹~", "냐옹이", 1
==>> 이젠 "타입스크립트" 가 있다. "근데 난 아직 잘 모름"
24. 디버깅
: 버그를 찾아 없애는것
25. npm (Node package manager)
: 자바스크립트 패키지 매니저
Node 에서 사용 할 수 있는 "모듈"들을 "패키지"화 해서 모아둔 저장소 역할과, "패키지 설치 및 관리" 를 위한 CLI (Command Line Interface) 를 제공한다.
26. Web API 그리고 alert 함수
: 가끔 alert 함수가 실행되지 않을 때가 있었다.
이유는, 이 함수는, 표준 자바스크립트 함수 가 아니라, alert 함수는 "Web API" 안에 있는 함수이기 때문이다.
nodejs 는 alert 함수를 알 수 없다. 실행 시킬 때에는 "브라우저" 환경에서 해야한다.
node 환경에서 한다면
alert(3)
- Uncaught ReferenceError: alert is not defined
이런 오류를 볼 수 있을것이다.
27. 메모리와 메모리셀, 그리고 변수
: 메모리는 "데이터를 저장할 수 있는 메모리셀의 집함"
메모리셀은 1바이트(8비트) 의 단위로 데이터를 저장, 읽는 셀
데이터들은, "메모리 주소"에 기억(저장) 되고, CPU는 이 값을 읽어 연산을 수행한다.
"임의의 주소(메모리주소)"에 배정된 데이터를 가져오는 것은 "메모리 공간에 직접적으로 접근하는 것"이다.
- 매우 위험한 일이므로 하지 않는다.
또한, 데이터가 저장된 메모리주소는 "항상 변경"되기 때문에, "똑같은 연산이지만 다른 메모리 주소"를 가진다.
그러므로, "변수" 를 사용한다.
"변수" 는 "하나의 값을 저장하기 위해 확보한 메모리 공간 자체", 또는 "메모리 공간을 식별하기 위한 이름"
=> 변수를 사용하면, "인터프리터"에 의해, "메모리 공간의 주소로 치환되어 실행"된다.
28. 할당(assignment)과 참조(reference)
: 변수에 값을 넣는 것 "할당"
변수의 값을 읽는 것 "참조"
29. 식별자
: 어떤 값을 구별하여 식별할 수 있는 고유한 이름
식별자는 "변수와 똑같이 메모리 주소를 기억한다."
* 변수이름은 식별자이다.
30. "var" vs "let const"
: 변수를 "선언" 하는 방법들
"선언하면" 메모리 공간을 확보하고, 확보된 메모리 공간의 주소와 변수이름을 연결한다.
var : "함수 레벨 스코프", "중복 선언 가능"
let, const : "블록 레벨 스코프"
31. 함수 레벨 스코프
: "var" 로 선언할 때 적용되는 스코프
1. "함수 내에 선언된 변수"는 함수 내에서만 유효하며, 외부에서는 참조할 수 없다.
2. "함수 내에서 선언"한 변수는, "지역 변수"이며, "함수 외부"에서 선언한 변수는 "모두 전역 변수이다."
=> "var"는 "함수레벨 스코프이며", "중복 선언" 이 가능하다
이는 함수 블록 내에 "재선언한 var 변수가", "전역변수로 오해되기 쉽다."
예시)
var x = 8
function(true){
var x = 10
}
console.log(x)
==> 강제로 전역변수 x가 10으로 변하는 불상사가 생겼다.
32. 블록 레벨 스코프
: "const, let"
1. "모든 코드블록" 내에 선언된 변수는 "코드 블록 내에서만 유효하다"
2. "코드블록" 내에서 생성한 변수는 "모두 지역변수이다"
- => 블록 레벨로 변수의 참조를 줄여, "전역변수로 오해되는 것을 막는다"
33. 런타임 그리고 "변수선언"
: 런타임이란, 인터프리터에 의해 "코드가 하나씩 실행되는 시점" 그 시간이다.
- "변수선언" 은 "런타임"보다 먼저 실행된다.
console.log(name)
const name = "ms"
==> 변수에 값을 "할당" 하기 전에, console.log() 에 넣었지만,
값은 "undefined" 가 출력된다.
34. 변수의 "재할당" 과 "가비지 콜렉터"
: 변수에 "재할당" 을 할 때에는, "기존의 메모리를 지우고 재할당 하는 것 이 아니라"
"새 메모리 공간을 만들고", 그 공간 안에 "새 값을 넣는것이다"
새 값을 넣으면 "기존에 있던 값은 쓸모가 없기 때문에" 가 되어, 언젠가 "가비지 콜렉터"에 의해 "자동 해제"된다.
* 가비지 콜렉터는 "메모리 누수" 를 방지한다
35. 예약어
: 예약어는 "프로그래밍 언어에서 이미 사용중이거나, 사용될 예정"인 단어를 말한다.
예) await, case, if, let, catch, class, try ...
예약어는 "변수이름으로 선언이 불가능하다."
36. 값
: "표현식"이 "평가" 되어 생성된 결과
*평가 : "식을 해석하여 값을 생성"하거나 "참조"하는것
37. 리터럴(literal)
: "사람이 이해가능한 문자 또는 약속된 기호" 를 사용해서 값을 생성 하는 "표기법"
3 이라고 단순히 적은것도, "리터럴"이다.
이 아라비아 숫자를 평가하여, 자바스크립트는 "3" 이라는 값을 생성하는것이다.
[], {}, "", //, 등등 전부 "리터럴"이다.
38. 표현식
: "값으로 평가될 수 있는" "문(statement)"이다.
예) const score = 50 + 50 리터럴 표현식
square() 함수 표현식
10 + 20 연산자 표현식
전부 표현식이다
39. 데이터타입
데이터 타입은 "원시 타입" , "객체 타입" 두가지로 분류된다.
"원시타입" 에는 "number, string, boolean, null, undefined, symbol" 이 존재한다.
"객체타입" 에는 "함수, 배열, 객체" 가존재한다.
"원시 값" 은 변경 불가능 하다
"원시값을 담은 변수" 는 변경이 가능하지만, "원시 값" 자체는 "변경 불가인 것이다."
"변수를 재할당 하면" 기존의 변수와 연결된 원시값을 끊어버리고," 새 원시값"을 받아, "새 저장소(새 메모리 공간)"에 넣는것이다.
40. 템플릿 리터럴
: `` 로 표현되는 템플릿 리터럴은 "줄바꿈을 해도 한줄로 표기되고, 표현식을 삽입 할 수 있다"
예) const first = "hi"
console.log( ` mynameis ${first} `)
41. 데이터 타입을 정하는 이유
1. 값을 저장할때 확보해야 하는 메모리 공간의 크기를 결정
2. 값을 참조할때, 읽어들여야 하는 메모리 공간의 크기를 결정
3. 메모리에서 읽어들인 2진수를 어떻게 해석할지 결정
42. 동적 타입 언어
: 자바스크립트는 변수를 "선언 할 때가 아닌", 변수를 "할당" 할때, "타입을 결정한다."
이는 "언제든 재할당에 의해 변수의 타입이 변경될 수 있다는 것이다."
이러한 것을 "동적 타이핑" 이라고 하고
자바스크립트는 "동적 타입 언어" 가 된다.
43. 동적 타입 언어의 단점
: 유연성은 높지만 "신뢰성" 이 떨어진다. 대표적으로, number 타입을 string 타입으로 해석 하는것이 있다.
'JavaScript' 카테고리의 다른 글
| 3. Array.splice() - 배열 수정하기 초간단정리 (0) | 2022.12.12 |
|---|---|
| 2. Array.reduce(), Array.concat() 초간단 정리 (0) | 2022.12.12 |
| 1. function.bind() - Array.map() 으로 무한증식 버튼 만들 때, 한 함수로, 각각 다른 역할을 하는 버튼 만들기 (0) | 2022.12.12 |
| 이론 용어정리(3) [76~130] - 자바 스크립트 되짚기 (0) | 2022.12.06 |
| 이론 용어정리(2) [44~75] - 자바 스크립트 되짚기 (0) | 2022.12.01 |
댓글