2주차 - 1주차 이론 복습

NodeJS란?

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다.
Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다.
Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다.

노드js 특징

자바스크립트 어플리케이션 실행 가능 (자바스크립트 런타임)
서버 어플리케이션 실행 가능
이벤트 기반
논블로킹 I/O
싱글 스레드

프로세스

Ctrl+Alt+Del 작업관리자
동시성 : 프로세서의 Context Switching
병렬성 : 멀티코어

스레드

웹브라우저 실행 (하나의 프로세스)
브라우저를 실행하면서 검색도 해야되고 게임 프로그램도 다운받아야되고...
하나의 프로세스 안에 스레드는 여러개 (물론 하나일 수도 있음)

스레드 단점

프로세스 안에서 공유되는 변수에 동시에 손을 대면 Error 발생
누를 때마다 숫자가 1씩 증가하는 버튼이 2개가 있습니다.
스레드 둘이 이 버튼을 10번씩 누르면 결과물은 20이 나와야합니다.
하지만 그보다 적게 나옵니다.
둘이 동시에 누르는 경우는 숫자가 1만큼 올라가기 때문입니다.
스레드는 스레드를 생각한 코드 짜기도, 디버깅해서 오류를 찾아내는 것도 어렵습니다.
이러한 어려움을 더 쉽고 안전하게 하도록 도구나 프로그래밍 방식들이 많이 지원되고 있습니다.
(Closure, Lambda, Actor, Functional Programming ... )

예전 자바스크립트 한계 (모듈기능 지원 안함)

ES6 : Client Side 모듈기능 추가 (import, export)
하지만, 대부분의 브라우저 ES6 모듈기능 지원 안함
노드js의 범용적 활용을 위해선 꼭 해결되어야했던 모듈기능
CommonJS 와 AMD(Asynchronous Module Definition) 중 CommonJS 채택
CommonJS는 독립적인 실행 영억(Scope)을 가진다.

예전 자바스크립트 한계 (function scope)

script tag - 동일한 scope

                    
                    <script src="js/script.js"></script>
                    <script src="js/script1.js"></script>
                    <script src="js/script2.js"></script>
                    
                

function scope

                    
                        function scopeTest(){
                            var is = true;
                            if(is){
                                var is = false;
                            }
                            for(var i=0; i<=5; i++){
                                var inFor = i;
                            }
                            console.log(inFor); // 출력되는 값은?
                            console.log(is);
                        }
                    
                

                    
                        var es = [];
                        for(var i=0; i<10; i++){
                            es[i] = function(){
                                console.log("ECMAScript is ES" + i);
                            };
                        }
                        es[6](); // 출력되는 값은?
                    
                

                    
                        var es = [];
                        for(var i=0; i<10; i++){
                            (function(i){
                                es[i] = function(){
                                    console.log("ECMAScript is ES" + i);
                                };
                            })(i);
                        }
                        es[6]();
                    
                

block scope

                    
                        var es = [];
                        for(let i=0; i<10; i++){
                            es[i] = function(){
                                console.log("ECMAScript is ES" + i);
                            };
                        }
                        es[6]();
                    
                

노드js 서버로서의 특징

장점

멀티 스레드 방식에 비해 컴퓨터 자원 적게 사용
I/O가 많은 작업에 적합 (libuv 라이브러리 - 스레드 하나여도 많은 수의 I/O 감당)
멀티 스레드보다 코딩이 쉬움. 진입장벽이 낮음
개발 언어로 자바스크립트 사용 (하나의 언어로 웹사이트 개발 가능) - 생산성 증가
자바스크립트를 사용하기 때문에 XML 대신 JSON 데이터 사용 가능

단점

CPU 코어 하나밖에 사용 못함
CPU 부하가 큰 작업에는 부적합
싱글 스레드이다보니 하나뿐인 스레드가 Error로 멈추지 않도록 관리 필수
어중간한 성능

노드js 서버로 사용

개수는 많지만 크기는 작은 데이터를 실시간으로 주고받는데 적합함
(네트워크나 데이터베이스, 디스크 작업 같은 I/O에 특화)
실시간 채팅 어플리케이션, 주식차트, JSON 데이터를 제공하는 API 서버 등에 활용

노드js와는 안 어울리는 서버

대규모 데이터를 처리하는 CPU를 많이 사용하는 서버
(이를 보완하기 위해 AWS Lambda, Google Cloud Functions 같은 서비스에서 노드js로 CPU를 많이 사용하는 작업 처리를 지원함)

노드js 서버외의 사용

노드js 웹프레임워크 React, Vue, Angular
노드js 데스크탑 개발도구 Electron.js

Electron.js로 개발된 프로그램

Atom, Slack, Discord, Vs Code, ...

MVC 패턴

MVC 프레임워크

PHP - 라라벨
자바 - 스프링
Ruby - Ruby on Rails
C# - .Net Core
Scala(함수형 언어) - Play

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

재료만 주느냐, 그 재료로 만들어진 골격을 주느냐의 차이입니다.
EX) jQuery library, bootstrap framework

Angular, React, Vue - SPA(싱글 페이지 어플리케이션) 프레임워크

기존 MVC 패턴의 아쉬운점 1

한 부분 데이터가 바뀌었는데 페이지 전체가 리붓됨
다행히 ajax란 기술이 나온 후로는 http 통신으로 데이터를 전송하고 결과를 받아와서 이런 단점을 보완할 수 있었음
하지만 이걸 일일이 프로그래밍해야된다는 불편함이 있음

기존 MVC 패턴의 아쉬운점 2

스마트폰 - 모바일용 웹사이트 개발 필요성
반응형이 아닐 경우 PC용 웹사이트, 모바일용 웹사이트 따로 개발
iOS 또는 안드로이드 앱은 자체적인 소프트웨어와 시스템이 있어서 서버로부터 데이터만 전송받으면 화면이 보여질 수 있음

자바스크립트 프레임워크 등장

웹에서도 iOS/안드로이드 앱과 같은 기능이 가능하다면, 즉 서버에서 데이터만 보내줘도 그걸 브라우저에서 HTML, CSS, JS로 랜더링해낼 수 있다면,
이제 서버는 어디서 정보를 요청하든 동일한 작업을 수행해서 데이터를 전송하면 될겁니다.
서버 개발자가 그런 일에만 집중할 수 있게 되는 겁니다.
이런 필요성에 의해 등장한 것이 SPA 프레임워크

SPA 프레임워크 배포방식

배포할 땐 빌드를 통해 브라우저가 읽을 수 있는 JS 변환

SPA 프레임워크 특징

Angular

Google 프레임워크 - 안정적이고 탄탄함. 단, 무겁고 배우기 어려움

Vue

Evan You 라는 개인이 개발 (프레임워크와 라이브러리 중간)
배우기 쉬움, 코드가 깔끔해 나머지 둘에 비해 후발 주자임에도 불구, 빠른 속도로 성장

React

FaceBook 라이브러리 (유연함이 강점, 막강한 커뮤니티와 자료 구축)