🍒What I did today(package.json, 화살표 함수, 모듈화와 CommonJS)

✅Modern Javascript Koans

오늘 배운 함수들을 익히는 과제였다. 화살표 함수만 하면 됐는데, 페어 분과하다 보니 시간이 너무 많이 남아서 구조 분해 할당까지 해버렸다.

화살표 함수, 구조 분해 할당, Spread/Rest 문법 등을 익히는 과제였는데 생각보다 잘 이해한 것 같다.

그리고 이 과제를 하기 전에 package.json에 포함되어 있는 npm script를 실행하는 방법도 이해할 수 있었다.

npm run <스크립트 이름> 이런식으로 넣어서 테스트를 실행 및 제출 등을 할 수 있었다.

git clone url -> npm install -> npm run <스크립트 이름> 이런 식으로 확인하면서 이해했다.

---

구조 분해 할당 문제 중 rest/spread 문법을 객체 분해에 적용할 수 있다.라는 문제가 있었는데

아래 예시를 만들어봤는데 문제는 changeUser가 (???)과 같다면 true 이런식이었다. 

근데 거기서는 expect.to.eql을 사용했지만 이해를 위해 console.log()를 사용해서 결과값을 바꿔보았다.

changeUser 객체에서 ...user가 무엇을 뜻하는지 왜 overwriteChanges 객체를 넣어보면 '해커스토익' age: 20 이 왜 안나오는지 이해를 했다.

그리고 마지막 changedDepartment는 ...user.company의 이해를 위해 코드를 적어보았다.

마지막 객체는 ...user, ...user.company가 선언되어 있기 때문에 이 둘의 차이가 무엇인지 알아보았다.

function it(){
    const user = {
      name: 'judaeng',
      company: {
        name: '신입사원',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 38
    }

    const changedUser = {
      ...user,
      name: '해커스토익',
      age: 20
    }

    const overwriteChanges = {
      name: '해커스토익',
      age: 20,
      ...user
    }

    const changedDepartment = {
      ...user,
      company: {
        ...user.company,
        name: 'judaeng',
        department: 'Marketing',
        role: {
          name: 'Software Engineer'
        }
      }
    }
    console.log(changedUser); // 여기는 이제 어떠한 객체를 넣어서 결과를 확인한다.
  }
  it();

✅모듈 사용하기

브라우저와 node.js에서의 사용 차이 그리고 기본적인 사용법, 다른 스크립트를 불러올 때, 모듈로 노출시킬 때 방법을 배웠다. 

기본적인 사용법은 let 모듈이 담긴 변수 = require('모듈이름') 이런식으로 불러온다.

다른 스크립트를 불러올 때도 사용 가능하다. 위에처럼 모듈이름을 'index2.js'라고 했을때 index2.js에 있는 내용을 불러온다.

마지막으로 모듈로 노출시킬 때는 다른 스크립트 파일에서 내가 만든 모듈을 사용할 수 있도록 노출시키는 방법이다.

// script1.js
const module2 = require('./script2.js')
console.log(modules2) // 'this is module 2'

// script2.js
module.exports = 'this is module 2'

module.exports 대신에 exports를 사용할 수도 있다. exports는 일종의 축약형(shortcut)이다.

exports는 module.exports를 참조한다.

이러한 모듈 노출 방법과 불러오는 방법을 CommonJS 모듈 시스템이라고 부른다.

 

🍒Remember

---

✅package.json이란?

NPM 모듈을 활용하기 위해 해당 모듈에 대한 정보를 담은 파일이다. 즉, 프로젝트 전반에 관한 정보가 들어있다.

$npm install

(npm -> 내 컴퓨터)

package.json에 적힌 모듈을 다운로드한다.

 

devDependencies란?

프로그램 실행과 관계없는 오로지 개발을 위해 필요한 dependency(의존성 모듈)

$npm install mocha --save-dev

--save-dev 옵션과 함께 install 진행 시 자동으로 devDependencies에 추가된다.

$npm install react or $npm install --save react

그냥 다운로드 <-> 다운로드 진행시 devDependencies에 추가한다.

왜 저장할까?

npm install은 package.json에 있는 dependency(의존성 모듈)을 바탕으로 설치한다.

모듈은 쓰고 있지만 npm install으로는 설치되지 않는다.

dependency에 만약 등록되어 있지 않다면? 팀 갈등의 주요 원인이 된다고 하는데 아직은 이해 못했다.

 

script항목(CLI에서 사용 가능한 명령 npm install)

$npm run <스크립트 이름>

 

✅화살표 함수

화살표 함수와 일반 함수를 비교하면서 보는게 제일 좋은 것 같다.

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다.

함수 본문에 return 문만 있는 경우, return을 생략할 수도 있다. (이 때 주의해야 할 점은 {}중괄호를 사용하면 안된다.)

그리고 화살표 함수는 클로저를 표현할 때 더욱 좋다고 한다. 아래 예시가 클로저 예시이다.

// 함수 표현식
const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

// 화살표 함수
const adder = (x) => {
  return (y) => {
    return x + y
  }
}

// 2
const adder = x => {
  return y => x + y
}

// 3
const adder = x => y => x + y

 

✅CommonJS

• 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
• 모듈 정의는 전역객체인 exports 객체를 이용한다.
• 모듈 사용은 require 함수를 이용한다.

<script>
var $ = require('jquery');
var foo = require('./js/foo');
var bar = require('./js/bar');
var foobar = require('./js/foobar');

// foo.js
exports.foo = () => {...};

// bar.js
exports.bar= () => {...};

// foobar.js
exports.foobar= () => {...};

module.exports vs exports ?

• exports는 module.exports 사용을 도와주는 helper
• exports는 module.exports를 참조할 뿐이다.
• module.exports에 뭔가가 이미 붙어있다면, exports는 무시된다. => 섞어 쓰면 안된다.

module.exports <========= exports

// index.js file
module.exports = {a: 1}
// index-runner.js
const index = require('./index');
console.log(index); // {a: 1}

//hello.js file
exports = {a: 1}
//hello-runner.js
const hello = require('./hello');
console.log(hello); // { }  

 

🍒More Study

---

✅AJAX, 비동기, XMLHttpRequest 정리

✅화살표함수 자주 사용해보기

2021-02-24

---

하루 알고리즘 문제 풀어보기 도전⚡

풀기만 하지말고 그 문제의 대한 개념을 정리하기가 제일 중요하다!