살다보면 react 를 spa가 아닌 mpa로, 또 배포를 cra가 아닌 webpack으로 할 때가 있다. 더 나아가 html을 여러개로 쪼개는데 cra에서는 html에서 환경변수가 잘 먹혔는데 webpack에서는 안 먹히는 경우도 있다. ​ 보통 CRA로 build할 시 public/index.html에는 환경변수를 이렇게 사용한다. cra로 즉, react-scripts로 build할 시 잘 적용이 되지만 ​ webpack으로 build를 할 시 빌드 파일을 열어보면 그대로 나온다. 이미 new webpack.DefinePlugin()을 이용하여 html이 아닌 react 컴포넌트내에서는 환경변수가 잘 작동되는 것을 확인했었지만 html은 왜 안되는 것일까? 이럴 때 npm install interp..

이렇게 잘 돌아가는 리액트 프로젝트가 있다. 그리고 프로젝트가 스프링 부트 + 리액트 이 구조로 가다 보면 스프링 부트 안에 리액트를 결합시킬 때가 있다. 물론, 리액트 프로젝트의 변경사항이 반영되는 즉 hot loader가 스프링부트 애플리케이션에서 보이는 화면에 바로 적용되지 않는다는 단점이 있지만(이 부분에 대해서는 밑에서 더 설명하겠다.) 스프링 부트와 리액트를 함께 연동한다는 것에는 분명 장점 또한 있다. 1. 프로젝트를 하나만 들고 다니면 되니깐 관리하기가 용이하다. 2. 스프링 부트 서버만 키면 리액트 프로젝트도 함께 켜지니 배포 시에도 용이하다 그렇다면 이제 Spring Boot 내에서 React 어플리케이션 구동시키는 방법을 한 스텝씩 밟아보도록 하자. 1. 스프링 부트 프로젝트 안에 리..

useEffect(() => { $(`#${id}`).hide(); }, []); const fadeIn = () => { $(`#${id}`).show(() => { $(`#${id}`).fadeIn(); }); }; const fadeOut = () => { $(`#${id}`).fadeOut(() => { setMessages?.(defaultList); }); }; 이렇게 되어있는 컴포넌트가 있다. 아주 잘 동작하는 구문이지만 한가지 걸리는게 있었다. 현재 npm에서 jquery 라이브러리를 설치해서 사용하고 있는데 이 프로젝트 내에서 jquery라이브러리를 이 컴포넌트, 즉 한 군데에서만 사용하고 있다. 구글 크롬이 제공하는 기능이 lighthouse를 이용하여 treemap을 보니 한 군데에서..

정규식을 이용한 함수이다. function formatNumber(number) { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } jsFiddle 링크: https://jsfiddle.net/uxt9nwLf/20/

selectionStart를 사용하였고, 3자리마다 반점이 찍히는 것을 고려 하였습니다. 그래서 value의 길이에 따라서 ,뒤인 selectionStart 값을 구하는 공식을 만들어 보았습니다. 이 값이 true가 된다면 그 지점은 ,뒤인 곳입니다. (selectionStart + 1 + ((3 + (3 - (value.length % 3))) % 3)) % 4 === 0

참고: sheetJS의 xlsx.mjs 소스코드와 https://www.youtube.com/watch?v=NAfhj49daQg 에 나와있는 깃허브 코드를 활용하여 사용하였습니다. html에는 표로 된 table 태그가 있습니다. 그리고 살다보면 html table에 있는 데이터를 엑셀로 다운 받아 확인하거나, 보고용으로 사용해야할 때도 있습니다. 저는 테이블과 json데이터를 엑셀파일로 추출하기 위하여 XLSX 모듈을 사용하였습니다. xlsx는 sheet js의 모듈인데요, 이 링크는 sheetjs 공식문서 입니다. 간편하게 보실분은 밑의 블로그로 들어가시면 됩니다. https://wickedmagica.tistory.com/248 [Node.js] Excel 파일 생성하고 데이터 읽기 API : ht..