[1주차 개념 스터디]

💡Node.js란 무엇인가

Node.js란 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다. 애초에 자바스크립트 런타임이 브라우저 밖에 존재하질 않았지만, Node.js는 브라우저 없이도 자바스크립트가 확장될 수 있게 해주었다. 런타임이란 프로그래밍언어가 구동되는 환경을 얘기하는 것으로 Node.js는 REPL(Read, Eval, Print, Loop)을 통해서 런타임을 제공한다. 이러한 REPL은 Babel REPL의 경우 웹에서 제공해하고, Node.js에서는 윈도우의 CMD, 맥의 터미널 등등에서 제공을 해준다.

정확히 표현하자면, Node.js는 자바스크립트를 다루는 것이 아니라 자바스크립트의 Spec을 사용하는 ECMAScript를 다룬다. 자바스크립트는 독립적인 언어가 아니라 스크립트 언어로써 웹 브라우저 안에서만 동작할 수 있기 때문에 client 개발을 위한 용도로만 국한되었지만, Node.js는 터미널 프로그램 등에서 브라우저 없이도 실행할 수 있어 파일 시스템을 이용할 수도 있고, 서버를 만들거나 크롤링을 할 수도 있다. 즉, 자바스크립트는 client를 다룰 수 있지만 Node.js는 불가능 하며, 반대로 Node.js는 server를 다룰 수 있지만 자바스크립트는 불가능하다.

💡NPM이란 무엇인가

Node Pacackage Manager. 이하 npm은 이름 그대로 노드 패키지 매니저이다. Node.js 개발자들이 패키지 설치, 삭제, 업그레이드, 의존성 관리 등을 쉽게 할 수 있게 도와주는 도구가 npm이다. 세상에는 많은 자바스크립트 프로그래머들이 있고, 그들이 유용한 자바스크립트 패키지들을 이미 만들어 두었고, 그런 코드들이 공개되어 있는 것이 바로 npm이다. npm은 세계 최대 규모의 패키지들을 보유하고 있다. 이러한 패키지들은 노드의 생태계를 더욱 견고하게 만들었다.

• npm에 업로드된 노드 모듈을 패키지라고 부른다. 모듈이 다른 모듈을 사용할 수 있는 것처럼, 패키지도 다른 패키지를 사용할 수 있다. 이러한 관계를 의존 관계라고 한다.
• 이와 별개로 yarn이라는 패키지 매니저가 있다. yarn은 facebook진영에서 만든 것으로 React나 React Native와 같은 facebook 진영의 framework를 사용할 때 종종 볼 수 있다. yarn은 npm서버에 비해 속도가 빠르고 사용법이 npm과 크게 다르지 않아 npm을 사용할 줄 안다면 yarn 또한 쉽게 사용할 수 있다. npm과 yarn 중 어떤 것을 사용할지는 여러분의 선택에 달렸지만, 양쪽 모두 장단점을 가지고 있다.

패키지 설치 및 업데이트

npm install <packageName>
npm i <packageName>

의존성 관리를 위해서는 다음의 명령어를 실행하여 packages.json 파일을 생성해줘야 한다

npm init

위의 명령어를 통해 packages.json 파일을 생성한 후 파일에 들어가보면 사용하고 있는 패키지들의 명세가 작성되어 있다. 프로젝트를 다른 사람에게 공유하고 싶다면 package.json을 공유하여 개발 환경을 빠르게 구축할 수 있다. 이 때 dependencies가 바로 프로젝트가 의존하고 있는 외부 모듈들이 정의되는 속성이다.

{ 
"name": "node", 
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"dependencies": { "moment": "^2.20.1" }, 
"devDependencies": {}, "
scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, 
"author": "", 
"license": "ISC" 
}

출처: https://dololak.tistory.com/98 [코끼리를 냉장고에 넣는 방법]

✋ 정적타입 언어란?

정적타입 언어(Statically typed language)는 컴파일 시 변수의 타입이 결정되는 언어를 말한다.
따라서, 프로그래머가 변수에 들어갈 값의 형태에 따라 직접 변수의 타입을 명시해줘야 한다.

String name ="tuna"
int num = 123

정적언어라는 것은 위에서 언급한 '타입' 즉 자료형을 컴파일 시에 결정하는 것이다. 컴파일 시에 자료형에 맞지 않는 값이 들어있으면 컴파일 에러가 발생하게 된다. 정적타입의 언어로는 Java, C, C++, C#, Scala, Fortran, Haskell, ML, Pascal 등이 있다.

• 장점 :
  타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 높음
  컴파일 시에 미리 타입을 결정하기 때문에 실행속도가 빠름

• 단점 :
  매번 코드 작성시 변수형을 결정해줘야 하는 번거로움이 있음

✋ 동적타입 언어란?

동적타입 언어(Dynamically typed languages)는 컴파일 시 자료형을 정하는 것이 아니라 런타임 시 결정된다.

다음과 같이 타입 없이 변수만 선언하여 값을 지정할 수 있다.

def num = 123 //groovy에서는 타입이 정해지지 않은 변수를 선언할때 def를 사용하게 된다.

num = "일이삼"

위의 예시에서 타입 선언이 없었지만, num이 123 이란 숫자로 선언이 됩니다. 두 번째 줄에 num을 String으로 다시 선언하더라도 타입 에러 없이 컴파일 됩니다. 동적타입 언어로는 Groovy, Python, JavaScript, Ruby, Smalltalk, Lisp, Objective-C, PHP, Prolog 등이 있습니다.

• 장점 :
  런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높음
  컴파일시 타입을 명시해주지 않아도 되기 때문에 빠르게 코드를 작성할 수 있음

• 단점 :
  실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있음

💬Freamework vs Library

-프레임워크란
프레임워크는 뼈대나 기반구조를 뜻하는데, Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공해준다. 그러므로 그러한 뼈대 위에 프로그래머가 코드를 작성하여 Application을 완성시키게 된다. 어느정도 뼈대를 제공해 주기 때문에, 객체 지향 개발을 하면서 일관성 부족 등의 문제를 해결해 준다.

그래서 소프트웨어에서는 프레임워크를 아래와 같이 정의하곤 한다.

소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합

-라이브러리란

Library는 특정 기능에 대한 도구 or 함수들을 모은 집합이다.. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것이다.

Library는 프로그래머라면 누구나 한번쯤은 써봤을 것이며, 스스로 써보지 않았다라고 생각하는 사람도 라이브러리가 무엇인지 몰라서 그렇게 얘기하는 것일 뿐, 자기도 모르게 써본 적이 있을 것이다. Library 역시도 아래와 같이 간단하게 정의할 수 있다.

단순 활용이 가능한 도구들의 집합

언뜻 보면 Framework와 Library 모두 개발자에게 필요한 것들을 모아둔 것이라고 착각할 수 있지만 큰 차이가 존재한다.

프레임워크와 라이브러리의 차이는 바로 프레임워크에는 제어의 역전이 적용되어 있다는 것이다.

'제어의 역전'이란?

• 제어의 역전(Inversion Of Control)이란 어떠한 일을 하도록 만들어진 프레임워크에 제어의 권한을 넘김으로써 클라이언트 코드가 신경서야 할 것을 줄이는 전략입니다. 일반적으로 우리는 프로젝트를 생성하고 Main함수를 만들어서 시작지점을 형성합니다. 그리고 Main 함수에서 프로그램의 흐름을 정하는 것은 프로그래머의 몫으로 우리가 어떠한 순서를 부여하느냐에 따라서 흐름을 제어하는 것이 일반적인 사고입니다.
• 하지만 여기서 프레임워크는 일반적인 사고와 반대되는 모습을 보여주는데 실행의 흐름을 프레임워크 자체가 가지고 있어서 우리의 코드를 프레임워크안에 넣어서 개발을 진행해야 합니다. 실제로 Maven과 같은 프레임워크의 프로젝트를 생성해보면 어느정도 뼈대를 만들어서 그 안에 필요에 따라 우리의 코드를 넣습니다. 일반적으로 프로그래머가 가지고 있어야하는 제어의 권한을 프레임워크에게 주었기 때문에 우리는 이를 제어의 역전이라고 말합니다.

출처: https://mangkyu.tistory.com/4 [MangKyu's Diary]

💡REST

• REST란 "Representational State Transfer"의 약자로써, 자원을 표현으로 구분하여 해당 자원의 상태를 주고받는 것을 의미한다. 즉 웹의 기술과 HTTP 프로토콜을 활용한 아키텍쳐 스타일의 일종이다. HTTP URI를 통해 자원을 명시하고, HTTP Method(POST,GET,PUT,DELETE)를 통해 해당 자원에 대한 CRUD Operation을 명시하는 것을 말한다. REST는 자원 기반의 구조 설계의 중심에 Resource가 있고, HTTP Method를 통해 Resource를 처리하도록 설계된다.
• REST API란 REST를 기반으로 서비스 API를 구현한 것이다. REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어인 자바, C#, 웹 등을 이용해 클라이언트, 서버를 구현할 수 있다.
• RESTful이란 일반적으로 REST라는 아키텍쳐를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어로, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다. RESTful의 목적은 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것으로, 근본적인 목적이 성능 향상에 있는 것이 아니라 일관적인 컨벤션을 통한 API의 이해도 및 호환성을 높이는 것이 주 동기이니, 성능이 중요한 상황에서는 굳이 RESTful한 API를 구현할 필요는 없다.

👀자바스크립트 프론트엔드 프레임워크 및 라이브러리

자바스크립트 기반 웹 프론트엔드 프레임워크 중 대중적으로 가장 많이 알려지고 사랑받고 있는 Vue.js, React, Angular가 무엇이고, 어떤 차이가 있는지 비교해본다.

• 기준
• 운영하는 사람이나 업체는 어떤 곳인지
• Virtual Dom 지원 유무
• SSR(Server Side Rendering)
• 기타 특징
• 이미 유명한 프레임워크들이라 커뮤니티는 대체로 잘 갖추어져있어서 따로 설명하지 않는다.

React

라이브러리이며 페이스북의 개발자 Jordan Walke가 처음 만들었다. 페이스북에서 지원하며 공동체의 의해 유지보수 된다.

• Virtual Dom 지원
• SSR - Next.js
• JSX(JavaScritp + XML)
• React Native (앱 개발까지 가능하게 해준다)
• 라이브러리이지만 컴포넌트를 사용한다면, 프레임워크처럼 규칙을 지켜야한다.

장점은 Virtual Dom이다. Dom 트리를 추상화하여 자바스크립트 객체로 만들어 두고 변경되는 부분은 virtual dom에서 처리하여 성능을 높혔다.
SPA(Single Page Application) 방식으로 진행한다면 검색엔진 노출(SEO : Search Engine Optimization)에 관련된 문제를 생각 했을 때 SSR을 염두해 둘 수 밖에 없었는데 Next.js를 사용하여 해결 할 수 있다. 그리고 UI를 구성하는 개별적인 뷰 단위인 컴포넌트 단위로 작성하여 생산성과 유지보수에 도움이 된다. JSX(자바스크립트 확장 문법)을 사용하여 컴포넌트를 생성할 수 있다. React Native를 이용해서 앱 개발까지 이어지는 부분이 엄청 큰 메리트가 있지 않을까, 그래서 더욱 사랑 받는 것이라 생가한다.

Angular

타입스크립트 기반 오픈소스 프레임워크이며 구글 앵귤러팀이 만들고, 구글에서 지원하며 공동체에 의해 유지보수 중에 있다.

• 양방향 바인딩 지원
• TypeScript 기반
• RxJs(Reactive Extensions For JavaScript) : 스트림을 통한 비동기 처리 방식 지원
• 가장 체계적이고 잘 정리되어있는 문서와 튜토리얼
• 큰 러닝커브 (배울 것이 많고 어렵다)

라우팅, 상태관리, 폼 유효성 등 필요한 도구를 모아놓은 All In One 프레임워크인 것이 큰 장점이다. 그렇기 때문인지 React와 Vue.js와 비교했을 때 가장 배울 것이 많고 어려운 편이다. 가볍고 빠르게 작업을 해야하는 프로젝트 보다는 큰 프로젝트에 사용하기 적합하다.
TypeScript를 기반으로 하기 때문에 엄격하지만 그만큼 직관적이고 오류를 줄일 수 있지 않을 까 생각한다.
또한 웹사이트가 빠르고 효율적으로 렌더링 되게 설계되어있다. MPA를 구성하기에는 복잡하고, SPA에서는 매우 빠르게 작동한다. 애초에 구글이 SPA를 위해 만든 것이라고 한다.

Vue.js

오픈소스 자바스크립트 프레임워크이며 Google의 전 개발자 Even You가 만들었다. 그를 주축으로 유지보수 중에 있다.

• Virtual Dom 지원
• SSR - Nuxt.js
• 양방향과 단방향의 바인딩 지원
• TypeScript 지원
• NativeScript
• Single File Component
• 작은 러닝커브(학습 및 적응이 빠름)

React의 장점인 Virtual Dom과 Angular의 양방향 바인딩을 가져왔다는 점에서 볼 때 앞으로도 발전을 기대해 볼 만한 프레임워크라고 생각한다.
자바스크립트의 기본 스타일을 적극적으로 적용하고 있어서 학습하고 적응하기 쉽다!
그리고 Single File Component는 .vue 파일에 HTML과 CSS 그리고 Script까지 하나로 묶어서 컴포넌트 단위로 직관적인 구성이 가능하다는 것인데, 개인적으로는 파일 분리를 선호하지만 디자이너나 퍼블리셔와 협업하는 과정에서는 생산성이나 유지보수에 큰 도움이 될 것이다.

출처: https://velog.io/@goblin820/TIL-2-Vue-React-Angular