첫 회사는 React와 Yarn, 두번째 지금 현재의 회사는 Vue와 NPM을 사용한다.

두 개의 프레임워크와 패키지 매니저를 사용해보면서 차이점을 적어 볼려고 한다.

• Node.js는 자바스크립트를 실행시켜주는 엔진이다.
• Node.js를 설치하게되면 자동으로 npx와 NPM이 자동으로 설치된다.
• 해당 프로젝트에 패키지 매니저를 설치하게되면 node_modules 폴더가 생성된다.

📌 자바스크립트 패키지 매니저란?

• 패키지란 npm에 업로드된 노드 모듈을 말한다.
• 하나의 패키지가 다른 패키지를 사용할 경우 의존 관계를 가지기도 한다.
• 패키지를 프로젝트에서 사용는 패키지는 의존성 모듈이라고 불리기도 한다.

NPM에 등록되어 있는 패키지들을 다운로드, 설치, 업데이트 및 관리 등 많은 과정들을 자동화하여 편리하고 안전하게 수행할 수 있도록 해준다.

NPM Yarn은 Node PackageManager이다. 차이점을 찾아보기 위해 구글링을 시도해봤다.

📌 NPM PackageManager

자바스크립트 런타임 환경 Node.js의 '기본 패키지 관리자'이다. 세계의 많은 개발자들이 공유한다.

📌 Yarn PackageManager

Yarn은 2016년 페이스북에서 개발한 페키지 관리자이다. 그 당시 Npm을 이용한 패키지 버전 관리가 어려움이 있었고, 불안정성을 해소하기 위해 개발되었다고 한다.

📌 그래서 Npm과 Yarn의 차이점이 뭐야??

1. 속도

여러개의 의존성 모듈 설치 프로세스 처리하는 방식이 다르다. NPM은 한 번에 하나씩 순차적으로 설치한다. YARN은 동시에 설치를 진행하도록한다. NPM5.0 버전부터는 YARN과 속도 차이가 거의 없다는 견해도 있다.

2. 공유성

다수의 개발자들이 개발에 함께 참여하게되는 상황에서 모든 개발자들이 동일한 개발 환경을 가지는 것이 중요합니다. 이를 위해 package.json파일을 통해 버전을 공유합니다. 하지만 package.json의 범위 지정 방식은 패키지를 가장 최근의 버전의 패키지를 설치하기에 이슈가 발생할 확률이 높습니다. Yarn은 이를 해결하기 위해 yarn.lock 파일을 통해 정확하게 버전 정보를 추적합니다. NPM5.0버전부터는 버전 공유성 이슈를 해결하기 위해서 package-lock.json 파일로 사용하고있는 모든 패키지들의 정확한 버전 정보를 추적할 수 있어 안정성 문제도 해결됐습니다.

3. 보안성

가장 중요한 부분이라고 생각할 수도 있습니다. NPM의 장점으로서 뽑히는 의존성이 있는 패키지들을 포함될 수 있도록 하는 코드를 자동으로 실행합니다. 이는 추후 큰 문제를 야기할 수 있는 가능성이 있습니다. 반면에 Yarn은 yarn.lock 과 package.json 파일에 존재하는 패키지들만 설치를 진행합니다.

그래서 결론은 뭔데???

NPM과 Yarn은 디스크 용량 등 추가적인 차이점이 존재하고 각각의 장단점이 존재하지만, 아직까지는 Yarn이 현업에서 사용하기에는 조금 더 편리한 감이 있는 것 같습니다. NPM도 지속적으로 업데이트를 하고 있어서 Yarn과 차이는 점차 좁혀질 것으로 생각이 듭니다. 이는 앞으로 NPM이냐 Yarn이냐의 선택은 어떤 패키지 매니저가 최적화를 잘해주냐에 달린 것 같다고 조심스럽게 생각해봅니다...

📌 다음 할 일

다음에는 Yarn berry에 대해 조사해봐야 겠다... 사전 조사로는 Yarn berry를 사용하여 zero install을 할 수 있다고 한다.

모든 데이터를 2차원 테이블 형태로 표현한다. 2차원 구조 모델을 기반으로 수평적 구조로 구조를 사용한다. 데이터 중복을 최소화 하며, 일관성, 무결성, 보안성을 유지합니다. 데이블 간의 관계를 가질 수 있다. 정규화를 통해 기본키, 외래키 등을 사용하여 테이블들은 관계를 맺고 여러개의 테이블에 분산됩니다. 정해진(엄격한) 데이터 스키마에 따라 데이터를 저장합니다. 트랜잭션 및 조인이 가능하다.

RDBMS - 확장

성능을 확장 시키기 위해서는 수직적 확장(scale-up)만 지원한다. 수직적 확장이란 데이터베이스의 서버를 확장 시키는 것이다.(CPU 성능 업그레이드)

RDBMS - 속도

• [Update] 중복된 데이터가 없기에 Update를 한번만 수행함으로 상대적으로 빠르다.
  • [Read] 정해진 데이터 스키마에 따라 저장되있는 데이터를 재조립하여 데이터를 읽어오는 속도가 상대적으로 느리다.

NoSQL(Non-relational Database)

모든 데이터가 스키마가 없고, 관계가 없다. 이러한 특징때문에 데이터가 중복되기 때문에 불안정한 측면이 있다. 트랜잭션 및 조인이 불가능하다.

NoSQL - 확장

성능을 확장 시키기 위해서는 수직적(scale-up), 수평적(scale-out) 확장을 지원한다. 수평적 확장이란 기존의 데이터 서버를 두고 동일한 데이터 서버를 확장 및 분산하는 것이다.

NoSQL - 속도

• [Update] 데이터가 여러 컬렉션에 중복되어 있어 있다면, Update를 해야하는 경우 모든 컬렉션에서 수행해야하므로 느리다.
• [Read] 데이터는 사용자가 필요로하는 형식으로 저장하기에 읽어오는 속도가 상대적으로 빠르다.

언제 사용하는 것이 좋을까?

RDBMS은 언제 사용하는 것이 좋을까?

스키마가 변경될 여지가 없고, 데이터를 자주 수정해야하는 경우 데이터를 사용자의 필요에 따라 조건 또는 정렬이 필요한 경우 데이터 처리의 정확성이 필요한 경우(트랜잭션)

NoSQL은 언제 사용하는 것이 좋을까?

정확한 데이터 구조가 없거나 변경 또는 확장이 잦은 경우 데이터 수정하는 경우가 거의 없고, 읽기만 하는 경우 데이터베이스를 수평으로 확장해햐하는 경우(막대한 양의 데이터를 다뤄야 하는 경우)

NoSQL 종류 3가지

Key-Value Store

Key값으로 Value를 즉시 찾을 수 있도록 Hash 데이터 구조를 사용한다. Memcached, Redis와 같은 Cache 솔루션이 여기에 속한다.

Column Oriented Store

MySQL과 같은 RDB는 행 단위로 저장하는 Row Oriented Store다. 그에 반면, 열(column) 단위로 정보를 저장해놓는 구조를 말한다. HBase, Cassandra와 같은 제품이 여기에 속한다.

Document Oriented Store

데이터를 JSON 형태로 저장하는 구조. 그래서 스키마를 바꾸기 쉽다. MongoDB, Elasticsearch와 같은 제품이 여기에 속한다.

Application Programming Interface의 약자이며, 어플리케이션끼리의 소통을 말한다.

HTTP API 란?

말 그대로 HTTP 통신 방식을 사용하는 API를 뜻 한다.

REST API 란?

Representational State Transfer의 약자로 네트워크 자원을 정의하고 처리하는 방법을 뜻한다.

즉, REST는 HTTP를 잘 활용하기 위한 원칙이라고 할 수 있다. 이 원칙을 준수하여 만든 API가 바로 REST API 이라고 말할 수 있다.

이러한 원칙들을 완벽하게 지키면서 개발하는 것을 RESTful API라고 한다.

REST의 제약 조건

• Client - Server : 클라이언트와 서버를 분리하여 서로 의존하지 않는다.
• Stateless : 무상태성이라고 하며, 서버에서는 클라이언트의 요청에 대한 응답만 처리하고 클라이언트의 세션 상태 및 세션 정보를 저장하지 않는다.
• Cacheable : 캐시 사용이 가능해야하며, 캐시를 사용하는 장점으로는 클라이언트의 데이터를 재사용 할 수 있다.
• Uniform Interface : 시스템 아키텍처를 간단하고 파악하기 쉽게 정의한 조건이다. 장점으로 클라이언트 개발자와 서버 개발자 간의 결합도를 낮춘다.

  4가지 규약

  1. Identification of resources : 리소스가 URL로 식별된다.
  2. Manipulation of resources through representations : 소스를 삭제하거나 수정할 때 HTTP 메시지에 이러한 표현을 담아서 전송해야한다.
  3. Self-descriptive messages : 메세지는 스스로 설명해야 한다. 메세지만 보고도 어떤 기능을 수행하는지 알 수 있어야 한다.
  4. Hypermedia as the engine of application state(HATEOAS) Self-descriptive messages 와 Hypermedia as the engine of application state 이 두 규약이 지키기 힘들다.

자바스크립트를 이용한 프로젝트를 진행하면서 변수 또는 배열을 복사를 많이 이용한다. 헷갈렸던 깊은 복사와 얕은 복사, 전개연산자 까지 정리한다. 우선 원시형과 참조형에 대해서 알아보자!

원시형과 참조형

원시형이란 자바스크립트에서 객체가 아니면서 메서드도 가지지 않은 데이터입니다. (출처 - MDN)

number, string, boolean, null, undefined 등이 해당됩니다.

원시형의 값은 변형할 수 없고(불변성), 재할당을 해야합니다.

let a = 1; // 주소 : 1000, 값 : 1
a = 2; // 주소 : 1001, 값 : 1

위에 코드 처럼 값을 변경한다면 새 메모리 공간을 할당하고 값을 변경합니다. 즉, 원시형은 불변성을 유지하고, 변수는 가리키는 메모리 주소를 바꿔가면서 변수 값을 변경합니다. 값 복사 = 깊은 복사

참조형이란 자바스크립트에서 원시형이 아닌것들은 모두 참조형입니다.

객체, 배열, 함수가 해당됩니다.

참조형은 변수에 할당할 때는 변수 값이 아닌 주소를 저장합니다. 주소복사 = 얕은 복사

깊은 복사(Deep copy)란?

• 독립적인 메모리를 차지한다.
• 데이터 값 자체를 복사한다.

얕은 복사란?

• 주소 값을 복사한다.
• 깊은 복사보다 상대적으로 빠르다.

  let a = {value : 1} // 주소값 : 1000, 값 : value = 1
  let b = a; // 주소값 : 1000, 값 : value = 1
  

b.value = 2;

console.log(a); // {number : 2} console.log(b); // {number : 2}

# 전개연산자란?
* 자바스크립트 ES6부터 지원하는 문법이다.
* 깊은 복사로 적용되어 독립적인 메모리를 차지한다.
```javascript
let person = {
  name : 'song'
  age : '1'
};

let copy = {...person};
copy.age = 2;

console.log(person);// {name : 'song', age : 1}
console.log(copy); // {name : 'song', age : 2}

정리

깊은 복사는 실제 값을 복사한다. 얕은 복사는 주소를 참조한다.

자바스크립트를 이용한 프로젝트를 이용하면서 헷갈렸던 반복문에 대해서 정리한다.

iterable

iterable은 반복 가능한 객체(iterable object)을 줄여도 부르는 명칭입니다. 자바스크립트의 iterable 객체를 만들어내는 생성자는 string Array, TypedArray, Map, Set 이 있습니다.

for...of

• for...of는 ES6에 추가된반복문 입니다.
• 반복 가능한 객체(iterable)를 순회 할 수 있게 해줍니다.
• 순회하면서 반복 가능한 객체의 값을 반환해줍니다.
• Object는 불가합니다.

for(let value of ['a', 'b', 'c']) {
      console.log(value); // 'a', 'b', 'c'
}

for...in

• Iterable object이면 가능합니다.
• key를 반환해줍니다.
• 배열도 가능합니다.(index를 반환)

const obj = {name : 'song', age : 1};
for(let key in obj) {
      console.log(key); // 'name', 'age'
      console.log(obj[key]); // 'song', 1
}

foreach

• return break continue를 사용하여 루프를 제어 할 수 없습니다.

• 루프를 제어하기 위해서는 예외처리를 통해서 throw 시키는 방법이 있습니다.

  // 루프제어 잘못된 코드
  const arr = [1,2,3,4,5];
  
  arr.forEach((value) => {
     if(value == 3) 
      return;
    console.log(value);
  });

  //루프제어 옳바른 코드
  const arr = [1,2,3,4,5];
  try{
  arr.forEach(function(value){ 
    if(value==3)
      throw new Error("stop loop"); 
    console.log(value);
  })
  }catch(e){
  

}

# 정리
>for ...of// 반복 가능한 객체 순환

>for ...in // 객체 순환

>foreach // return, break, continue 불가

차이점

스코프란?

1. 함수레벨 스코프 - 함수 코드블록 이외에서 선언한 변수는 전역변수로 할당된다.
2. 블록레벨 스코프 - 모든 코드블록 스코프에서 선언한 변수는 지역변수로 할당 된다.

함수 종류

스코프 종류는 네 가지가 존재합니다. 함수 선언문의 경우에만 런타임 이전에 자바스크립트 엔진에서 먼저 실행으로 함수로 취급된다.

1. 함수 선언문 - 함수 취급O

    function add(x, y) {
          return x + y
    }

2. 함수 표현식 - 함수 취급X

    var add = function(x, y) {
          return x + y
        }

3. 함수 생성자 - 함수 취급X

    var add = new Function('x', 'y', 'return x+ y')

4. 화살표 함수- 함수 취급X

    var add = (x, y) => x + y

참고 : https://www.howdy-mj.me/javascript/var-let-const/

Web Application Server - HTTP를 통해 애플리케이션을 수행해주는 미들웨어(소프트웨어 엔진) = 백엔드 = DB 서버와 같이 수행 = 웹 컨터이너, 서블릿 컨테이너

*컨테이너 : JSP, Servlet을 실행시킬 수 있는 소프트웨어

AWS EC2 = ubuntu

back_end = pm2(NODEJS.EXPRESS) front_end = nginx (REACT)