Webpack 사용 이유

하나의 HTML 문서를 구성하는 콘텐츠는 다양합니다.단순한 마크업 텍스트 뿐만 아니라, css와 폰트 그리고 이미지가 가득합니다.그런데 현대 웹은 더이상 단순한 “페이지”가 아닙니다.콘텐츠가 많은 만큼 사용자 경험을 개선하기 위해 비동기 처리를 하고, 상태를 빠르게 업데이트를 해야 하기 때문입니다.코드가 점점 복잡해지는 문제를 해결하기 위해, 프론트엔드는 공통되는 로직을 추상화하고 분리하는 사고를 코드에 적용하게 되었습니다.즉 모듈화한 것이죠.이는 재사용성을 추구하는 개발자의 입장에서 매우 편리한 해결 방법입니다.하지만 이렇게 많아진 파일을 HTML의 나 를 작성해서 일일이 받아오기에는 문제가 많습니다.css나 js 파일 간 의존성(import)이 있다면 로드 순서를 보장하기 어렵습니다.브라우저는 각 파..

디바운스와 쓰로틀링

디바운스(Debounce)와 쓰로틀링(Throttling)은 웹 개발에서 이벤트 처리를 최적화하기 위해 사용되는 두 가지 기법이다. 이들은 연속적으로 발생하는 이벤트를 효율적으로 관리하여 성능을 향상시키는 데 도움을 준다. 디바운스(Debounce) 디바운스는 연속적으로 발생하는 이벤트 중 마지막 이벤트만을 처리하는 기법이다. 즉, 일정 시간 동안 이벤트가 발생하지 않을 때까지 대기한 후, 마지막에 발생한 이벤트를 실행한다. 이는 사용자가 입력을 멈춘 후에만 처리를 수행하므로, 불필요한 연산을 줄일 수 있다. 사용 사례검색 자동완성 : 사용자가 입력을 멈춘 후에만 서버에 요청을 보내어 검색 결과를 가져온다.창 크기 조절 : 사용자가 창 크기 조절을 멈춘 후에 레이아웃을 재계산한다. 쓰로틀링(Throttl..

pnpm 모노레포 구성하기

Next.js 15와 TypeScript를 사용하고, 패키지 매니저로 pnpm을 활용하여 모노레포를 구성해보자. 보통 이러한 설정은 여러 사이트를 포함하는 apps 폴더와 디자인 시스템 등을 담는 packages 폴더로 구성한다. 1. 프로젝트 초기화 및 pnpm 설치   먼저, 프로젝트 루트를 생성하고 pnpm을 설치한다.mkdir my-monorepocd my-monoreponpm install -g pnpmpnpm init  2. pnpm 워크스페이스 설정 루트에 pnpm-workspace.yaml 파일을 만들고, apps와 packages 폴더를 워크스페이스로 지정한다.packages: - 'apps/**' - 'packages/**' 3. 디렉토리 구조 설정  apps와 packages 폴더..

변수 = 메모리 공간 자체 변수는 값이 아닙니다. 그 값을 담고 있는 공간입니다. 그리고 그 변수의 이름은 공간을 가리키는 주소입니다. 프로그램은 인간이 문제를 해결하는 과정을 컴퓨터로 고대로 옮겨놓은 것 뿐이야. 기계이기 때문에 더 빠르게 반복할 수 있고 천문학적인 숫자를 쉽게 다룰 수 있다는 장점이 있지! 하지만 컴퓨터는 사람의 두뇌 연산과 살짝 차이가 있어. 사람 컴퓨터 두뇌라는 하나의 시스템에서 연산과 기억을 모두 수행 (물론 뇌 안에서도 영역이 있다만 여기서 그것까지 다루지 말자) [연산을 위한 CPU]와 [기억을 위한 메모리]로 나뉨 프로그램이 동작하는 원리는 매우 단순해. 매번 발생하는 새로운 정보를 기존 정보와 융합하는 거야. 사람이랑 똑같지 않아? 우리도 원래 알던 거에 새로운 정보를 추..

오늘은 제가 5일간 전전긍긍해서 얻은 쾌거를 나누고자 합니다. 그것은 바로 node.js에서 zip 파일을 다운로드하는 로직을 구현하는 알고리즘인데요. node.js가 자바스크립트 기반이라고 해서 만만하게 볼 것은 또 아니잖아요..ㅎ python과 flask를 이용할 때는 아주 편합니다. flask 모듈에 내장된 send_file을 이용하면 zip이든 csv든, responseType을 크게 신경쓰지 않아도 클라이언트에 알아서 뿌려 주니까요. 하지만 node.js는 모듈 생태계가 아주 많기에, 딱 '이거다!'라고 정형화된 방법이 없어서 로직의 가짓수가 넘쳐납니다. 이 말은 즉 경우의 수가 많기에 구글링해도 내 상황에 맞는 전례를 찾기 어렵다는 말과 같습니다. 저만의 꿀팁을 공개합니다. node.js로 z..

db.movies.aggregate([ { $match: { cast: { $elemMatch: { $exists: true } }, directors: { $elemMatch: { $exists: true } }, writers: { $elemMatch: { $exists: true } } } }, { $project: { _id: 0, cast: 1, directors: 1, writers: { $map: { input: "$writers", as: "writer", in: { $arrayElemAt: [ { $split: ["$$writer", " ("] }, 0 ] } } } } }, { $project: { labor_of_love: { $gt: [ { $size: { $setIntersecti..