104%

개발을 하다보니 이런 에러가 생겨서 원인을 찾다가 폴리필 문제라는걸 깨닫고 정리합니다. Core.js 2019년 3월 공개된 폴리필 라이브러리이다. 바벨 7.4 이상 버전과 core-js@3를 같이 사용해야 동작한다. 기존의 폴리필 라이브러리들 @babel/polyfill 이 폴리필은 제너레이터 폴리필인 regenerator-runtime과 core-js를 합쳐서 만든 폴리필임. 전역공간에 폴리필을 채워 넣는 방식이기 때문에 전역공간이 오염되어 폴리필 충돌 가능성이 있다는 단점이 있음. 브라우저에서 이미 구현된 필요하지 않은 폴리필까지 전부 번들에 포함되어 번들 크기가 커지는 단점이 있음. 번들 크기는 커지지만, 실행될때는 브라우저에서 구현되지 않은 문법만 실행하기 때문에 빠르다는 장점이 있음. (최신 ..

평범한 import 방식 import React from 'react'; // Import the default export from a module. import { Component, PropTypes } from 'react'; // Import named exports from a module. import * as Redux from 'react-redux'; // Named import - grab everything from the module and assign it to "redux". Bare Import import 'react'; 이런식으로 모듈을 가져오기만 하고 변수에 할당하지 않는것을 Bare Import라고 한다. Bare는 "없는" 이라는 뜻이다. Bare Import => ..

프로젝트 구조 현재 프로젝트는 yanr workspace와 lerna를 활용한 모노레포로 구성되어 있다. 각 패키지에서는 웹팩을 사용하고 있는데 문제는 yarn install로 패키지를 설치할때 yarn workspace가 자동으로 각 패키지간 중복된 모듈들을 루트에 딱 한번만 설치해주는 hoist기능을 해준다는것이다. multiwrite라는 패키지를 webpack-dev-server로 오픈하려고 할때 위와 같은 오류가 발생했다. 원인은 multiwrite 패키지는 cra로 생성된 프로젝트라 웹팩 4.42.0버전을 요구하고 있는데 프로젝트 루트에 설치된 웹팩의 버전이 4.43.0이기 때문에 오류가 발생할 가능성이 있어서 이렇게 길고 긴 에러 메세지를 뱉어주고 있는것이다. 세 패키지의 웹팩 버전을 ^4.4..

Given a string s, find the longest palindromic substring in s. You may assume that the maximum length of s is 1000. Input: "babad" Output: "bab" Note: "aba" is also a valid answer. Input: "cbbd" Output: "bb" 생각의 흐름 일단 가장 쉬운 풀이를 생각해보았다. 시작점과 길이를 바꿔가면서 2중 for문으로 풀면 풀릴것같았다. 다만 중복 계산이 너무 많다. 이전에 계산했던 결과를 이용하면 그 다음 문제를 해결하는데 사용할 수 있다. 어떻게 하면 중복 계산을 제거할 수 있을까 고민하던 찰나에, 팰린드롬의 특성을 이용해보자는 생각이 들었다. 팰린드롬은 ..

2020년 키워드의 흐름 최근엔 고객 한명 한명 수준의 타게팅이 아닌 더 잘게 나눈 0.1명 규모로 타게팅한다. 이걸 초개인화 기술이라고 한다. 예전엔 10명의 고객이 있으면 10개의 시장이 있다고 했었는데 요즘엔 100개의 시장이 있다고 해도 과언이 아니다. 고객들은 특정 상황과 맥락에 따라 소비를 한다. 고객들이 좋아하는 그 특정 상황과 맥락을 저격하면 그때마다 새로운 시장이 열리는것이다. 그래서 요즘엔 "특화", "개인화"가 더더욱 중요해졌다. 최근 변화중 가장 주목할 현상은 "성장"이다. 밀레니얼 세대들이 만들어가고 있는 "업글인간" 트렌드는 엄청난 시장을 만들어내고 있다. 무한 경쟁에 익숙한 이 밀레니얼 세대들은 그 어떤 세대들보다 "공정성"에 민감하다. 올해 키워드중 가장 주목해야 하는 것은 ..

타입스크립트에는 esmoduleinterop라는 컴파일러 옵션이 있는데 이 옵션을 켜면 Commonjs방식으로 내보낸 모듈을 es모듈 방식의 import로 가져올 수 있게 해준다. 모듈 방식이 왜이렇게 많아? ES6에 정식으로 자바스크립트에 모듈 시스템이 도입 되기 전부터 사람들은 자바스크립트 파일을 여러개로 쪼개고 다시 합치는 번들러가 필요했다. 그래서 직접 라이브러리를 만들어서 사용하곤 했는데 그때 나온 유명한 모듈 시스템들이 CommonJS와 AMD이다. 그래서 ES6에 모듈 시스템이 도입되고 나서도 구형 브라우저를 지원하기 위해 바벨로 ES6 -> ES5로 변환하고 난 다음, ES모듈을 CommonJS방식으로 트랜스파일해서 기존 번들러가 잘 동작하도록 변환하여 사용했었다. 이미 CommonJS방식..

import 'bootstrap/js/dist/modal'; import 'bootstrap/js/dist/dropdown'; import 'bootstrap/js/dist/tooltip'; import 'bootstrap/dist/css/bootstrap.css'; 프로젝트에 summernote 에디터를 붙이는 도중 이 에디터가 내부적으로 부트스트랩을 사용해서 모듈을 설치하고 진행하던 중 bootstrap/dist/css/bootstrap.css를 로더가 처리하지 못하는 이슈가 발생했다. 그런데, 스토리북 기본 웹팩 설정을 살펴보면 기본적으로 style-loader, css-loader, post-cssloader등이 적절히 셋팅 되어 있다. 그럼에도 불구하고 왜 부트스트랩의 node_modules 내..

{props.items.map((TabComponent, index) => { return ; })} items에 들어있는 컴포넌트들을 순서대로 뿌려주려고 하던 도중 아래와 같은 오류가 발생했다. JSX element type 'TabComponent' does not have any construct or call signatures. 원인 생성자와 인스턴스의 차이때문이다. // 컴포넌트 선언 class Greeter extends React.Component { render() { return Hello, {this.props.whoToGreet}; } } // 올바른 컴포넌트 사용 return ; // 잘못된 컴포넌트 사용 let Greet = new Greeter(); // 인스턴스화된 컴포넌트를..