Parcel, 데이터 타입, Export default, import

🚨 빠른 시간에 개발용 서버를 구동하는 Parcel

솔직히 무슨 소린지 모르겠다. 내가 알아먹은 건 <빠르다>, <index.html을 터미널에서 오픈한다>

 올해 목표는 개념 이해하기 

Parcel – The zero configuration build tool for the web.

 

 

📍 parcel 패키지를 개발 의존성으로 설치

$ npm install parcel-bundler -D

 

parcel 패키지를 설치한 뒤 scripts에 다음과 같은 명령어를 입력할 수 있다.

 

package.json 파일에서

"scripts": {
    "dev" : "parcel index.html",
    "build" : "parcel build index.html"
}

 

 

그리고 터미널에서 npm run dev를 실행가능한 것이다.

$ npm run dev
$ npm run build

 

parcel-bundler 버전 에러날 때 다른 버전으로 설치하기

$ npm i parcel-bundler@1.12.3 -D

 

 

---

👩‍💻 특정 함수를 만들어 필요한 파일로 불러와보자.

일러스트레이터의 심볼같은 거 아닐까. 내가 자주 사용할 것 같은 심볼을 어딘가에 저장해두고 필요할 때마다 꺼내서 무한 복제가 가능하다. 여기서는 복제라는 개념보다 불러오기(import)가 더 알맞다. 실제로 import와 export라는 키워드로 필요한 함수를 실행한다.

 

📍 데이터 타입을 알려주는 연산자 typeof

데이터의 타입이 무엇인지 정확히 알고 싶을 때

function getType(data) {
  return Object.prototype.toString.call(data)
}

 

이때 불필요한 단어를 제외하고 타입만 보고 싶다면? 

-> 단순히 앞에서 8번째, 뒤에서 1번째를 잘라냄

function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

 

🌲번외

prototype 유튜브 강의 (feat. 공부하기 싫어질 때 보는 채널)

 

 

📍 함수 내보내기 Export

함수를 불러오려면 그전에 함수가 존재해야 하니 '특정 함수만 들어있는 파일'을 만든다.

앞서 만든 getType함수 이름으로 getType.js라는 파일을 만들었다. 이제 함수 앞에 '디폴트로 내보내기'만 추가해주면 된다. 

export default function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

export default는 javascript모듈에서 함수, 변수, 오브젝트 값을 내보낼 때 사용한다. html 안에 작성한 스크립트에서는 사용할 수 없다. 하나씩 내보내거나 배열로 여러 개를 내보낼 수도 있다. MDN

 

 

📍 함수 불러오기 import

어디에서 무엇 가져오기. 경로와 이름을 적어서 import한다.

$ import getType from './getType.js'