210224_TIL

아침 9시부터 대학병원에 갔다온다고 진을 다 뺐다. 대학병원은 대학병원만의 특유의 분위기가 있어서 뭔가 이질적이고 가기 싫다. 특히 불친절한 의사가 너무 많다. 그래도 이번에 만나고 온 의사 선생님은 그렇게 불친절하진 않았다. 내가 아픈 원인은 못 찾았지만😅

---

Modern JavaScript

모듈(module)

나보다 잘하는 사람이 미리 만들어 놓은 프로그램을 구성하는 요소

npm(Node Package Manager)

필요한 모듈을 다운로드 할 수 있는 모듈스토어

$ npm install <moudle> // -> node_module 생김

package.json

다른 사림이 내가 개발한 프로그램을 실행시킬 수 있도록 도와주는 역할
'내가 개발에 사용한 모듈 목록'
장점: 프로그램을 실행시키는데 필요한 모듈을 다 전달하지 않아도 된다

dependencies

실행에 반드시 필요한 모듈

devDependencies (--save)

개발 환경에 필요한 모듈
프로젝트 동작에 영향 x

scripts

npm으로 실행시킬 수 있는 명령어

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"

"start"

명령어는 미리 설정해놓은

"node index.js",

명령을 수행한다

$ npm start // -> "node index.js", 실행됨

nodemon

자동적으로 변경사항을 반영하여 다시 실행

$ npm install -g nodemon

nodemon을 설치하고 package.json의 script start에 node -> nodemon으로 변경

"scripts": {
    "start": "nodemon index.js", // node -> nodemon
    "test": "echo \"Error: no test specified\" && exit 1"
    
$ npm start // -> nodemon 실행되어 변경사항 자동 반영

nodemon 종료를 원하면

ctr + c

Mordern-Javascript-Koans

구조 분해 할당

배열 분해

const arr = [1, 2, 3]
const [one, two] = arr
console.log(one) // 1
console.log(two) // 2

rest/spread 문법을 활용한 배열 분해

const arr = [1, 2, 3]
const [one, ...rest] = arr
console.log(one) // 1
console.log(rest) // [2, 3]

rest/spread 문법을 활용한 객체 분해

const student = { name: '김재헌', major: '건축공학과', lesson: '구조역학', grade: 'A+' }

    function getSummary({ name, lesson: course, grade }) {
      return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
    }

getSummary(student) // '김재헌님은 A+의 성적으로 구조역학을 수강했습니다'

배열에선 배열안의 변수가 할당된 배열의 '요소'를 바로 가져왔다면
객체에선 객체안의 변수(name)가 할당된 객체의 '값'('김재헌')을 가져온다.
키: 값 순으로 속성을 써도 무관하다. (lesson: course)
하지만 선언한 변수와 할당된 객체의 키가 일치하지 않으면 값은 undefined가 된다

const obj = {one: 1, two: 2, three: 3}
const {one, too, three} = obj
console.log(one) // 1
console.log(too) // undefined
console.log(three) // 3

객체 요소 변경

const user = {
  name: '김재헌',
  company: {
    name: 'KaKao',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 27
}

원하는 요소 변경

const changedUser = { //!! 바꾸고 싶은 속성을 <...객체>밑에 쓰면 변경
  ...user,
  name: '마카오',
  age: 35
    }
console.log(changedUser)
{
      name: '마카오', // 이름이 바뀌고
      company: {
        name: 'KaKao',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35 // 나이가 바뀐다
    }

원하는 요소 덮어쓰기

    const overwriteChanges = { //!! <...객체>가 밑에 있으면 덮어쓰기
      name: '마카오',
      age: 35,
      ...user
    }
console.log(overwriteChanges) 
{
  name: '김재헌', // 원래 있던 속성과 상관없이
  company: {
    name: 'KaKao',
    department: 'Development',
    role: {
      name: 'Software Engineer'
    }
  },
  age: 27 // <...객체>로 가져온 속성이 그대로 적힌다
}

활용

    const changedDepartment = {
      ...user, // user 객체를 불러오고
      company: {
        ...user.company, // user객체의 company의 값을 불러오고
        department: 'Marketing', // company객체의 속성 중 department의 값을 바꿔준다
      }
    }

commonJS

commonJS에 대해 구글링 하던 중
정리를 정말 깔끔하게 해놓은 블로그를 찾았다.
출처: https://velog.io/@leobit/CommonJS

브라우저에서 다른 스크립트 파일을 불러오려면

모듈 스코프: 독립적인 실행영역
모듈 정의: module.experts(객체)
모듈 사용: require(함수)

module.experts와 experts는 절대 섞어 사용하면 안된다.
experts는 module.experts를 참조하는 변수일 뿐이기 때문이다.
그래서 module.experts를 쓰고 experts를 쓰면 module.experts만 실행되고 experts는 실행되지 않는다.

//index.js
let a = 10
let mod1 = require('./main.js')
let mod2 = require('./main.js') // 같은 주소를 참조, require로 참조하면 캐싱되기 때문에 같은 파일을 불러와도 한 번만 불러오게 됨
let result = mod.x

//main.js
let x = 20
exports.x = 30
module.exports.x = 50

x의 값은 50이 된다.

210225_수정
출처: https://www.daleseo.com/js-module-require/

module.exports와 exports를 섞어 쓸 때 exports가 무시된다고 생각하는 것 보단

---

그러뭍기

npx?

npm을 조금 더 손 쉽게 사용할 수 있도록 도와주는 '도구'

echo *.js > .gitignore

js를 무시하고 add

do while

일단 로직을 실행시키고 조건 검사

what ? true:false

what이 참이면 ':' 왼쪽 true반환 거짓이면 flase반환