모던 자바스크립트 Depp Dive 공부 1일차

프로그래밍이란?

문제 해결을 위해서는 문제 상황의 복잡함을 단순하게 분해(Decomposition)하고 자료를 정리하고 구분(modeling)해야하며 순서에 맞게 행위를 배열해야한다.

컴퓨터는 0과1밖에 모르기 때문에 0과 1을 이용해서 직접 프로그램을 작성하기에는 어려운 점이 있다.

그래서 프로그래밍 언어를 사용해서 프로그램을 작성한 후 그것을 컴퓨터가 이해할 수 있도록 변환을 하는 일종의 번역기를 통해서 기계어로 컴퓨터에게 전달해야한다. (컴파일러 or 인터프리터)

 

자바스크립트는 우선 인터프리터 언어이다. 

컴파일러 언어와 인터프리터 언어의 차이는 무엇이 있을까?? 

(대표적으로 C언어는 컴파일러언어, 자바스크립트는 인터프리터언어이다.)

컴파일러언어	인터프리터언어
코드가 실행되기 전 단계에 소스 코드 전체를 한번에 머신코드로 변환 후 실행하기에 실행속도가 빠르다.	코드가 실행하는 단계인 런타임에 문 단위로 한줄씩 중간 코드인 바이트 코드로 변환 후 실행하기에 실행속도가 상대적으로 느리다.
실행파일을 생성한다.	실행 파일을 생성하지 않는다.
컴파일 단계와 실행 단계가 분리된다. (.exe파일)	인터프리터 단계와 실행단계가 분리되어 있지 않다.
컴파일은 단 한번만 하면 된다.	한줄씩 바이트코드로 변환하고 즉시 실행한다.
컴파일과 실행단계가 분리되어 있어 코드 속도가 빠르다.	코드 실행될때마다 인터프리터 과정을 반복 수행하기에 속도가 상대적으로 느리다.

프로그래밍 언어는 구문(Syntax)와 의미(Semantics)의 조합으로 표현된다.

ex)

const number = 'hello'; // 문법적으로(Syntax)는 맞는 코드이지만, 의미론적(Semantic)으로는 맞지 않는 코드 
console.log(number * number);

 

렌더링이란?

- HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것.

- 때로는 서버에서 데이터를 HTML로 변환해서 브라우저애게 전달하는 과정(Server Side Rendering)을 가리키기도 한다.

 

AJAX (Asynchronous Javascript and XML)

- AJAX가 나타나기 전에는 서버에 있는 데이터를 가져와서 화면을 바꾸기 위해서는 페이지가 새로고침이 되는 현상이 있어서 깜빡임 현상이 있었다. 또한, 하나의 데이터를 바꾸기 위해서 새로운 HTML을 만들어서 뿌려야하는 불필요한 과정을 거치기도 했었다.

하지만 AJAX가 나와서 자바스크립트를 이용해서 서버와 브라우저 사이의 비동기 방식의 데이터를 교환을 할 수 있게 되었고, 사용자 경험(User Experience)가 좋아지게 되었다. 

ex) 페이스북 좋아요를 누르는데, 내가 보던 페이지가 새로고침이 되었다고 상상해보면 도움이 될 것 같다.

 

구글에서는 이 AJAX를 이용해서 구글 맵을 만들었다. 정말 깔끔하고 매끄럽게 움직인다.

 

모든 브라우저는 자바스크립트를 해석하고 실행가능하게 하는 자바스크립트 엔진을 내장하는 중이다. (구글의 V8엔진)

구글은 V8엔진을 2008년에 만들었고 이로인해 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동하게 되면서 프론트엔드의 영역이 커지게 되었다.

 

 

브라우저를 열게 되면 개발자 도구를 열 수 있다. (Mac 기준 command + option + i , 또는 우측 클릭 후 검사 누르기)

 

개발자 도구 탭

각각마다 기능이 다르다.

 

- Elements 탭에서는 로딩된 웹페에지의 DOM, CSS를 확인하고 수정해볼 수 있다. 실제로 코드가 수정 되는 것은 아니지만, 그래도 내가 의도한 대로 렌더링 되었는지 확인할 때 편리하다.

- Console탭은 로딩된 웹페이지의 에러를 확인할 수 있으며, 프로그램 내부에서 작성한 console.log 메서드의 실행 결과를 확인해서 데이터르 확인할 수 있다.

- Sources탭을 이용하면 코드 디버깅이 가능하다.

- Network탭을 이용해서 네트워크 요청 정보와 성능 확인이 가능하다.

- Application탭을 이용해서 웹 스토리지, 세션, 쿠키 확인 및 관리가 가능하다.

 

 

REPL( Read Eval Print Loop)

 

Read(입력)

Eval(평가)

Print(출력)

Loop(반복)

개발 시에 코드를 즉시 테스트할 수 있어서 짧은 구문을 테스트할 때에 유리하다. 개발자 도구 탭에서 Console 또한 내가 입력한 대로 바로바로 계산을 해서 결과가 도출이 된다. console탭에서 1+1 하고 엔터를 치면 2라고 나올 것이다.

또한 Node.js가 설치가 되어 있다면 terminal을 켜서 node라는 명령어를 입력해주면 repl 모드로 들어가게 된다 ctrl + c로 빠져나올 수 있다.

 

 

모듈이란?

애플리케이션을 구성하는 개별적인 요소, 자바스크립트는 모듈을 지원하지 않았었기에 만들기 위한 노력이 많이 있엇다.

CommonJS, AMD(Asynchronous Moudle Definition) 등이 대표적이다. 

CommonJS는 동기적인 방식이고, Node.js는 CommonJS 방식을 채택하여 사용하고 있다. 

 

npm (node package manager)

 

module을 패키지화해서 올려놓은 곳 install을 이용해서 원하는 패키지를 설치할 수 있다.

=> npm install <package_name> 

 

설치 구역은 두가지로 나뉘게 된다. 

1. 지역 설치 (해당 프로젝트 내의 최상위 폴더의 node_module 폴더에 설치

2. 전역 설치 (맥북 기준 /usr/local/lib/node_module)에 설치

 

npm install <package_name>@1.0.0 처럼 버전을 명시해서 원하는 버전을 설치할 수 있다.

여기에서 버전은 유의적 버전이다.(Semantic-versioning)

1.0.1이라고 한다면

맨앞의 1은 Major 버전을 의미한다. 

중간에 0은 Minor 버전을 의미한다.

마지막 1은 Patch 버전을 의미한다.

 

그리고 또한 npm에서 패키지를 다운받을 때 버전을 명시하게 된다면 package.json에 가면 

 

dependencies 또는 devdependencies에 패키지명과 함께 버전명이 같이 나오게 되는데,

여기에서 ^(캐럿)이 앞에 붙어 있을 수 있다. 이거는 다음에 설치시 최신 버전의 마이너 버전범위에서 업데이트를 허용한다는 의미이다.

그래서 업데이트 하게 되면 기존의 로직이 동작하지 않을 수 있으니 캐럿은 지우는 것이 좋을 수 있다고 생각한다.

 

~(틸트)도 볼 수 있는데 이거는 패치버전범위에서 업데이트를 허용한다는 의미이다. 

 

 

Node를 다운받을 때 LTS 버전이 있는데 이것은 Long Terms Support라는 의미로 장기적으로 안정된 지원을 보장한다는 의미이므로 프로덕션을 배포하기 위해서는 이것을 사용하는 것이 좋을 것 같다. 하지만 학습 중이라면 current버전을 다운 받아서 최신 기능도 써보면 좋을 것 같다.