행복한 가족, 패밀리그램

개발 49

JavaScript: 두 배열을 순차적으로 섞는 방법

JavaScript에서 두 개의 배열을 순차적으로 섞는 작업은 데이터 처리나 알고리즘 구현 시 자주 발생하는 문제입니다. 이번 포스팅에서는 이 문제를 해결하는 효과적인 방법과 코드 예시를 살펴보겠습니다.핵심 개념: zip 함수두 배열을 순차적으로 섞는 핵심 아이디어는 zip 함수를 활용하는 것입니다. zip 함수는 두 배열을 입력으로 받아 각 배열의 같은 인덱스에 있는 요소들을 쌍으로 묶은 새로운 배열을 반환합니다. 이렇게 생성된 쌍들을 다시 풀어서 하나의 배열로 만들면 원하는 결과를 얻을 수 있습니다.코드 예시function zip(a, b) { const length = Math.min(a.length, b.length); const result = []; for (let i = 0; i 설명z..

개발 2024.09.24

JavaScript 배열 섞기: 핵심 정리

JavaScript 배열 섞기: 핵심 정리JavaScript에서 배열의 요소 순서를 무작위로 섞는 것은 다양한 상황에서 유용하게 활용될 수 있습니다. 퀴즈 앱, 카드 게임, 랜덤 이미지 슬라이드 등 예측 불가능성을 더하고 싶을 때 배열 섞기는 필수적인 기능입니다. 이번 포스팅에서는 JavaScript에서 배열을 섞는 다양한 방법과 각 방법의 장단점, 그리고 상황에 맞는 적절한 선택 방법을 알아보겠습니다.1. Fisher-Yates 알고리즘가장 널리 사용되고 효율적인 방법입니다. 원본 배열을 직접 수정하며 섞습니다.function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random(..

개발 2024.09.24

<a href>에 history.back() 넣기

에 history.back() 넣기: 웹 개발 꿀팁웹 개발을 하다 보면 사용자를 이전 페이지로 돌려보내야 할 때가 있습니다. 이럴 때 태그와 history.back()을 활용하면 간단하게 구현할 수 있습니다. 오늘은 이 방법을 몇 가지 예시와 함께 알아보겠습니다.1. JavaScript href 활용가장 직관적인 방법은 태그의 href 속성에 자바스크립트 코드를 직접 넣는 것입니다.이전 페이지로 이동2. onclick 속성 활용 태그의 onclick 속성에 자바스크립트 함수를 호출하여 이전 페이지로 이동하는 기능을 구현할 수도 있습니다.이전 페이지로 이동return false;는 링크의 기본 동작(페이지 이동)을 막아주는 역할을 합니다.3. JavaScript 함수 분리자바스크립트 코드를 별도의 함수..

개발/HTML,CSS 2024.09.21

맥북 화면 분할, 이제 마그넷으로 끝! 🧲

맥북 화면 분할, 이제 마그넷으로 끝! 🧲 혹시 널찍한 32인치 4K 모니터나 듀얼 모니터, 기형적인 32:9를 쓰면서도 화면을 제대로 활용 못 하고 계신가요? 😥 맥북 유저라면 필수! '마그넷(Magnet)' 👏  📌 마그넷, 넌 누구냐?!  Magnet은 쉽고 빠르게 맥북 화면을 분할해주는 앱이에요. 여러 창을 동시에 띄워놓고 작업할 때 완전 유용하죠! 🤩 특히 32인치 4K 모니터는 좌우 분할, 듀얼 모니터는 3분할까지 ⚡ 순식간에 ⚡ 가능!  ✨ 마그넷, 왜 써야 해?🚀 빠르고 간편한 화면 분할: 복잡한 설정 없이, 원하는 위치로 창을 드래그하거나 단축키를 사용하면 착! 하고 분할됩니다.⌨️ 편리한 단축키: 자주 쓰는 분할 레이아웃은 단축키로 지정! 효율 UP! 👍💸 합리적인 가격..

개발 2024.09.03

CloudFront Function를 이용한 Host Redirect

CloudFront를 이용한 Host Redirect  배경 CloudFront(CF) 잘 쓰고 있었는데 갑자기 Redirect가 필요해졌다. 근데 하필 static website라 nginx나 node 서버에서 Redirect를 못하는 상황. 문제 해결 과정 처음엔 Route 53 DNS를 바꾸면 되겠지 했는데, 요구사항이 A 사이트에서 B 사이트로 넘어가는 거였다. 중간에 서버가 있었으면 쉬웠을 텐데... 결국 CloudFront Function을 쓰기로 했다. CloudFront Function 생성: CloudFront > 함수에서 cloudfront-js-2.0으로 함수 생성!함수 코드 작성: 참고 문서(https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/..

개발 2024.06.26

jszip is not a constructor !!!

jszip is not a constructor react-scripts 를 5로 업데이트하고 발생하는 문제. 사용하는 라이브러리에서 발생하는 문제인데, 원인을 파악해 보니 이렇다. tempa-xlsx의 xlsx.js ... var _fs, jszip; if(typeof JSZip !== 'undefined') jszip = JSZip; if (typeof exports !== 'undefined') { if (typeof module !== 'undefined' && module.exports) { if(has_buf && typeof jszip === 'undefined') jszip = require('js'+'zip'); if(typeof jszip === 'undefined') jszip = r..

개발/React 2023.10.27

React Scripts 4.x -> 5.x 마이그레이션

React CSR 프로젝트를 사용한다면 CSR 프로젝트에서 react-scripts 4.x 버전에서 5.x 버전으로 마이그래이션 시 엄청난 빌드에러가 발생한다. 가장 대표적인 빌드에러가 webpack 5 관련 에러이다. 구글링해서 찾은 해결책은 다시 react-scripts 4.x 를 사용하면 된다... 라는 결과이던데 이건 내가 찾는 결과가 아니다 그럼 어떻게 해결해야 할 것인가 webpack config 설정을 변경해야하는데, 그러려면 eject 는 사용하지 않고 해결하고 싶다. 준비물은. dev dependencies 추가 crypto-browserify stream-browserify config-overrides.js 파일 추가 react-app-rewired package.json script..

개발/React 2023.10.26

React Chunk hash를 제거 해보자

SPA React 프로젝트를 build 하면 static 폴더에 chunks js, css file 이 생성된다. 매번 build 시 chunk file의 middle name으로 hash 값이 들어가는데, 해당 hash 값 때문에 SPA 프로젝트 업데이트 시 Loading chunk failed 에러가 자주 발생한다. chunk failed 는 main.js 파일이 브라우저에 캐싱되어 static 또는 dynamic 서버에 요청한 js 파일이 없어 index.html을 chunk.js를 대신 사용하여 발생하는 에러이다. 간단한 static web 프로젝트라면 chunk의 hash값을 제거하는것 만으로도 일단 에러는 피할 수 있다. 물론 hash 를 제거한다면 다른 문제가 발생할 수 있다. 해당 문제는 ..

개발/React 2022.04.15

Plotly js, xAxis time series 빈 데이터 제거. aka 휴일 제거

Plotly, 많이 사용하는 차트 라이브러리. d3를 이용하여 다양한 차트와 다양한 언어를 제공한다. 문서도 잘 정리되어있다 일별 매출을 차트로 표시하고 싶은데, 주말에는 휴일이 아닌가 ? 불편. 너의 빈 공간을 격하게 채워주고 싶다 layout-xaxis-rangebreaks Layout.xaxis Figure plotly.com xaxis 속성인 rangebreaks 를 설정하면 된다 rangebreaks 속성 중 pattern 도 있긴한데, 우리나라 공휴일은 보장되지 않으니 X axis array 의 첫 번째(start) 와 마지막 (end) 까지 체크하여 y 값이 없는 경우 제외 시키기로 한다 // dates 는 x axis array const to = moment(dates[dates.leng..

개발 2022.04.12