# bundle
[React] CRA 프로젝트 Vite로 마이그레이션하기
🖐️ 시작하며 지난번 합류한 사이드 프로젝트를 통해 Vite에 대해 알아보았었습니다. 지금까지 진행했던 프로젝트들은 모두 CRA로 제작된 프로젝트이고 Vite의 압도적인 빌드 속도를 경험했기에 제작 및 배포까지 끝난 개인 프로젝트 하나를 Vite로 마이그레이션 해보기로 결정했습니다. >❗️본 프로젝트는 CRA, TypeScript, npm 기반 프로젝트입니다. Create-React-App(CRA) 우선 React로 웹 프론트 개발을 한번이라도 해보셨다면 다들 알고 있을 CRA에 대해 먼저 간단하게 알아보겠습니다. >Create-React-App (CRA) Set up a modern web app by running one command - CRA 공식 문서 - 리액트 공식 홈페이지에서는 CRA의 기능에 대해 다음과 같이 설명하고 있습니다. Less to Learn 리액트 또한 추가되고
json 문서 파싱해서 Bundle로 만들기
Goal json 텍스트를 파싱해서 Bundle 객체로 만들기 String, Int, Float, Array 등 타입 모두 처리하기 Implementation json 파싱 jsonObject 에서 얻은 value 타입별로 처리 Any 로 얻은 값의 simpleName 을 얻어서 처리 bundleFromJson bundleFromJsonArray Source Code https://gist.github.com/iamchiwon/b283e9858a812dc8263a9eb924e31cb6 Test
Webpack bundle 사이즈 최적화 - (3)
현재 이 글은 Webpack bundle 사이즈 최적화 - (2) 의 시점 바로 다음에 최적화 했던 부분인데.. 현생이 바쁘단 이유로 글 써야지 써야지.. 만 반복하고 미루어 왔다가 지금 적게 되었습니다. 최근 회사 본부에서 사이트에 서비스를 런칭한 이 후 본부적으로 제가 담당하였던 캘린더 모듈의 초기 로딩 속도 및 렌더링 속도가 빠르다는 얘기를 듣게 되었습니다. 이에 본부 FE 연구원들에게 제가 적용하였던 부분에 대해 공유하는 자리가 있게 되었고 그에 따라 이 글을 적게 되었습니다. 오늘의 주제는 간단하게 코드 스플리팅 입니다. 지난 글 회고] 지난 포스트에서는 lighthouse와 관련해서 font 최적화 부분들과 (물론 CDN 부분은 추후에 적용 되었지만 누락 되어있는 부분), webpack 설정의 production 모드에 대해 글을 적었습니다. 기본적으로 앞서 설명하였던 production 모드를 통해서 번들링 사이즈를 줄이고, minify 및 compre
[Vite] Vite + React
애플코딩-vite https://www.youtube.com/watch?v=iX3Nu1FcZKA&t=39s 1. 고대의 웹개발방법 > 순수하게 HTML + CSS + JS 로만 웹을 만들어 배포하고 끝냈다. 2. npm > npm은 자바스크립트 라이브러리를 전부 모아놓은 플랫폼이다. 자바스크립트 라이브러리를 쉽게 설치할 수 있게 도와주는 npm을 사용하기 시작했다. (1) Big Problem node-modules가 설치되는데 이거 크기 너무 크다 브라우저 상에서 import / require이 등이 친화적이지 않음 3. Webpack(1세대) > Webpack은 한마디로 번들링과 컴파일을 결합하는 “정적 모듈 번들러”. 번들링 tool의 한 종류이다.
javascript 코드 관리 용어 정리
nest React에서 "nest"라는 개념은 컴포넌트 계층 구조를 구성하는 것을 의미합니다. Nesting은 컴포넌트를 다른 컴포넌트 내에 중첩시키는 것을 말합니다. React에서는 UI를 작은 단위의 재사용 가능한 컴포넌트로 구성합니다. 이러한 컴포넌트들은 계층 구조로 이루어져 부모 컴포넌트와 자식 컴포넌트 관계를 형성합니다. 이때, 부모 컴포넌트 내에 자식 컴포넌트를 중첩시켜 사용하는 것을 Nesting이라고 합니다. Nesting을 통해 복잡한 UI를 단순화하고 구성 요소를 재사용할 수 있습니다. 각 컴포넌트는 독립적이고 재사용 가능한 기능을 가지며, 이러한 컴포넌트들을 중첩시켜 원하는 복잡도의 UI를 구성할 수 있습니다. 부모 컴포넌트는 자식 컴포넌트에게 데이터나 속성을 전달할 수 있고, 자식 컴포넌트는 이를 받아 사용할 수 있습니다. React의 Nesting은 컴포넌트의 재사용성과 유지보수성을 향상시키는 데에 도움을 주는 중요한 개념입니다. 컴포넌트를 작은 단위
[핸드북] Webpack & Babel
Webpack 탄생 배경 웹팩의 배경을 살펴보려면 import/export 가 없던 모듈 이전 상황부터 살펴야 한다. sum.js가 로딩되면 app.js는 sum이라는 함수를 찾은 뒤에 함수를 실행한다. 문제는 다른 파일인데도 불구하고 sum이라는 함수가 전역 공간에 노출되는 것이다. 이럴 경우 app.js 파일 안에서 sum이라는 함수를 선언한 경우 전연 공간에 있는 다른 sum 함수와 충돌이 생기게 된다. 이를 막기 위해 탄생한 게 IIFE이다 IIFE 모듈 > 즉시 실행 함수 (IIFE) 함수 스코프를 만들어 외부에서 안으로 접근하지 못하도록 한다. 쉽게 말해 스코프가 생기면서 스코프 외부와 이름 충돌을 막을 수 있다. 같은 코드를 즉시 실행 함수로 감쌌기 때문에 다른 파일에서 안으로 접근할 수가 없다. 'sum'이란 이름은 즉시실행함수 안에 감추어졌기 때문에 외부에서는 같은 이름을 사용해도 괜찮다. Module > 프로그램을 구성하는 구
Activity, Fragment 간 데이터 전달
Activity Activity 데이터 보내기 데이터 받기 Activity -> Fragment 데이터 보내기 데이터 받기 Fragment -> Activity 데이터 보내기 데이터 받기 Activity 종료 시 result 전달 Activity 호출 result를 받을 수 있도록 아래처럼 호출한다. startForResult는 액티비티 클래스내에 아래와 같이 정의될 수 있다. (예시) Activity 종료 시 result 전달
Intent & Bundle
1. Intent & Bundle Android 애플리케이션에서 Activity, Service, Broadcast Receiver, Content Provider 등 컴포넌트 간에 통신을 하려면 Intent를 사용해야 한다. Intent 객체는 컴포넌트 간에 통신을 위한 메시지를 전달하는 역할을 하고 Bundle 객체는 통신할 때 전달할 메시지를 저장하는 역할을 한다. 즉 Bundle에 데이터를 저장해서 Intent로 데이터를 전달한다. 1-1. Intent Intent는 Android 애플리케이션의* 컴포넌트 간에 작업 요청을 전달하는 메시지 객체*로 Intent를 이용해 다른 애플리케이션의
본격적으로 Webpack Optimize 하기 (Bundle Analyzer, Chunk, Minimize, Uglify)
이제 Webpack을 통하여 본격적인 Optimize를 진행해보려고 한다! 사실 Webpack5가 도입이 되면서 아주 기본적인 최적화를 default로 진행을 해준다고 한다. 하지만, 이외의 Plugin과 Optimaization 옵션을 적절하게 사용하면 번들크기를 줄이는데 도움이 되고, 번들을 줄이는 매커니즘(?)을 배워가는 과정이 될 것이라 생각하니 쪼매 설렌다. Webpack Analyzer Plugin Webpack Analyzer Plugin은 Bundle 들의 크기 및 구성이 어떻게 이루어져있는지 시각적으로 보여주는 Plugin이다. 이전에 [최적화 포스트](https://velog.io/@buddle6091/%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0-4.-LightHouse-%EC%A7%84%EB%8B%A8%ED%95%B4%EC%84%9C-%EB%82%98%EC%98%A8-%EB%AC%B8%EC%A0%9C%EC%A0%
Webpack 만으로는 code splitting이 안된다. (React Lazy, Suspense)
webpack은 언제 적용이 되나요? 아래는 내가 질문한 개발자 커뮤니티 (Careerly) 질문의 해답이다. 물론 질문은 리액트 내장 실행어 react-scripts start는 웹팩의 적용을 받나요? 웹팩 변경 사항을 확인하려면 webpack ~ 관련 명령어를 쳐야하나요? 이다. Webpack 이외의 방법으로 Code Splitting 아무튼 Webpack을 도입하여 번들링을 하였지만, 번들사이즈는 여전히 1600대이며, lightHouse 수치는 70을 뚫지를 못하고 있다. 물론 수 많은 webpack 설정을 도입한 것이 아니라서 그렇지만, 사용하지 않는 컴포넌트까지 한번에 부르
생각보다 어려운 Webpack 번들링 (loader 관련 에러)
이전 글의 연장선이다. 이전 글이 Webpack 도입에 관하였던 내용이었다면, 이번 글은 기존에 있던 라이브러리 들과의 충돌을 해결하는 내용을 담았다. 방심했ㄷr...★ 기본적으로 webpack에서 해야될 세팅을 다 끝냈다고 생각했다. 왜냐면 공식문서가 하라는 기본대로 다 했기에 말이다. Loader는 Babel vs Ts-loader 중 사용하면 된다캐서 후자도 고르고 말야 그러나 약 6시간 동안 npx webpack 명령어로 번들링을 테스트할 때마다 생기는
lazy로 인한 번들 사이즈 증가??
코드 스플리팅이란 왜 필요할까? 자바스크립트로 개발하게 될 경우 기본적으로 하나의 번들 파일에 모든 로직이 들어가게 된다. 이는 프로젝트의 규모가 커질수록 번들 파일 또한 끊임 없이 커진다는 것을 의미하게 된다. 그렇게 된다면 당연히 페이지가 로딩 되는 속도가 저하될것이다. 자바스크립트 기존 자바스크립트에선 import() 함수를 통하여 분리가 가능하다. import() 함수 형태로 메서드 안에서 사용하게 되면 필요할 때 해당 스크립트를 불러오게 되는 것이다. https://appdividend.com/2022/01/24/javascript-import/ react에서 import() 함수를 통한 분리는 어떻게 작동할까 import 함수를 통해 반환된 값은 promise로 resol
[Next.js] 번들 사이즈 최적화 하는 방법
1. 설치 Next.js 프로젝트에서 번들 파일이 어떤 코드로 이루어져 있는지 알고 싶다면, webpack-bundle-analyzer를 사용하는 리액트와 다르게 @next/bundle-analyzer를 사용해야 합니다. 개발 환경에서 사용할 것이므로 개발 의존성 모드로 설치합니다. 2. 관련 설정 추가 next.config.js를 보면 기본적으로 아래와 같은 내용이 있을 것입니다. bundle analyzer에 필요한 부분을 추가합니다. 3. analyze 명령 시에만 동작하도록 설정 package.json의 scripts 부분을 수정해 analyze 명령 시에만 번들 사이즈를 분석하도록 설정합니다. 만약 윈도우에서 개발하고 있다면, 위의 설정만
Webpack bundle 사이즈 최적화
최근상황 요즘은 회사에서 캘린더를 담당하고 있다. 캘린더 모듈을 슈퍼앱 환경 앱스토어에 등록하고, 여러 유저가 사용할 수 있도록 하는 과정을 진행하였다. 웹팩 최적화나 lighthouse 같이 이론상으로만 알고는 있었지만 적용해보지 못한 것을 해보았던 경험을 적어 본다. LightHouse 확인 그간 개발과 기능 추가에만 열중한 탓에 개발된 환경이 얼마나 최적화 되어있을지 확인해보지 못하였어서 local환경에서 크롬의 lighthouse를 확인해 보았다. > 이럴수가.. perfomance 환경이 31점이라는
🍯 info.plist: iOS@ RisingCamp1
본 내용은 학습한 내용을 정리하였기에 일부 틀린 내용이 있을 수 있습니다. 해당 내용 발견시 댓글로 알려주시면 감사하겠습니다 🙏🏻 Information Property List 정의 bundle을 구성하고 있는 key-value쌍을 포함하는 파일 A resource containing key-value pairs that identify and configure a bundle. bundle 이란? 실행가능한 파일들을 보여주는 class A representation of the code and resources stored in a bundle derectory on disk. Info.plist Xcode에서 새로운 프로젝트를 만들면 source file 형식으로 자동으로 생성된다. 
번들과 패키지
Bundle 라고 애플공식문서에 나와있다. package 솔직히 여기까지 봤을때 뭐 차이인지 모르겠다? 그래서 온갖 블로그들과 공식문서를 보면서 정리를 해보려고 한다. 패키지는 객체로 인식되는 것으로 .app, .bundle, .framework 등의 확장자를 가진것을 패키지라 한다. package를 구성하는 코드와 리소스들을 보호해야 하기에 바로 들어가지 못하고 패키지보기를 이용해야 한다. 번들에 접근을 하기 위해서는 Bundle.main을 이용한다. 파일명.확장자의 url에 접근하는 코드이다. Main Bundle은 외부 리소스를 프로젝트에 추가하고 접근할 때 가장 흔히 사용됩니다. 외부의 파일들을 프로젝트에 추가할때마다 뜨는 창이 그 뜻이다. 그때부터 위의 코드를 통해 접근 가능. 그렇다면 또 떠오르는 질문! 프로젝트에서 번들이 무엇인지는 알았는데 이 메인번들의 리소스파일들은 언제 올라가는 걸까? 바로 빌드될때이다.
@next/bundle-analyzer
Reference https://velog.io/@leehyunho2001/nextbundle-analyze
웹팩 이용해 빌드하기 1 - Entry, Output, Bundle
0. 실습할 프로젝트 예제 만들기 딱 한 번만 Lorem ipsum을 출력하는 애플리케이션을 만들어보자! 1) 프로젝트 폴더 만들기 > bash npm init -y js { "name": "fe-sprint-webpack-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "" } 3) entry 파일(index.js)과 불러올 디펜던시 생성 1. 디펜던시 생성 디펜던시(dependency; 의존하는 파일 또는 라이브러리)
CommonJS 와 ES Modules 의 번들 크기 비교
https://web.dev/commonjs-larger-bundles/ 의 예시 코드를 직접 돌려본 결과 입니다. https://github.com/youngkiu/cjs-vs-esm-size CommonJS codes ES Modules codes | lodashpackage & version | webpackversion | CommonJSbundle size | ES Modulesbundle size | |-----------------------------|:-----------------------------------|------------------------:|--------------------------:| | lodash-es@4.17.21 | webpack@4.46.0, webpack-cli@3.3.12 | 102270 |
[Android/Error] Android App Bundle이 서명되지 않았습니다
💌 [Android/Error] Android App Bundle이 서명되지 않았습니다 안드로이드 앱을 구글스토어에 aab 업로드 할 때 > ### Android App Bundle이 서명되지 않았습니다 오류가 뜬다면 📌 해결방법 앱 수준의 build.gradle 확인 debuggable = true 를 로 해주면 해결 완료