webpack 3

트리 쉐이킹(Tree Shaking)으로 자바스크립트 성능 개선하기

자바스크립트 성능 개선 필요성 네트워크 전송 시 자바스크립트의 평균 전송 크기는 350KB 정도이다. 이것은 압축된 것이기 때문에 파싱되고 컴파일 및 실행되면 900KB로 늘어난다. 자바스크립트라는 자원을 수행하는데 비용이 많이 들어가는데, 웹 애플리케이션은 대부분 자바스크립트로 만들어진 것이라서 자바스크립트 엔진 효율성 향상을 위한 지속적인 개선이 이루어지고 있다. 자바스크립트 성능을 개선하기 위한 기술 중 코드 스플리팅은 자바스크립트 청크로 애플리케이션을 분할하고, 청크를 필요로 하는 애플리케이션의 경로에만 청크들을 배분하여 성능을 향상시키는 기법이 있다. 그러나 코드 스플리팅을 사용한다고 해서 사용되지 않는 코드를 포함한 자바스크립트 애플리케이션의 문제를 해결하지는 못한다. 이 문제의 해법을 트리 ..

WEB 2023.05.09

[JavaScipt] 번들러란?

번들러? 번들러의 예시로 웹팩을 들 수 있다. 웹팩은 많이 사용되는 모듈 번들러 중 하나인데 번들러의 특징은 아래와 같다. 1. 의존성이 있는 모듈 코드를 하나(또는 여러 개) 파일로 만들어 주는 도구 2. 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할 번들러 사용 이전의 문제점 프로젝트가 커질수록 자바스크립트 파일 각각의 의존성과 코드 사이 순서를 보장하기 힘들다는 부작용을 초래했고 심할 경우 일부 파일의 문제가 전체 스크립트를 실행에 영향을 미치기도 한다. 자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어 이제는 모듈 없이 자바스크립트로 코딩하기 힘들어졌다. 아직 모든 브라우저에서 ES Module을 사용할 수 있는 것은 아니기 때문에 브라우저에서 모듈을 사용하려면 ..

WEB 2022.04.07

React가 돌아가는 Node.js는 무엇일까?

Nods.js 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계된 자바스크립트 런타임 환경이다. 자바스크립트를 브라우저 밖에서 사용할 수 있게 도와준다고 생각하면 된다. * 런타임 : 프로그램이 실행되는 상태를 뜻함 Node.js 환경에 express 등의 프레임워크를 구동하면 서버가 되고 Node.js 환경으로 React를 제작하면 프론트엔드가 된다. 바벨이라는 컴파일러 도구를 가지고 있어 JSX문법을 사용할 수 있다. Nods.js 특징 이벤트 기반 : 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 논 블로킹 I/O 모델 : 이전 작업이 완료될 때까지 대기하지 않고 다음 작업을 수행 (=비동기) 싱글 스레드 : 싱글 스레드를 사용하지만 child_process.fork() API를 사..

React 2021.09.17