본문 바로가기

JavaScript/ETC

react webpack build issue webpack dev 버전으로 보면 잘 보이는데, build 후 dist file을 보면 화면에 잘 보이지 않는다. 이슈 원인: BrowerRouter가 제대로 build 되지 않았기 때문이다 이슈 해결: HashRouter를 사용한다. as-is import * as React from 'react'; import { Switch, BrowserRouter as Router, Route } from 'react-router-dom'; import Home from '../components/Home'; import DynamicPage from '../components/DynamicPage'; const App = () => ( ); export default App; to-be import * as..
protobuf arrayBuffer 우회하기 ios safari에서 protobuf를 사용하면 arrayBuffer가 존재하지 않는다는 오류가 뜬다. .then(blob => { if (blob.arrayBuffer) { return blob.arrayBuffer(); } else { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = function() { resolve(fileReader.result); }; fileReader.readAsArrayBuffer(blob); }); } }) fileReader로 우회하면 된다. 참고: https://developer.mozilla.org/ko/docs/Web/API/File..
[webpack] webpack scripts 명령어에서 분기 처리하는 방법 cross-env 에서 BUILD_TYPE=share, BUILD_TYPE=production 과 같이 매개변수 전달 "scripts": { "dev": "webpack-dev-server --config webpack.config.development.js", "share": "cross-env NODE_ENV=production BUILD_TYPE=share webpack -p --config webpack.config.production.js", "build": "cross-env NODE_ENV=production BUILD_TYPE=production webpack -p --config webpack.config.production.js" }, webpack.config.js에서 process...
if 문 true, false 원문: https://medium.com/front-end-weekly/cheatsheet-for-if-statement-in-javascript-28ec2e0f9be4 Cheatsheet for if Statement in Javascript . Learn the every behaviour of if statement of different values, medium.com
webpack 보일러플레이트 만들기 github: https://github.com/Jeonsol/webpack-boilerplate yarn init -y yarn add babel-core babel-loader babel-preset-env babel-preset-stage-1 html-webpack-plugin webpack webpack-dev-server webpack-cli -d -s 설치된 라이브러리 babel-core: Babel 핵심 의존성 라이브러리이다. Babel(바벨)은 자바스크립트 ES6를 ES5로 컴파일하여 현재 브라우저가 이해할 수 있도록 변환하는 도구다. babel-loader: babel과 webpack을 사용해 자바스크립트 파일을 컴파일한다. babel-preset-env: ES2015, ES2016, E..
Parcel 기본 셋팅 https://trustyoo86.github.io/parcel/2018/02/19/parcel-command.html 불러오는 중입니다...
Web Storage 웹에서 데이터를 저장하는 방법 중 서버가 아닌 클라이언트에서 가능한 방법을 알아보려고 합니다. 웹 사이트의 정보를 저장하기 위해서 반드시 서버가 필요한 것은 아닙니다. 사용 목적에 따라 클라이언트 저장소 역시 좋은 역할을 할 수 있습니다. 일반적으로 클라이언트 저장소를 생각하면 가장 먼저 쿠키 저장소를 떠올리겠지만 HTML5에는 좀 더 효과적인 클라이언트 저장 공간을 제공하는데 어떤 것이 있는지 알아보면 다음과 같죠. localStorage, sessionStorage API 알아보기 HTML5에서는 좀 더 쉽고 간단한 저장소 제공을 위하여 새로운 localStorage와 sessionStorage API를 제공합니다. 둘 다 저장 공간으로 사용할 수 있고 도메인 마다 별도로 저장공간을 생성하는데, 이 ..
Parcel Proxy 설정 // dev-server.js const { createServer } = require('http'); const { createProxyServer } = require('http-proxy'); const Path = require('path'); const Bundler = require('parcel-bundler'); const backEnd = { protocol: 'http', host: 'localhost', port: 3000 }; const parcelEnd = { protocol: 'http', host: 'localhost', port: 8080 }; // parcel options, such as publicUrl, watch, sourceMaps... none of which ..