생계유지형 개발자/JS Framework 14

[Webpack5] 배포환경 별 빌드 설정 및 실행하기 (webpack-merge, dotenv)

내가 일하는 곳에서는 배포환경을 주로 다음과 같이 셋 또는 넷으로 설정한다. Local Develop Real Staging 이번에는 webpack 사용하여 공통 js모듈을 개발했는데 빌드 설정 하면서 웹팩에서 기본으로 사용하는 mode 이름 때문에 조금 애먹었다. 웹팩에서 사용하는 mode는 none | development | production 세 종류가 있는데, none은 말 그대로 논이고, development가 이제 내가 생각하는 Local 느낌이고 production이 real 같은 배포용이다. mode를 저 세개 외에 다른 이름은 사용할 수 없다. 다른거 입력하면 웹팩 실행할 때 에러난다. 나는 개발환경에 배포하는거 이름을 굳이굳이 development로 하겠다고 package.json 스..

[webpack5] HtmlWebpackPlugin 사용하여 html 번들링 시 js 골라서 삽입하기

하나의 프로젝트 안에서 디바이스 별로 디렉토리를 나누어 pc용 모듈, mobile용 모듈을 따로 개발하려고 한다. 즉, 한 번의 빌드로 pc.js, mobile.js 라는 산출물을 만들어야 한다. 2개 이상의 js 파일로 번들링 하기 위한 설정이다. // webpack.config.js entry : { index: ! isDev ? './dist/index.js' : './src/pc/index.js', mobile: ! isDev ? './dist/mobile.js' : './src/mobile/index.js' }, output: { filename: "[name].js", chunkFilename: '[name][id].js', path: path.resolve(__dirname, 'dist'),..

[Svelte] .env 빌드환경 설정 및 프로퍼티 사용하기 (dotenv, rollup)

빌드환경에 해당하는 .env 파일 사용하기 먼저, 필요한 노드모듈을 설치한다. npm install --save-dev dotenv @rollup/plugin-replace 빌드환경은 로컬PC(local), 개발서버(development), 운영서버(production) 총 3가지로 분류할 것이며 이를 Mode라 명칭할 것이다. 프로젝트 루트경로에 모드별 .env 파일을 생성하고 프로퍼티를 작성한다. .env.local (mode: local) .env.dev (mode: dev) .env.real (mode: real) 앱 실행 스크립트에 mode 환경변수를 추가한다. --environment MODE:[모드] // package.json { "scripts": { "build-development":..

[vue] <img src="[object Module]"> 이미지가 나오지 않을 때

vue-cli 라던가 웹팩의 설정은 역시 너무 어렵다... .vue 파일 안에 작성된 태그가 정상경로를 입력했음에도 불구하고 화면에 이미지가 나오지 않았다. 요소 검사를 해보니, src 속성값이 [object Module] 로 나오더라. 해결하고 나니 방법은 허무하리만치 간단했지만, 몇 시간을 고생했다. ㅠ vue-cli를 사용한다면 vue.config.js 파일에 아래와 같이 esModule: false 를 설정하면 말끔하게 해결된다. vue.config.js // vue.config.js module.exports = { /* 이미지 파일 (svg 제외) */ config.module.rule('images') //.test(/\.(png|jpe?g|gif)(\?.*)?$/) .use('url-loa..

scss 파일에서 url 오류날 때 (@import와 src 사용하기)

vue 파일에 스타일시트를 적용하는 방법은 두 가지가 있다. 하나는 요소 안에 @import를 선언하는 것이고, 다른 하나는 똑같이 scss를 적용하는 방법이지만 동작 방식에는 차이가 있다. @import를 사용하면 vue를 빌드하고 실행할 때 내부적으로 sass-loader 모듈의 buggy url() handling을 사용한다. 반면에 src로 정의하면 파일 자체를 load한다. 문제는 다음과 같은 상황에서 발생한다. css 에서 url(이미지 경로) 속성으로 이미지를 불러올 때, @import 방식을 사용하면 위와 같은 상대경로는 오류가 발생한다. 만약 scss 파일에 url('../../images/background_test.jpg')라는 표현을 썼다면 다음과 같은 오류가 날 것이다. ./~/c..

[Vue] Vue CDN으로 사용 시 this가 window를 가르킬 때

Vue 프로젝트가 아닌 html에서 CDN 방식으로 사용할 때 종종 this.데이터 또는 this.메소드가 동작하지 않을 때가 있다. this가 vue가 아닌 전역 글로벌 객체인 window를 가르킬 때 이다. 특히 자주 쓰이는 axios 비동기 호출을 한 후 콜백처리할 때 this를 사용해도 vue가 동작하지 않는 것이 대표적이다. 아래 샘플코드처럼 getMyList 메소드 내에서 this는 vue를 가르키지만, axios.then() 콜백함수의 this는 window를 가르킨다. new Vue({ el: '#container', data: { mylist: [] }, methods: { getMyList() { this.mylist = Array()// this -> vue axios.get("/v1..