그럼에도 불구하고

요즘 추세를 보면 Webpack기반의 CRA보다 Vite를 많이 쓴다고 해요 "남들도 Vite 쓰니까~ 나도 Webpack 말고 Vite 써보자" 하고 썼던 나를 반성하는 글입니다. ( 최소한 이유는 알고 쓰자..ㅎㅎ ) 🧑🏻‍💻 번들러 ( Bundler) 번들러는 여러개의 파일들을 하나의 파일로 묶어주는 도구입니다. 번들러는 웹 개발에서 사용되는 도구 중 하나로, 웹 애플리케이션을 개발하거나 배포할 때 사용됩니다. 번들러의 주요 역할은 여러 개의 웹 리소스 파일, 예를 들면 JavaScript 파일이나 CSS 파일 그리고 이미지 파일 등을 하나의 번들(묶음)로 결합하고 최적화하는 것입니다. 이러한 작업을 통해 웹 애플리케이션의 성능을 향상하고 로딩 시간을 줄일 수 있습니다. 번들링을 하지 않는다면 매우..

Start! 🧑🏻‍💻 Cross origin이란? 크로스 오리진 (cross origin) 문제란 "브라우저는 자신의 오리진과 다른 오리진의 API 서버와 통신할 때 문제가 발생한다"는 개념입니다. 크로스 오리진 문제를 발생시킴으로써 잠재적인 위험을 가진 문서의 로딩을 제한해 브라우저 공격의 가능성을 줄일 수 있습니다. 크로스 오리진 문제는 웹 브라우저에 내장된 SOP(Same Origin Policy: 동일 근원 정책)라는 보안 정책 때문에 발생합니다. 크로스 오리진과 SOP를 이해하려면 브라우저의 오리진이라는 개념부터 이해해야 합니다. 브라우저가 웹 서버에 요청(request)을 전송하면 이에 대해 웹 서버는 응답(response)을 합니다. 일반적인 경우라면 웹 서버는 HTML 문서 형태를 응답할 ..

시작! 목차 📌 webpack.config.js HTML 삽입 미리보기할 수 없는 소스 ⭐️ 1. 모드 설정 mode 매개 변수는 다음 3가지 값 중 하나를 사용할 수 있다. mode: "production", mode 값 설명 development 개발 모드 production 배포 모드 (기본 값) none 기본 최적화 옵션 설정 해제 "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄일 수 있다. ⭐️ 2. 엔트리 설정 entry : 애플리케이션의 진입점 (entry point)를 설정한다. 나는 "main", "additional", "myClothes" 세 가지 엔트리 포인트를 정의하였다. 이는 각각에 해당하는 JavaScript 파일이 엔트..

오늘은 Vite에 대해 알아보겠습니다. [ Vite란? ] Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구입니다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠릅니다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만, Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠릅니다. Webpack, Parcel등과 비교하면 10배 이상의 빠른 속도를 자랑합니다. ( 안쓸 이유가? ) 또한 개발 서버를 이용할 때도 아주 빠릅니다. 기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오..

[ 소스 맵 (Source Map) ] 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. [ 소스 맵 설정하기 ] 웹팩에서 소스 맵을 설정하는 방법은 아래와 같습니다. HTML 삽입 미리보기할 수 없는 소스 devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정해주면 됩니다.

오늘은 Webpack Dev Server에 대해 알아보겠습니다. [ Webpack Dev Server ] 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다. [ Webpack Dev Server의 특징 ] 웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있습니다. 먼저 명령어를 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 웹팩 데브 서버를 실행하여 웹팩 빌드를 ..

오늘은 웹팩의 4가지 주요 속성에 대해 알아보겠습니다. 1. Entry 2. Output 3. Loader 4. Plugin [ Entry ] entry 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로입니다. HTML 삽입 미리보기할 수 없는 소스 위 코드는 웹팩을 실행했을 때 src 폴더 밑의 index.js를 대상으로 웹팩이 빌드를 수행하는 코드입니다. [ Entry 파일에 어떤 것이 들어가야 하는가 ] entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨 있어야 합니다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨 있어야 합니다. ..

Webpack에 대해 알아보겠습니다. [ Webpack ] Webpack이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 그럼 모듈과 모듈 번들링에 대해서 조금 더 살펴보겠습니다. [ 모듈이란? ] 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // math.js function sum(a, b) { return a + b; } function substract(a, b) {..

dependencies와 devDependencies의 차이에 대해 알아보겠습니다. [ 배포용 라이브러리 ] dependencies에 설치되어 있는 라이브러리의 경우 배포용 라이브러리입니다. 아래의 사진은 예시입니다. 이렇게 설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 애플리케이션 코드 안에 포함됩니다. 📌 npm i "내가 설치할 라이브러리" [ 개발용 라이브러리 ] devDependencies에 설치되어 있는 라이브러리의 경우 개발용 라이브러리 입니다. 📌 npm i "내가 설치할 라이브러리" -D 설치 옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 됩니다. 따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 ..

NPM에서 가장 많이 사용되는 명령어인 npm install에 대해 알아보겠습니다. [ NPM 지역 설치 ] NPM 초기화 명령어로 package.json파일을 생성하고 나면 해당 프로젝트에서 사용할 자바스크립트 라이브러리를 설치하게 됩니다. 이 때 명령어는 아래와 같습니다. npm install "내가 설치할 라이브러리" --save-prod 그리고 지역 설치 명령어의 경우 명령어 옵션으로 --save-prod를 붙이지 않아도 동일한 효과가 납니다. 또한, install 대신 i를 사용해도 됩니다. # 위 명령어와 동일한 효과 npm i "내가 설치할 라이브러리" [ NPM 지역 설치 경로 ] 위 명령어로 라이브러리를 설치하면 해당 프로젝트의 node_modules 라는 폴더가 생깁니다. 그리고 그 폴..