JavaScript 수업 | 1~5장

OT

• 예습 > 복습 > 과제 
• 공부는 남 보여주기 식이 아니라, 본인 공부를 해야함.
• 목표는 좋은 개발자가 되는 것
  • 좋은 개발자란
  • 경력: 팀을 이끌어갈 수 있는 개발자. 가리키고 지도할 수 있어야함
  • 신입: 성장 가능성이 높은 사람. 가장 좋은 기본기는 태도다. 
• 코드를 작성하고, 작동된다면, 왜 되는지 설명할 수 있어야함!!
• 안되면 왜 안되는지 설명해야해
• 처음에 코드짤 때 시간이 걸리더라도 미래를 위해 투자해야함!
  • 코드 빨리치는게 아니라, 유지보수가 가능한 좋은 코드를 만들 수 있어야해
  • 좋은 코드를 만들기 위해 좋은 코드를 보는 눈이 생겨야함!
• 좋은 태도는...
  • 피드백(잔소리)을 받았을 때 자기반성을 하는 자세
  • 피드백에 겸손하게 받아드리는 자세
• 실력은 계단식으로 늘어난다.
  • 3년동안 성장했던 사람들은 계속 성장한다.

 

 

---

 

1장 프로그래밍

프로그래밍은 컴퓨터와의 커뮤니케이션이다.

 

어떤 문제를 해결할 때 아이디어를 떠올려야함.

복잡한 문제를 단순한 단위로 분해하고 순서에 맞게 배열해야함.

 

좋은 코드는...

유지보수가 가능해야함 => 인간이 이해하기 쉬워야함 => 가독성이 좋어야함.

절차형 : 조건문, 반복문은 가독성이 떨어짐!

선언형 : 위에서 아래로, 가독성이 좋음 ex) react

 

 

 

---

 

2장 자바스크립트

https://poiemaweb.com/js-introduction

Introduction | PoiemaWeb

 

 

2.1 자바스크립트의 탄생

• 자바스크립트를 만든 사람: 브렌던 아이크(Brendan Eich)
• 자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도

초기에 웹은

• HTML, HTTP 
  • 팀 버너스리가 문서를 편하게 관리하기 위해서 만든 것!
• CSS
  • 약간의 스타일링을 넣기 시작
• JavaScript 는 웹 브라우저에서 간단한 처리만하도록 웬만해서 에러없이 실행되게 만들었음.
  • 자바스크립트 엔진 내에서 암묵적으로 처리해주는 기능(magic)이 많다.

 

하지만 이제 자바스크립트는 프론트엔드와 백엔드에서 둘다 사용하는 범용 프로그래밍 언어가 되었다.

따라서 자바스크립트의 태생적 특징때문에 암묵적인 처리 기능이 문제를 일으키게 된다.

 

ex) 1 == "1" ? 

• C 언어 : Error!
• JavaScript : true
  • 1 === "1" 는 false

ex) a = 1 를 문자열로 바꾸는 방법 3가지

• String(a)
• a+''
• a.toString

 

2.2 자바스크립트의 표준화

https://poiemaweb.com/js-introduction#2-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%8C%8C%ED%8E%B8%ED%99%94%EC%99%80-%ED%91%9C%EC%A4%80%ED%99%94

Introduction | PoiemaWeb

• ES5
• ES6 (ECMAScript 2015) 을 기점으로 범용 프로그래밍 언어로 거듭난다
  • 변수 선언 let, const가 탄생!
• ESnext : 아직 버전이 출시 되지 않았지만, 크롬같은 브라우저는 미리 대응해서 환경을 만들어놓음.

ES6이상의 버전으로 코드를 작성하고, Babel로 ES5이하의 버전을 해결하게됨.

 

* 런타임: 코드가 동작하는 시점, 런타임 에러는 코드를 실행할 때 에러가 발견되는 것. 매우 치명적임

 

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

코드 독해가 되어야 코드 작성이 가능하다.

자바스크립트는 암묵적인 처리를 많이하기 때문에 독해가 어려워지고, 코드 구현 또한 어려워진다.

 

 

 

2.3 자바스크립트 성장의 역사

2.3.1 AJAX

Asynchronous JavaSript and XML

비동기식 => single thread라서 가능함.

 

예) Todo 앱

처음에 서버의 데이터베이스에서 데이터를 받아옴.

만약 서버에 문제가 생겨 데이터가 3초뒤에 도착한다면?

데이터를 받아오기 전에 미리 브라우저에서 렌더링을 진행하면 좋다.

이것이 비동기식!

 

AJAX를 이용한 Google Maps의 출시!

 

• 데스크탑 애플리케이션/ 스탠드 얼론 : 인스톨러를 다운받고 앱을 설치함
  • 단점: 설치와 업데이트라는 과정을 거쳐야함. => 사용자가 업데이트를 안함
  • 불법복제도 가능...
• 웹 애플리케이션
  • 장점: 업데이트를 안해도 됨. 항상 업데이트 된 상태로 이용가능!
  • 불법 복제도 불가. 유지보수도 편함
  • 브라우저 엔진과 자바스크립트 엔진이 엄청 빨라야 가능함.
  • V8등장!! => 크롬이 탑재함.

 

* 궁금한점: AJAX은 SPA할 때 사용되는 것인가? 그렇다면 요즘엔 SSR을 한다던데 AJAX 은 쓰지 않는건가?

 

 

 

2.3.4 Node.js

자바스크립트는 브라우저에서만 동작 가능했음.

node.js는 V8 자바스크립트 엔진을 브라우저 이외의 환경에서 동작할 수 있게,

자바스크립트를 브라우저에서 탈출할 수 있게함.

 

이제 범용적인 프로그래밍 언어로 관심받기 시작함.

 

브라우저(클라이언트)에서는 자바스크립트만 사용할 수 있음...

node.js로 인해 프런트엔드뿐 아니라 백엔드 영역에서 자바스크립트를 사용할 수 있다는 장점이 생김.

 

 

2.3.5 SPA

SPA = 클라이언트 사이드 렌더링

근데 요즘엔 SSR를 하려고 하는 추세임...

(SSR: 서버에서 HTML을 만들어서 클라이언트에게 주는 것)

 

 

• CBD 방법론 : Component based development

웹 애플리케이션을 만들기 위해서 HTML, CSS, JS를 사용해야함

CSS는 HTML없으면 무용지물임, JS도 HTML이 없으면 무용지물!

 

예전엔 inline으로 CSS, JS 쓰지말라! 파일을 분할해라. 라고 생각함

 

HTML, CSS, JS 세개가 있어야 view를 만들수 있는데...

최근엔 하나의 부품을 만들어야 한다고 생각하여, HTML, CSS, JS 세개를 하나로 뭉쳐서 생각함

재사용성!!

변수는 값을, 함수는 로직을, 객체는 값과 로직을 함께 재사용하기 위해서...

Component는 view를 재사용하기 위해서!

쉽지않은 얘기임...

 

 

2.4 자바스크립트와 ECMAScript

 

• ECMAScript : 자바스크립트의 사양을 말할 때 언급됨
  • Ecma Internation이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어
  • https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
  • ECMAScript: Node.js와 Client-side APIs 의 중심 뼈대를 이룬다.

 

2.5 자바스크립트의 특징

 

*인터프리터 언어, 컴파일러 언어 차이점에대해 발표시킬것임, 강의는 아니고 10~15분 정도 설명해야함

 

 

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어!

*선언형은 함수형 보다 큰 개념임

 

코드는 가독성 적인 측면에서 접근해야함...

명령형 : for 문. 가독성을 해치는 근본!

 

 

2.6 ES6 브라우저

 

Babel을 사용하기 때문에 최신 문법으로 개발 해도 됨

 

 

---

 

ESLint 환경설정

 

• ESlint 를 root에 깔고 그 하위에서 코딩을 진행해야함.

https://poiemaweb.com/eslint

ESLint | PoiemaWeb

 

ex) let a=1; 

컨벤션에 문제!!

1. 띄어쓰기 안함

2. const를 써야함

3. a를 사용하지 않음

 

---

 

4. 변수

https://poiemaweb.com/js-syntax-basics#1-%EB%B3%80%EC%88%98

4.1 변수란

하나의 값을 저장하기 위해 확보한 메모리 공간 자체

 

메모리: 값들을 저장하기 위한 저장소

값은 8비트의 메모리셀에 저장됨.

8비트보다 작은 값은 존재하지 않음.

 

*왜 8비트인가? + 아스키코드, 유니코드 함께 조사

 

10 + 20

10 : 리터럴 => 값을 만들어내는 표기법, 사람도 이해할 수 있는 표기법을 사용함.

 

사람: 10, 20, +을 해석한 다음, 덧셈을 하기위해 10, 20을 기억함. 그 다음 덧셈을 수행해 그 결과 30을 기억함.

 

입력, 프로세스, 출력 (IPO)이 존재함

 

함수도 IPO모델을 모방한 것임.

 

약간 복잡한 것은 상태가 추가됨

비순서함수 : 외부 상태에 의존함. ex) 외부에 x=100이 있을 때, 1+2+x를 반환하는 함수

 

 

컴퓨터의 순서

• 자바스크립트 엔진이 OS에게 10, 20을 저장해달라고 부탁함 (메모리를 확보하는 것은 OS의 역할임)
• CPU의 레지스터에 10, 20를 가져온 다음 덧셈을 수행함
• 그 다음 메모리에 계산 결과 30을 저장함.

자바스크립트 엔진은 메모리의 주소를 알려주지 않는다. 알려주면 실수함!! 실수하면 치명적임..

따라서 변수를 사용하게 됨.

 

변수는 선언한다.

변수의 존재를 자바스크립트 엔진에게 알린다.

변수를 선언함으로, 메모리 공간에 일부분을 확보하라는 명령을 내림.

 

원래 C에선 int n; 을 하면 4바이트를 확보하면 되지만...

자바스크립트는 변수가 선언 되면, undefined가 들어갈 공간을 확보함.

undefined는 브라우저마다 몇바이트를 할당하지 다르고, 그냥 모른다고 하면 됨.

 

변수 이름(식별자)과 메모리 주소와 1:1 맵핑됨!

식별자는 메모리 공간안의 주소를 알아낼 수 있는 것을 뜻함.

 

함수형 언어에서는 함수는 값이다.

함수는 객체로 메모리 안에 들어있고, 함수 이름도 식별자다.

 

var a; // 선언.
console.log(a); // 참조. a 메모리 공간에 접근하여 읽음

 

식별자는 스코프 내에서 유니크 해야함!

ex) 파일명은 해당 경로 안에서 유니크해야해...

 

메모리 공간을 확보한다. = allocation

확보: 여긴 내가 쓸거야. 다른 애들은 쓰지말라고 lock을 걸어둠

 

- 매니지드 언어: C언어.

UNIX OS를 만들기 위해서 만들어진 언어임.

메모리를 직접 잡고 풀 수 있게 만들었음.

 

- 언매니지드 언어: 자바스크립트

가비지 컬랙터가 메모리를 잡고 풀어줌

* 너무 깊게 파진 말고.. 가비지 컬랙터 조사해오기

변수에도 라이프사이클이 있다.

 

var a; // 선언.
console.log(a); // 참조. a 메모리 공간에 접근하여 읽음
a = 1; // 할당
var b = a; // 1

모든 버그는 명확하지 않은 곳에서 나옴.

단순한 로직을 사용해야 버그가 발생하지 않음.

이 값은 변하지 않는다!! 고 설정하면, b의 값이 바뀌는 일이 발생하지 않는다...

원시값 : 불변

 

var a; // 선언.
a = 1; // 할당
var b = a; // 1

 

 

var a=1; // 초기화

 

개발자가 변수를 초기화함. 

자바스크립트 엔진은 위의 코드를 아래와 같이 두 개로 나눠서 실행함

var a; // 선언
a = 1; // 할당

선언은 런타임 이전에 (호이스팅)

할당은 런타임 때

 

 

 

console.log(a); // undefined
var a = 1; // var a; a = 1;
console.log(a); // 1

var a; 가 코드 상단으로 호이스팅된다. 먼저 실행된다는 뜻.

만약 undefined를 넣어놓지 않는다면, 할당 되기 전에 사용하면 쓰레기 값이 출력될 수 있음.

따라서 undefined를 넣어놔서 사용자를 배려한 것

 

let, const는 선언문 이전에 참조하면 error임!

let, const는 호이스팅은 되지만 안되는 것 처럼 행동함.

 

호이스팅이란.

할당 문 이후에 참조하면, a값에 1이 들어있음.

할당 문 이전에 참조하면, a값에 undefined가 들어있음