분류 전체보기77 pnpm에 대해 pnpm에 대해 pnpm(performant npm)은 npm의 의존성을 더 효율적으로 관리하기 위해 만들어졌다. 실제로 내부적으로 어떻게 동작해서 기존보다 더 나은 환경을 제공하는지 살펴보자.기존 npm에서 발생하는 이슈디스크 공간 낭비npm 사용시, 사용하는 프로젝트마다 모두 의존성을 개별적으로 갖고 있으므로 중복되는 의존성으로 인해 디스크 공간의 낭비가 있다.패키지 호이스팅의 부작용npm은 의존성 중복, 의존성 충돌등의 이슈를 해결하기 위해 패키지의 호이스팅으로 중복된 패키지들을 관리하기 위한 평탄화가 이루어진다. (npm 3버전 부터 적용) 하지만 이 과정에서 가장 가까운 node_modules부터 모듈을 로드하는 Node.js 규칙 때문에, 의도치 않게 설치한 패키지가 선택되어 의도되지 않은 동.. 2025. 5. 17. Shadow DOM Shadow DOM최근 크롬 익스텐션 개발을 하다가 Shadow DOM에 대해서 접하게 되었는데, 이에 대해 간단히 정리해보았다.Shadow DOM?Shadow DOM이란, 기존에 존재하는 DOM 트리와 독립된 DOM 트리를 생성해주는 기술이다. 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드들로부터의 분리하여 기존의 코드들과의 충돌을 방지하고 코드들이 깔끔하게 유지될 수 있게 한다.사실 Shadow DOM은 사실 완전히 새로운 개념은 아니며 브라우저는 오랫동안 내장 요소(예: , )의 내부 구조를 캡슐화하기 위해 Shadow DOM을 사용해왔다고 한다. Shadow DOM의 구조기본 사용법Shadow DOM을 사용하려면 Element.attachShadow() 메서드를 사용하여 .. 2025. 3. 28. Copy right 자동 생성용 플러그인 만들기 (Webpack) 사내에서 프로젝트 진행시, 프로젝트 내 필요한 파일 추가시 copy right를 추가해야 해야하는 룰이 있다. 그런데 매번 작업자가 파일 생성시 copy right를 의식하지 않으면 누락이 되는 일이 발생하곤 했다. 이를 자동화하는 방법은 없을까 하다가, 최근 Tanstack router를 사용하면서새로운 Route 파일 생성시 플러그인에 의해 routeTree.gen.ts 파일이 업데이트 되는 것에 영감을 받아 copy right 주석 생성용 플러그인을 만들어보게 되었다. (Tanstack router에 대한 자세한 내용은 다루지 않도록 하겠다.)웹팩 플러그인 생성우선 웹팩 문서를 참고 후, 플러그인 생성에 필요한 구성은 다음과 같다.사용하고자 하는 메인 함수 or 메인 클래스 생성apply 메서드 추.. 2024. 9. 18. Page Object Models - Playwright POM? Playwright에서 제공하는 POM(Page Object Model) 개념은, 테스트 코드 작성의 용이성 및 유지 보수 관리를 최적화하면서 테스트 케이스를 작성할 수 있는 접근 방식중의 하나이다. class를 사용함으로써 중복을 줄이고 장황한 테스트 코드의 추상화를 통해 유지 관리를 단순화한다. How? Init // playwright.dev 기준 작성 import { Locator, Page, expect } from '@playwright/test'; export class InitPage { readonly page: Page; private getStartedLocator: Locator; constructor({ page }: { page: Page }) { this.. 2023. 10. 16. 소스맵 정리 내용 정리 배경 현재 사내에서 Svelte로 진행하고 있는 프로젝트가 있는데, dynamic route 에서의 작업 도중 params값에 .map.css text가 담기는 이슈를 확인하였다. 더군다나 브라우저 devtools를 켰을 때만 해당 이슈가 발생하였는데 확인해보니 vite 및 소스맵 관련 이슈였고, 이로 인해 새로 알게된 소스맵에 대해 간단하게 정리해보았다. 소스맵이란? 소스맵(source map)은 원본 소스 코드 파일과, 변환된 소스 코드 사이의 매핑 정보가 선언된 파일이다. 주로 JS나 CSS와 같은 파일들의 경우, 실제 프로덕트를 배포하기 위해 빌드 진행시 파일들이 압축된다. 이때 압축한 파일에서 에러가 났을때 압축한 파일들만 가지고는 디버깅이 어려워지므로, 원본 소스 코드를 찾을 수 있.. 2023. 9. 28. 캐싱 정리 캐싱이란? 데이터나 값을 미리 복사해놓은 장소, 혹은 임시 동작 해당 데이터에 대한 재요청이 있을 경우, 데이터의 기본 저장소에 액세스할 때보다 더 빠르게 요청 처리 가능 캐싱 종류 디스크 캐시 하드 디스크의 데이터를 RAM에 임시 저장하여 접근 속도를 높이고자 하는 방식 빠른 응답 속도를 제공하며, 애플리케이션이 실행 중일 때만 유효 읽기 속도 개선 + 반복적으로 읽는 데이터에 유용 메모리 캐시 RAM과 CPU 사이에 위치하여, 데이터에 빠르게 접근하고 처리속도를 높이고자 하는 방식 Cache-control 속성별 특징 no-cache: 캐시를 사용하기 전, 서버에게 cache 유효성 여부 체크를 받은 후 사용 결정(max-age=0과 동일) no-store: 캐시 사용 X, 원본 리소스 요청, 응답 .. 2023. 8. 6. 이전 1 2 3 4 ··· 13 다음
