Skip to content

Commit a867d52

Browse files
jexistsjexists
committed
폴더정리
1 parent 84a0ee8 commit a867d52

File tree

15 files changed

+934
-1
lines changed

15 files changed

+934
-1
lines changed

‎_book/modern-javascript-deep-dive/01_프로그래밍/01.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
# 프로그래밍
3+
4+
→ 컴퓨터에게 실행을 요구하는 커뮤니케이션
5+
6+
→ 무엇을 실행하고 싶은지 정의 필요
7+
8+
→ 정확하고 상세하게 요규사항을 설명하는 작업
9+
10+
## computational thinking (컴퓨팅 사고)
11+
12+
→ 논리적, 수학적 사고 필요
13+
14+
→ 해결 과제를 작은 단위로 분해하고 패턴화해서 추출
15+
16+
## 프로그래밍 언어
17+
18+
→ 컴퓨터와 대화(명령)에 사용되는 일종의 표현 수단
19+
20+
## 기계어(machine code)
21+
22+
→ 컴퓨터가 이해할 수 있는 언어
23+
24+
## 컴파일러 또는 인터프리터
25+
26+
→ 컴퓨터가 이해할 수 있는 기계어 변환하는 변역기
27+
28+
## 프로그래밍
29+
30+
→ 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
31+
32+
→ 구문(syntax) + 의미(semantics) 조합으로 표현
33+
34+
→ 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것
35+
36+
→ 프로그래밍 목적: 문제해결 (문제 → 문제해결능력 → 해결방안 → 문법/의미 → 코드)

‎_book/modern-javascript-deep-dive/02_자바스크립트란?/01.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
2+
3+
# 자바스크립트란
4+
5+
# 자바스트립트 역사
6+
7+
개발 이름: Mocha → LiveScript → JavaScript
8+
9+
개발자: 브렌던 아이크(Brendan Eich)
10+
11+
1995 - 넷스케이프 커뮤니케이션(Netscape)에서 자바스크립트 공개
12+
13+
1996 - 마이크로소프트에서 자바스크립트 호환 JScript공개
14+
15+
1997 - ECMAScript 1 초판 (자바스크립트의 표준화)
16+
17+
1998 - DHTML 등장
18+
19+
1999 - ECMAScript 3 (정규 표현식 등)
20+
21+
1999 - XMLHttpRequest(서버와 브라우저 비동기 방식으로 데이터 교환: Ajax) 등장
22+
23+
2005 - AJAX 등장
24+
25+
2006 - jQuery 등자 (DOM 쉽게 제어 & 크로스 브라우징 이슈 해결)
26+
27+
2008 - V8 자바스크립트 엔진
28+
29+
2009 - ECMAScript 5 / HTML5 등장 (JSON 등)
30+
31+
2009 - Node.js: 자바스크립트 런타임 환경 / 라이언달(Ryan Dahl)
32+
33+
2015 - ECMAScript 6 (let/const 등)
34+
35+
## 렌더링
36+
→ HTML, CSS, JS 작성된 문서를 해석해서 브라우저에 시각적으로 출력
37+
38+
## SPA 프레임워크
39+
→ CBD: Component based development 방법론
40+
41+
→ Single Page Application
42+
43+
→ Angular, React, Vue.js, Svelte 등
44+
45+
## 인터프리터언어 vs 컴파일러 언어
46+
### 인터프리터
47+
→ 별도의 컴파일 작업을 수행하지 않는 언어
48+
49+
→ 소스 코드 즉시 실행
50+
51+
→ 코드 실행되는 단계인 런타인에서 중간 코드인 바이트 코드로 변환 후 실행
52+
53+
→ 실행 파일 생성 X
54+
55+
→ 인터프리트 단계와 실행 단계 분리 X (인터프리터 바이트코드로 변환하고 즉시 실행)
56+
57+
→ 코드가 실행될 때마다 인터프리트 과정 반복 수행
58+
59+
→ 실행 속도가 비교적 느림
60+
61+
→ 예) 자바스크립트
62+
63+
### 컴파일러 언어
64+
→ 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신코드로 변환 후 실행
65+
66+
→ 실행 파일 생성
67+
68+
→ 컴파일 단계, 실행 단계 분리 (명시적인 컴파일 단계 → 명시적으로 실행 파일 수행)
69+
70+
→ 실행에 앞서 컴파일은 단 한번 수행
71+
72+
→ 코드 실행 속도 빠름
73+
74+
# 자바스크립트 특징
75+
→ 인터프리터 언어
76+
77+
→ 웹 구성하는 요소중 하나 (HTML, CSS, JS)
78+
79+
→ 실행환경에서 코드를 직접 동작
80+
81+
→ 실행속도 느림 (모던 자바스크립트 엔진: 크롬 V8, 파이어폭스 SpiderMonkey, 사파리 JavaScriptCore, 마이크로소프트 엣지 Chakra 등으로 단점 해결)
82+
83+
→ 명령형 (imperative)
84+
85+
→ 함수 타입 프로그래밍 (functional)
86+
87+
→ 프로토타입 기반 객체 지향 프로그래밍 (prototype-based)
88+
89+
→ 멀티 패러다임 프로그래밍 언어
90+
91+
→ C언어나 자바와 닮은 구문
92+
93+
→ 동적 타입 언어
94+
95+
→ 리터럴 표기의 표현력
96+

‎_book/modern-javascript-deep-dive/03_자바스크립트 개발 환경과 실행 방법/01.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# 자바스크립트 실행 환경
2+
3+
→ 자바스크립트 엔진 내장 (자바스크립트를 해석하고 실행)
4+
5+
→ 브라우저: 웹페이지 브라우저 화면에 렌더링 목적
6+
7+
→ Node.js: 브라우저 외부에서 자바스크립트 실행 환경 제공
8+
9+
10+
11+
## 웹브라우저
12+
13+
### 개발자 도구
14+
15+
윈도우: F12 / Ctrl + Shift + i
16+
17+
맥: command + option + i
18+
19+
- Elements
20+
21+
→ DOM과 CSS를 편집해서 렌더링 된 뷰 확인
22+
23+
→ 편집한 내용 저장x
24+
25+
- Console
26+
27+
→ 웹페이지 에러 확인, 콘솔 메세지 확인
28+
29+
- Sources
30+
31+
→ 자바스크립트 코드 디버깅
32+
33+
- Network
34+
35+
→네트워크 요청 정보 성능 확인
36+
37+
- Application
38+
39+
→ 웹 스토리지, 세션, 쿠키 확인 관리
40+
41+
42+
43+
# Node.js
44+
45+
→ 2009년 라이언 달(Ryan Dahl) 발표
46+
47+
→ 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
48+
49+
→ 브라우저 이외의 환경에서 동작시킬수 있는 자바스크립트 실행 환경
50+
51+
52+
53+
## Node.js 설치
54+
55+
[Node.js 웹사이트](https://nodejs.org/en/)
56+
57+
### Node.js 버전
58+
59+
LTS 버전: long term support → 장기적으로 안정된 지원 보장
60+
61+
Current 버전 → 최신 기능 제공하지만 업데이트가 발생하는 버전으로 불안정
62+
63+
* 개발환경: LTS 버전 추천
64+
* 학습: Current 추천
65+
66+
# npm
67+
68+
→ node package manager
69+
70+
→ 자바스크립트 패키지 매니저

‎_book/modern-javascript-deep-dive/04_변수/01.md‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
2+
# 변수
3+
→ variable
4+
5+
→ 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 이름
6+
7+
→ CPU: 연산 / 메모리: 데이터 기억
8+
9+
→ 값의 위치를 가리키는 상징적인 이름
10+
11+
→ 메모리 주소를 통해 값을 저장하고 참조할 필요 X (안전하게 접근)
12+
13+
→ 변수명: 변수이름
14+
15+
→ 변수 값: 변수에 저장한 값
16+
17+
→ 할당(assignment): 변수에 값을 저장하는 것(대입, 저장)
18+
19+
→ 참조(reference): 변수에 저장된 값을 읽어 들이는 것
20+
21+
→ 변수 이름을 통해 값의 의미를 알 수 있도록 가독성 좋게 만들어야 함
22+
23+
## 식별자
24+
→ 어떤 값을 구별해서 식별할 수 있는 고유한 이름
25+
26+
→ 값 기억 X / 메모리 주소 기억
27+
28+
→ 메모리 주소에 붙인 이름
29+
30+
→ 변수, 함수, 클래스 등의 이름
31+
32+
→ 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름
33+
34+
→ 네이밍 규칙 준수
35+
36+
→ 선언(declaration)에 의해 자바스크립트 엔진에 식별자 존재 알림
37+
38+
## 변수 선언
39+
→ 변수 생성: variable declaration
40+
41+
→ 값을 저장하기 위한 메모리 공간 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장
42+
43+
→ var, let, const 키워드 사용
44+
45+
### var
46+
→ ES6 이전, 변수를 선언할 수 있는 유일한 키워드
47+
48+
→ 블록 레벨 스코프 지원 X (함수 레벨 스코프 지원)
49+
50+
### keyword
51+
→ 자바스크립트 코를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어
52+
53+
→ 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작 수행
54+
55+
### 변수 선언문
56+
```javascript
57+
var score; // 변수 선언문
58+
```
59+
→ 변수 선언한 이후, 변수값 할당X
60+
61+
→ 변수 선언에 의해 확보된 메모리 공간은 비어 있지 않음
62+
63+
→ 확보된 메모리 공간에 자바스크립트 엔진에 의해 **undefined 값이 암묵적**으로 할당되어 초기화
64+
65+
→ 자바스크립트 엔진은 변수 선언을 2단계 거쳐 수행
66+
1. 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재 알림
67+
2. 초기화 단계: 값을 저장하기 위한 메모리 공간 확보하고 암묵적으로 undefined을 할당해 초기화
68+
69+
→ 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록
70+
71+
→ 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아있을수있음 (garbage value)
72+
73+
→ 자바스크립트에서는 암묵적으로 초기화 수행하므로 garbage value로부터 안전
74+
75+
→ 선언하지 않은 값을 접근할 경우 ReferenceError(참조에러) 발생
76+
### 실행 컨텍스트
77+
→ 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
78+
79+
→ 자바스크립트엔진은 실행 컨텍스트를 통해 식별자와 스코프 관리
80+
81+
→ 변수 이름과 변수 값은 실행 컨텍스트 내에 키/값 형식인 객체로 등록되어 관리
82+
83+
### 변수 호이스팅
84+
85+
→ 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
86+
87+
→ 변수 선언 런타임 전에 먼저 실행
88+
89+
→ 모든 선언문(변수 선언문, 함수 선언문 등) 먼저 실행 후 선언문을 제외한 소스 코드 순차적 실행
90+
91+
→ var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등) 호이스팅 현상 생김
92+
93+
[참고링크: let, const 호이스팅?](https://yceffort.kr/2020/05/var-let-const-hoisting)
94+
95+
### 값 할당
96+
```javascript
97+
// 선언과 할당
98+
var age; // 변수 선언
99+
age = 28; // 값의 할당
100+
101+
// 선언 할당 단축
102+
var age = 28;
103+
// 단축표현해도 선언과 할당 2개의 문으로 나우어서 각각 실행 (선언과 할당 실행 시점 다름)
104+
```
105+
→ 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행
106+
107+
→ 값의 할당은 소스 코드가 순차적으로 실행되는 시점인 런타임에 실행
108+
109+
110+
### 상수
111+
112+
→ 값을 재할당할 수 없어서 변수에 저장된 값을 변경 불가
113+
114+
→ 단 한번만 할당할 수 있는 변수
115+
116+
### 가비지 콜렉터 (garbage collector)
117+
118+
→ 애플리케이션이 할당(allocate)한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능
119+
120+
→ 어떤 식별자도 참조하지 않는 메모리 공간 의미
121+
122+
→ 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수 방지
123+
124+
## 메모리 관리방식
125+
→ 언매니지드 언어 vs 매니지드 언어
126+
### 언매니지드 언어
127+
→ c언어
128+
129+
→ malloc(), free(): 메모리 제어 기능 제공
130+
131+
→ 개발자가 주도: 개발자의 역량에 따라 최적의 성능 확보, 반대로 치명적 오류 생산 가능성 있음
132+
133+
### 매니지드 언어
134+
→ 개발자가 명시적으로 메모리 할당하고 해제 불가
135+
136+
→ 더 이상 사용하지 않는 메모리의 해제는 가비지 콜렉터 수행
137+
138+
→ 일정한 생산성 확보, 성능 어느정도 손실 감수
139+
140+
### 식별자 네이밍 규칙
141+
→ 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함
142+
143+
→ 숫자 시작 불가
144+
145+
→ 특수문자 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)로 시작 가능
146+
147+
→ 예약어 사용불가
148+
149+
→ 유니코드 허용 (ES5): 한글 일본어 사용 가능하지만 권장X
150+
151+
→ 대소문자 구별
152+
153+
→ 변수 존재 목적을 쉽게 이해할 수 있도록 의미 표현
154+
155+
156+
### 네이밍 컨벤션
157+
158+
→ 카멜 케이스 (camelCase)
159+
160+
→ 스네이크 케이스 (snake_case)
161+
162+
→ 파스칼 케이스 (PascalCase)
163+
164+
→ 헝가리언 케이스 (typeHungarianCase)
165+
166+
``` javascript
167+
var strFirstName;
168+
var $elem = document.getElementById('myId'); // DOM 노드
169+
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블
170+
```
171+
### 식별자
172+
173+
→ 프로그래밍 언어에서 사용되고 있거나 사용될 예정 단어
174+
175+
176+
177+
### Vocabulary
178+
→ 리터럴(literal)
179+
180+
→ 연산자(operator)
181+
182+
→ 표현식(expression)
183+
184+
→ 평가(evaluation)
185+
186+
→ 파싱(parsing)
187+
188+
→ 피연산자(operand)

0 commit comments

Comments
 (0)