[Javascript] JavaScript 를 사용하는 도구

[ 코드 에디터 ]

﹡ JavaScript 코드를 작성하는데 사용되는 편집기

---

[ 런타임 환경 ]

﹡ JavaScript 코드를 실행하는 환경 , 브라우저와 Node.js 가 일반적이다.

﹡ 브라우저 (클라이언트)

주로 클라이언트 측 런타임 환경으로 사용되고 , 사용자 인터페이스를 관리하며 클라이언트 측 JavaScript 코드를 실행하는 역할을 한다.

﹡ Node.js (서버)

주로 서버 측 런타임 환경으로 , 서버측 JavaScript 코드를 실행하고 처리한다.

﹡ npm run dev

Node.js 환경 에서 개발서버를 시작하는데 사용되는 명령어 이며,

JavaScript 로 작성된 웹 애플리케이션을 개발하기 위한 환경을 구축 할 수 있다.

주로 Node.js 환경에서 실행 되며, 웹 애플리케이션의 개발 서버를 시작하여 코드 변경 사항을 실시간으로 감지하고 브라우저에 적용할 수 있도록 도와준다. ( 핫 리로딩 )

즉 , 서버를 실행하고 브라우저에서는 해당 서버로 요청하여 결과를 받아온다.

---

[ 패키지 관리자 ]

﹡ JavaScript 프로젝트에서 외부 라이브러리와 모듈을 관리하기 위한 도구. ( Node.js 환경에서 사용되는 )

﹡ npm(Node Paakage Manager) , Yarn

---

[ 빌드 도구 ( 배포를 하기 위함 ) ]

﹡ JavaScript 애플리케이션을 번들링 하고 최적화하는데 사용되는 도구.

→ 번들링 ( 배포를 하기 위함 )

• 여러개의 파일과 종속성을 하나로 결합하여 최적화된 하나의 파일로 생성하는 작업

  파일간 여러 파일들이 종속되어 있는데 그 중 필요한 부분만 모아주는것

﹡ JavaScript, Css , 이미지 및 기타 웹 리소스를 번들(묶는) 하는데 사용된다.

﹡ 이는 웹 애플리케이션의 성능을 향상시키고 개발 및 배포과정을 간소화 해준다.

→ 번들링의 주요 목표

• 파일감소 : 여러개의 파일과 종속성을 하나의 번들 파일로 결합함으로 HTTP 요청수를 줄여 웹 페이지의 로딩 속도를 향상 시킨다.

  웹 브라우저는 웹 페이지를 로드할때 각 파일 (HTML, CSS, JavaScript, 이미지 등)을 다운로드하기 위해 HTTP 요청을 보낸다. 이러한 HTTP 요청은 네트워크 비용과 지연을 초래하므로 최소화 하고 웹 페이지의 로딩속도를 향상 시키는것이 중요하다.

2. 최적화: 번들링 도구는 코드 압축, 이미지 압축, 난독화(보안 강화) 등의 최적화 기능을 제공하여 웹 애플리케이션의 성능을 최적화 한다.

3. 개발 편의성: 번들링 도구는 개발중에도 번들링된 리소스를 생성하여 테스트 및 디버깅을 용의하게 한다. ⇒ 테스트환경과 개발환경 , 서로 다른 번들을 생성하여 개발 프로세스를 관리한다.

﹡ 웹팩(webpack) (Node.js 환경에서 동작하는 도구) , Rollup 등이 있다.

→ 웹팩(Webpack) 은 다른 호스팅 서비스와 직접 관련은 없다.

→ 다른 호스팅 서버(예를 들어 Netlify) 를 사용하더라도 웹팩을 설치하고 설정하는 것은 개발자의 책임이다.

﹡ 번들링은 프로덕션 빌드 또는 개발 서버 실행 중에 자동으로 수행될 수 있다. ( script 설정에서 build 명령어를 npm run dev 로 바꾸는 등 )

﹡ 컴파일(compile) 은 일반적으로 빌드(build) 과정에 속한다.

• 정적언어에서의 컴파일

  → 개발자가 코드를 작성한 후 명시적인 컴파일 단계를 거쳐 실행 가능한 코드로 변환한다.

  → 이러한 언어들은 주로 컴파일러(compiler)를 사용하여 소스코드를 목적 코드(object code) 또는 실행파일(executable) 로 변환한다.

배포는 웹 호스팅, 클라우드 서비스, 독립적인 서버 등을 사용하여 수행된다.

Uploaded by N2T