반응형 Web25 pnpm Catalog로 monorepo workspace 패키지 버전 통일하기 📒 pnpm catalog로 monorepo workspace 패키지 버전 통일하기여러 프로젝트를 monorepo로 묶으면 반드시 공통으로 사용하는 패키지가 있기 마련입니다.예를 들자면 react, typescript, prettier, eslint, @types/.... 등등등아무래도 하나의 workspace에서 중복되는 패키지들을 동일한 버전으로 통일하면 여러모로 관리하기 용이하다고 생각되는데요.이럴 때 pnpm Catalog protocol을 사용한다면 이러한 고민들을 한방에 해결할 수 있습니다. 📌 pnpm Catalog란?pnpm Catalog는 workspce 기능으로, 의존성 버전 범위를 정의해 둔 상수입니다.패키지들의 버전을 pnpm-workspace.yaml에 catalog로 정의해 .. 2025. 3. 23. Turborepo와 PNPM으로 Monorepo 시작하기 📒 Turborepo와 PNPM으로 Monorepo 시작하기요즘엔 모놀리식 혹은 멀티레포 구조보다 중복 코드와 의존성 관리 측면에서 유리한 모노레포 구조가 많이 사용됩니다.모노레포 구조를 구축하는 방법엔 여러 가지가 있지만 저는 Turborepo로 손쉽게 환경을 구축하는 방법을 소개합니다. 📌 Turborepo란?Turborepo는 Vercel에서 개발한 JS/TS 모노레포 빌드 시스템입니다.기존 모노레포 관리 도구인 Lerna나 Nx와 유사하지만, 더 빠르고 효율적인 빌드 성능을 제공합니다. 주요 장점은 다음과 같습니다.캐싱 및 병렬 실행같은 작업을 여러 번 실행하지 않고 결과를 캐싱하여 불필요한 중복 빌드를 방지여러 패키지의 빌드를 병렬로 실행하여 속도 최적화효율적인 의존성 분석각 패키지의 의존성.. 2025. 3. 16. package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook 📒 package.json scripts의 생명주기 스크립트, NPM LifeCycle Hook이번에 이직을 하게 되어 기존 코드를 이리저리 파악해 봤습니다.리드분과 Q&A를 하던 중 package.json scripts의 생명주기에 대한 이야기를 스치듯 들었고, 궁금해서 자세히 찾아보게 되었습니다. 📌 package.json의 scripts"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint"},위는 next.js에서 흔히 보던 스크립트 필드입니다.해당 스크립트를 실행시키기 위해 사용하는 패키지 매니저에 따라 npm run dev / yarn dev / pnpm dev와 같.. 2024. 12. 30. 지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024. 4. 10. [CSS] Animation 최적화 ⚡ CSS 애니메이션CSS로 애니메이션을 만들어줄 때 데스크톱이나 노트북으로 부드럽게 작동하는 것을 확인했어도막상 핸드폰으로 볼 때 엄청나게 버벅이는 경우가 있습니다. 이러한 현상은 스마트폰의 성능이 아무리 좋아졌다고 해도 비교적 떨어지기 때문입니다. 즉, 애니메이션 효과는 생각보다 컴퓨팅 파워를 많이 소모하고 최적화가 되어 있지 않으면 성능에 문제가 생긴다는 말과 같습니다. 그럼 웹에서 애니메이션이 동작하는 과정과 최적화하는 방법에 대해 알아보겠습니다.📌 브라우저 렌더링 과정브라우저에서 UI를 렌더링 하는 과정을 요약하면 다음과 같습니다.Recalculate Style스타일을 계산하는 과정입니다.작성된 CSS를 파싱해 CSS Object Model을 생성합니다.Dom Tree와 CSS Object M.. 2023. 6. 19. [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023. 1. 10. 웹프로젝트 문자인증 구현하기 with 네이버 클라우드 플랫폼 ⚡️Naver Cloud Flatform SENS API를 통한 문자인증 이번 JAVA - Spring 숙박 플랫폼 프로젝트의 회원가입 기능에 휴대전화를 통한 문자인증 기능을 구현했습니다. 인증문자를 휴대폰으로 전송하는 기능은 네이버 클라우드 플랫폼의 SENS를 이용하였습니다. 그럼 기능 구현을 위한 단계를 차례대로 소개합니다. ⚡️Naver Cloud Flatform 세팅 NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 우선 위 링크로 이동해 회원가입을 진행해줍니다. 📌 인증키 .. 2022. 5. 30. REST API에 대해 ⚡️최근 프로젝트에서... 숙박플랫폼 GOING 🎒숙박플랫폼 GOING www.notion.so 최근 자바와 스프링 기반으로 제작한 숙박 플랫폼 프로젝트가 있습니다. 프로젝트의 데이터 조회는 GET 방식으로, 삽입, 수정, 삭제는 POST 방식으로 하게 되었는데, 이런저런 API들을 사용하다보니 REST API라는 키워드가 계속해서 눈에 띄게 되었습니다. 당시에는 아임포트 API, 카카오 API, 문자 전송 API들이 RESTful 하게 설계 되어있음에도 불구하고 사용에만 급급해서 작동만 되도록 코드를 작성하였는데, 시간이 지난 지금 REST API에 대해 공부하다보니 위 프로젝트에서 REST 아키텍처를 도입해 URL을 설계했다면 훨씬 나은 완성도를 챙길 수 있다는 생각을 합니다. ⚡️REST API란?.. 2022. 5. 23. [HTML] input 태그의 date 속성 value 날짜 포맷 지정과 기간 설정하는 방법 ⚡️JAVA 날짜 포맷 변환과 계산 [Java/자바] 날짜-Date의 모든 것 (현재-내일 날짜, Date 포맷 변환, 날짜 차이 계산, 더하기, 빼기) [Java/자바] 날짜-Date의 모든 것 (현재-내일 날짜, Date 포맷 변환, 날짜 차이 계산, 더하기, 빼기) ⚡️자바의 날짜 숙박 예약 프로젝트를 진행하다보니 날짜를 다룰 일이 많았습니다. 현재 날짜 구하기 날짜 더하고 빼기 두 날짜 계산하기 프론트와 백앤드의 Date 포멧이 다르기 때문에 포맷변 lasbe.tistory.com 자바로 날짜를 다룰 때 이 글을 참고해주세요! ⚡️ input 태그의 date 속성은 달력 형태로 날짜를 선택할 수 있는 기능을 제공합니다. 이번 프로젝트에서 예약 기능이 핵심 로직이기 때문에 날짜를 계속해서 다루게 되.. 2022. 4. 16. 반응형 이전 1 2 3 다음
오픈 채팅
