Webpack , Babel ?

Webpack?웹팩(Webpack 또는 webpack)은 오픈 자바 스크립트(JS) 모듈 번들러이다. 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프런트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다. 웹팩은 의존성을 취한 다음 의존성 그래프를 만듦으로써 웹 개발자들이 웹 애플리케이션 개발 목적을 위해 모듈 방식의 접근을 사용할 수 있게 도와준다. 명령 줄을 통해서 사용할 수 있으며, "webpack.config.js"이라는 이름의 구성 파일을 사용하여 구성할 수 있다. 이 파일을 사용하면 프로젝트를 위해 로더, 플러그인 등을 정의할 수 있다. (웹팩은 로더를 통..

• format_list_bulleted 개발/Bundle
• · 2024. 6. 12.
• textsms

tsconfig.json에 대한 이해

개요- CRA 없이 webpack에서 typescript 설정을 위한 개발 환경 설정- typescript 핸드북 참고 tsconfig.json 생성하기tsc 명령의 tsc --init 명령어를 사용한다.타입스크립트 프로젝트에서는 구성 파일을 생성하기 위해 해당 명령어를 사용하는 것을 권장한다.What is a tsconfig.json디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 된다.tsconfig.json 파일은 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일러 옵션을 지정한다. 자바스크립트 프로젝트는 jsconfig.json 파일을 대신 사용할 수 있다.이 파일은 tsconfig.json 파일과 거의 동일하게 동작하지만, 몇몇 자바스크립트 ..

• format_list_bulleted 개발/TypeScript
• · 2024. 6. 10.
• textsms

[rollup.js] 환경 설정하기(1) - 오류 해결하기

이 글에 대한 배경은2024.04.25 - [개발] - [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔? [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?분석을 하게 된 배경⬇더보기사내에서 자바스크립트(바닐라,jquery)로 만든 신규 제품을 리액트에 지원이 될 수 있도록 개선하는 과정에서기존의 제품을 script 태그 한줄로 외부 페이지에 import 시chairking-95.tistory.com에서 시작된다. 사내 프로젝트는 commomJS 환경에서 개발된 상태에서 React를 래핑하여 지원할 수 있도록 개선해야 하는데타사 제품에는 umd 예제를 지원하고 있어서 rollup.js를 적용해 해당 예제를 지원할 수 있도록 해야한다. ..

• format_list_bulleted 개발/Bundle
• · 2024. 5. 13.
• textsms

[Babel] Loader 사용하기 😎

이전 글에서는 webpack을 이용한 기본 설정을 마쳤다.더보기2024.05.02 - [Javascript/Webpack] - Webpack 이해하기 - Concepts이번 글에는 기본 환경을 적용한 webpack에 babel을 적용하여 webpack에대한 전반적인 이해도를 추가로 진행하도록하고자 합니다. 로더는 webpack 에서 중요한 부분을 차지하기 때문에 단순하게 번들링만 할 경우, 효용성이 크게 떨어진다고 합니다.번들링을 사용하지 않고 각각의 정적파일로 관리할 때, 장점들을 모두 사용하기 위해 Loader 라는 것을 이용합니다. Loader는 모듈을 입력받아 원하는 형태로 변환하고 새로운 모듈을 출력하는데Loader는 babel 같은 트랜스 파일러 뿐 아니라 이미지파일, CSS파일 등에 대한 작..

• format_list_bulleted 개발/Bundle
• · 2024. 5. 9.
• textsms

[Webpack] Webpack 이해하기 - Concepts

아래 문서는 webpack의 가이드 문서를 참고하여 작성됨을 알려드립니다. Webpack ?webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.( Webpack 공식 사이트 )디펜던시 그래프란?더보기하나의 파일이 다른 파일에 의존할 때 마다, webpack은 이것을 의존성으로 취급합니다. 이를 통해 webpack은 이미지 또는 웹 폰트와 같은 코드가 아닌 애셋을 가져와, 애플리케이션에 의존성으로 제공할 수 있습니다. webpack은 애플리케이션에서 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한 다음, 모..

• format_list_bulleted 개발/Bundle
• · 2024. 5. 2.
• textsms

[Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?

분석을 하게 된 배경⬇더보기사내에서 자바스크립트(바닐라,jquery)로 만든 신규 제품을 리액트에 지원이 될 수 있도록 개선하는 과정에서기존의 제품을 script 태그 한줄로 외부 페이지에 import 시킬 수 있어야 했다. 하지만 현재 프로젝트의 구조는 모듈화가 전혀 진행되지 않은 상태이고 하나의 JS 파일에 모든 함수가 다 들어있는 구조적으로 안좋은.. 상황이었기 때문에 프로젝트 일정을 고려할 때, 모듈화 보다는 스크립트 태그로 제품을 불러올 수 있도록 하고 리액트 컴포넌트에서 렌더링 할 수 있도록 하는 방식을 채택했어야 했다. 그렇게 프로젝트 개선을 시작하고 보니 현재 HTML 페이지에서 자바스크립트 태그들을 어떻게 불러오는지에 대한 이해도가 필요하다고 생각해 분석을 시작하게 됐다. 이제 HTML페..

• format_list_bulleted 개발
• · 2024. 4. 25.
• textsms

<