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

2024. 6. 12.

개발

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 파일과 거의 동일하게 동작하지만, 몇몇 자바스크립트 ..

2024. 6. 10.

개발

[대외 활동] YAPP 24기 프론트엔드 - 면접 후기 YAPP이란 ?디자이너와 PM 그리고 프론트,백엔드 개발자가 함께 하나의 프로젝트를 만들어 나갈 수 있도록 지원하고현업 또는 예비 직군 꿈나무들과 네트워킹을 할 수 있도록 지원하는 하나의 단체다. 지원 동기나의 상황은, 개발자로서 거의 3년을 현업에서 일하고 있는데 팀의 기술 스택이 많이 레거시한 부분이 있어서 es5로만 개발해야했다. 물론 바닐라 자바스크립트로 모든 것을 개발해나가야 하는 극한(?)의 환경이라서 많은 부분을 배웠고 지금도 배우고 있지만 타 회사에서 채용 공고를 내세울 때 최소한의 자격 요건 정도는 맞춰야 내가 미래를 대비할 수 있지 않을까 라는 생각이 요즘 자주 들고 있었다. 그리고 현업에서 리액트 같은 최신 라이브러리나 프레임워크를 사용하면서 겪는 트러블 이슈를 처리해보고 싶었지만 현..

2024. 5. 16.

일상

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

2024. 5. 13.

개발

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

2024. 5. 9.

개발

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

2024. 5. 2.

개발