[JavaScript] 배포와 번들러의 기초 (with. vite) + 리눅스 명령어

이 포스팅은 Learn with Eunjae 님의 시나브로 자바스크립트 강의를 기반으로 정리된 내용입니다. 

 

로컬에 있는 내 html 파일을 localhost를 통해서 확인하게 되는데, nestify나 vercel(호스팅 플랫폼)을 통해 폴더 자체를 배포할 수 있다. vercel의 경우는 내 깃허브 리포를 연동하여 바로 배포할 수 있기 때문에 아주 간단하게 배포할 수 있다. 

• vercel에서 배포를 할 때, 어떤 프레임워크를 사용할 지 결정하고 빌드 커맨드(빌드 명령어)와 output 디렉토리(어떤 폴더에 결과물을 둘 지)등을 직접 설정해 줄 수 있다. 

 

번들러는 다양한 종류들이 있는데 Parcel("the zero configuration build tool for the web" -공식 홈페이지) Vite, Webpack 등이 있다. 

 

node_moudles 폴더의 .bin 에는 우리가 실행시킬 수 있는 명령어를 제공하는 라이브러리들이 들어있다. *하단의 내용참고

노드 패키지 매니저 yarn or npm 과 함께 scripts에 명령어키워드를 입력하고 값으로 명령어를 입력해주면 .bin의 명령어가 실행되게 된다. 

Bash 

yarn dev

package.json

{
"scripts": {
 "dev": "parcel src/index.html" //parcel 컨벤션으로는 src/index.html 은 생략해야 합니다.
	}
}

 

• yarn dev는 .bin 아래의 parcel 명령어를 실행시킨다.

⭐Vite(비트)

: view js에서 만들어진 모듈 번들러

• 최신 모듈 번들러들은 HMR(hot module reloading)을 제공한다. ->변경된 파일 내용을  브라우저에서 실시간 반영(refresh)하여 보여주는 기능, 이전에는 전체를 refresh했지만 요즘은 바뀐 부분만 동적으로 화면에 반영해준다.

어떤 번들러 간에 build.minify 와 같은 파일을 최소화(압축)시켜주는 옵션을 제공한다.

코드가 뭉쳐있다 -> 미니파이되어있다 -> 옵션을 false로 주면 원래 코드로 볼 수 있다

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()], //이 아래부터 추가된 코드
  build: {
    minify: false,
  },
});

• 옵션을 변경한 뒤, build하면 원래의 코드를 볼 수 있다. 빌드된 원본 코드를 보면 폴리필 등을 확인할 수 있다.

📌 브라우저에서는 jsx, TS 를 이해하지 못하기 때문에 번들러(여기서는 vite)에 포함된 트랜스파일러를 통해 브라우저가 이해할 수 있는 JS로 변경된다. 

Vite 공홈에 가면 dev환경에서는 그냥 파일을 하나하나 불러오면서 build 시에는 왜 하나의 파일로 번들링하는 지에 대한 내용도 나와있다. 공식으로 한국어를 지원하지는 않는 거 같으나 발빠른 사람들이 공식 홈페이지를 기반으로 kor 번역을 해놓았다. 참고하여 세팅하면 된다.

 

배포 시 번들링 과정이 필요한 이유 - vite 가이드 kor 

---

환경변수, 리눅스, cmd 관련 내용

어떤 프로그램이 돌아가게 해주는 실행파일의 경로를 잡아주는 것을 환경변수 세팅이라고 하는데 리눅스에는 매우 다양한 환경변수들이 있다. 현재 지정된 환경 변수를 출력하는 명령어는 printenv 이다. 

환경 변수들의 경로인 path 를 출력하는 명령어는 echo $PATH이다.(path들은 :(콜론)으로 구별되어 있다.)

중요한 점은 리눅스에서 사용하는 명령어들도 결국 일종의 실행파일인데 명령어 입력 시 환경변수에 잡혀있는 PATH를 따라가서 해당 파일이 실행되는 원리로 명령어가 작동된다는 것이다. 즉, mkdir(파일 삭제 명령어),ls(파일 또는 경로의 매개변수를 지정하지 않으면 현재 디렉토리의 내용을 표시하는 명령어) 등의 명령어도 결국 저 path 경로에 저장되어 있다는 얘기이다.

즉, 명령어들이 실행파일이고, path는 그 실행파일의 경로를 지정해준 것이라고 했다. 우리가 어떤 프로그램을 만들고 환경변수에 그 프로그램의 경로를 등록시켜주면 우리가 자체적으로 만든 명령어 가지고도 우리의 프로그램을 이용할 수 있게 된다는 소리다.  

* 참고로 윈도우에서 리눅스 명령어를 사용하려면 가장 쉬운 방법은 PowerShell 을 사용하거나 GitBash를 설치하여 사용하는 것이다. 리눅스, 유닉스의 경우와 cmd와 같은데 운영체제가 다르기 때문에 명령어가 다르다.

cmd는 커맨드(창) 의 축약어이며 windows: cmd 는 linux: console/ termianl /shell 과 동일한 의미입니다. (출처: okky)

 

리눅스(gitBash) 명령어
pwd : 현재 경로 확인
export: 시스템 환경 변수 확인하기 (전체목록)
echo $[환경변수] : 특정 환경변수의 값만 확인
e.g.) echo $PATH 로 사용