#webpack

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

vite에 관하여 질문드립니다.

프로덕션에 vite를 사용하여 개발환경을 구성하려고 공부 중인데, 궁금한 점이 생겼으나 정보가 파편화되어있어 정확한 이해가 어려워 질문 올립니다! 제가 vite 공식 가이드와 구글링하면서 이해한 바로는 “기존 브라우저 환경에서는 모듈화된 코드들을 브라우저가 읽을 수 없어 webpack과 같은 번들러를 이용해 하나의 파일로 합치는 과정을 거쳤고, 이것이 일반적인 번들러의 역할이었으나 브라우저가 ESM을 지원하면서 import, export를 별도의 도구 없이 브라우저 자체에서 해석할 수 있고 처리할 수 있게 되었으며 vite는 이 점을 활용하여 번들링 과정 없이 바로 실행하여 파일이 import되어 필요할 때 불러오는 방식을 사용한다. “ 라고 이해했는데 혹시 맞을까요? 추가로 vite의 공식 가이드에는 “프로덕션에서 번들 되지 않은 ESM을 가져오는 것은 중첩된 import로 인한 추가 네트워크 통신으로 인해 여전히 비효율적입니다” 라고 나와있는것을 보았을때, 위에 적힌 번들링없이 실행하는 것은 개발모드에만 사용되며, 프로덕션에는 여전히 webpack과같이 번들링을 진행하며 webpack대신 Rollup을 사용한다는 점만 다르다고 이해하였는데 이부분에서 틀린내용이 있을까요? 만약 그렇다면 vite가 강조하는 장점이 프로덕션에는 크게 작용하지않는다고 느껴져서요. 질문 자체가 잘못되었거나 ,틀린내용이 있다면 편하게 지적주시고 알려주시면 감사드리겠습니다!

React + Nginx 프로젝트 Docker build 시간이 오래 걸리는 이유

React 프로젝트를 빌드했을 때와 React + Nginx 기반 프로젝트를 Dockerfile로 build시 두 작업의 시간 차이가 많이 나는 상황입니다. docker 이미지 빌드시 npm run build 커맨드 실행에 거의 모든 시간이 소모됩니다. 그래서 react 빌드 시간을 줄이기 위한 esbuild 적용, webpack 커스터마이징 및 dockerfile 최적화를 위한 dockerfile 멀티 스테이지 적용, 이미지 캐시 레이어 사용을 위한 dockerfile 스크립트 수정도 해봤습니다. 그런데도 일반 build(react 프로젝트 build 약 40초)와 docker 이미지 빌드(약 8분) 시간의 차이가 많이 나는데 차이가 많이 나는 원인을 파악하는 방법이 뭐가 있을까요?? dockerfile 스크립트도 참고로 올려봅니다.

dev dependency가 build에 영향이 갈까요?

webpack을 사용하여 build를 진행할때 js 코드를 번들링 시켜 하나의 파일로 만들어 리소스 요청 수를 줄인다고 알고있는데요, 그렇다면 프로젝트에 사용되는 package랑은 연관이 없을까요??

Webpack bundle 작업이 그냥 react client server에 영향을 미치는건가요?

현재 최적화를 경험해보고자 기존 react 프로젝트를 webpack 5와 함께 splitting 작업을 진행하고 있습니다. 여기서 드는 궁금증이 webpack dev server로 서버를 키지 않고 일반 react-scripts start 로 서버를 켜도 webpack으로 진행한 최적화 등이 반영이 되는걸까요? LightHouse로 확인했을 시에 bundle파일의 용량이 줄어있어서 점수가 10점가량 올라간 것을 확인했습니다. (참고로 react.lazy 또한 반영을 했습니다.)

webpack-dev-server proxy설정으로 cors 정책 우회가 가능한 이유

안녕하세요, 2년차 프론트엔드 개발자입니다. 최근 모회사 프론트엔드 직무 면접을 보던중, cors에 대한 질문을 받았었습니다. 이에 대해 제가 드린 답변은 아래와 같았습니다. "cors는 다른 출처임에도 불구하고 브라우저상에서 서로 상호작용이 가능하도록하는 정책이고, 이를 정석적으로 사용하기위해서는 Backend 서버에서 HTTP 응답 헤더의 Access-Control-Allow-Origin 속성에 Frontend 서버의 origin을 추가해주면 된다. 또한, Frontend단에서 개발간에는 위에서 말한 Backend 서버측에서의 작업없이도 webpack-dev-server의 proxy설정을 사용하면 proxy서버가 Backend 서버의 origin과 동일한 origin에서 상호작용해줌으로써 cors 정책관련 이슈를 우회할 수 있다." 위 답변에 추가로 면접관께서 여쭤보셨던 것은 "개발간에 어쨌든 로컬에서 proxy서버를 띄울텐데, 그 서버가 어떻게 Backend 서버와 같은 origin으로 상호작용할 수 있느냐?" 였는데요, 제대로 된 답변을 드리지 못하고 면접이 끝난 뒤에도 찾아본다고 찾아봤지만 해당 내용에 대해서 명확한 이유를 찾지못하였습니다. 제가 네트워크 지식이 부족해서 기본적인 proxy개념을 이해하지 못하고 있을 수도 있는데요, 혹시 관련 내용에 대해 잘 아시는 분이 계시다면 알려주시면 감사하겠습니다!