미생

■ 변수(Variables)와 상수(Constants) 

변수(Variables)의 특징

1) 변수를 선언하고 값을 변경할 수 있다.

2) 함수안에서 자료형없이 선언할 수 있다.

상수(Constants)의 특징

1) 상수를 선언하고 값을 변경할 수 없다.

■ 웹팩(Webpack)

의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다.

프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해

하나의 파일로 만들어 준다.

예시로 JAVA 스프링 프레임워크를 활용하느 프로젝트에서

해당 프로젝트를 빌드하여 jar파일로 말아서 생성하는것과 유사하다.

■ 바벨(Babel)

바벨은 코드 변환기다.

개발자들은 최신의 코드로 작업을 진행하고 최대한 많은 사용자가 사용하는데

불편함이 없도록 만들어 주는게 바벨이다.

바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.

■ foreach() 함수

* 반복문의 순번 또는 배열의 크기를 따로 변수에 저장하지 않고도 반복작업이 가능하다.

* 반환값이 없어도 된다.

function parse(qs) {
  const queryString = qs.substr(1);  // querystring = 'banana=10&apple=20&orange=30'
  const chunks = queryString.split('&');  // chunks = ['banana=10', 'apple=20', 'orange=30']
  let result = {};
  chunks.forEach((chunk) => {
    const [ key, value ] = chunk.split('=');  // key = 'banana', value = '10'
    result[key] = value;  // result = { banana: 10 }
  });
  return result;
}

// 결과 : 
// result = {banana: "10", apple: "20", orange: "30"}

■ map() 함수

* 각 배열 요소를 정의된 함수를 통해 변환한 결괏값들로 변환하고 새 배열을 반환한다.

* 반환값이 있어야 한다.

function parse(qs) {
  const queryString = qs.substr(1);  // querystring = 'banana=10&apple=20&orange=30'
  const chunks = queryString.split('&');  // chunks = ['banana=10', 'apple=20', 'orange=30']
  const result = chunks.map((chunk) => {
    const [ key, value ] = chunk.split('=');  // key = 'banana', value = '10'
    return { key: key, value: value };  // { key: 'banana', value: '10' }
  });
  return result;
}

/*
결과:
result = [
  { key: 'banana', value: '10'},
  { key: 'apple', value: '20' },
  { key: 'orange', value: '30'}
];
*/

■ reduce() 함수

* 첫번째 요소부터 마지막 요소까지의 각 배열 요소의 형태를 가공하거나 변환하여 1개의 값(또는 객체)을 반환한다.

* 반환값이 있어야 한다.

function parse(qs) {
  const queryString = qs.substr(1);  // querystring = 'banana=10&apple=20&orange=30'
  const chunks = queryString.split('&');  // chunks = ['banana=10', 'apple=20', 'orange=30']
  return chunks
    .map((chunk) => {
      const [ key, value ] = chunk.split('='); // key = 'banana', value = '10'
      return { key, value }; // { key: 'banana', value: '10' }
    })
    .reduce((result, item) => ({
      ...result,
      [item.key]: item.value,
    }), {});
}

/*
결과:
{banana: "10", apple: "20", orange: "30"}
*/

■ 본문 블록을 사용한 함수

본문 내용을 {}(중괄호)로 묶어서 작성한다.

var add = (first, second) => {
       return first + second;
};

■ 본문 블록이 비어있고 결괏값을 바로 반환하는 함수

본문 내용이 없고 결괏값만을 반환하기 때문에 {}(중괄호)를 생략할 수 있다.

 var add = (first, second) => first + second;

■ 반환값이 객체일 경우의 함수

결괏값이 객체형태이기 때문에 ()(소괄호)로 묶어서 반환한다.

var add = (first, second) => ({add : first + second, multiply : first * second });

■ 노드제이에스(node JS)이란?

구글에서 공개한 소프트웨어로 V8 엔진을 기반으로 만든 자바스크립트 런타임 도구이다.

쉽게 말해 노드제이에스는 웹 브라우저가 아닌 컴퓨터(또는 서버)에서 자바 스크립트를 실행할 수 있게 해준다.

■ 노드 버전 매니저(nvm) 이란?

노드제이에스(node JS)를 설치하거나 버전을 관리해주는 프로그램

■ 노드 패키지 매니저(npm)란 ?

자바 스크립트 라이브러리를 설치하고 관리하는 프로그램

특징

• node_modules 폴더에 라이브러리를 설치하고 저장한다.
• pakage.json 파일에 설치된 라이브러리의 정보를 적어 저장하며, pakage.json 파일은 라이브러리 명세역할을 한다.

■ 웹팩(webpack)이란?

프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구이다.

쉽게 말해 웹 브라우저가 해석할 수 있는 파일로 변환해주는 역할을 한다.

특징

• 파일을 적절한 크기로 자르거나 묶어주는 역할을 수행할 수 있다. 때문에 프로젝트의 용량을 줄여준다.
• 간단한 노드 기반의 웹 서버를 구동하기도 한다.