개발 메모장 개발 메모장

next

• pnpm으로 갈아타기

  Tip 2024. 10. 25. 15:35

  프론트엔드 개발을 하다 보면 다양한 패키지 매니저를 접하게 되는데, npm, Yarn 외에도 요즘 각광받고 있는 또 다른 선택지가 있습니다. "Performant npm"의 약자인 pnpm은 설치 속도와 디스크 공간 활용 면에서 탁월한 성능을 자랑합니다.pnpm의 장점1. 빠른 설치 속도pnpm은 패키지를 중앙 캐시에서 관리하고, 하드 링크를 통해 설치하기 때문에 일반적인 npm이나 Yarn보다 훨씬 빠릅니다.하드 링크 : 파일 시스템에서 동일한 파일을 여러 경로에서 접근할 수 있게 해주는 방식으로, 실제 파일은 하나만 저장되며 여러 위치에서 공유됩니다. 이를 통해 중복 저장을 피하고 디스크 공간을 절약하면서도 빠르게 설치가 가능합니다.2. 디스크 사용 효율성동일한 패키지를 여러 프로젝트에서 사용할 때,..

  Read More
• TypeScript 유틸리티 타입 소개

  JS & TS 2024. 10. 11. 14:38

  TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..

  Read More
• StyleX 소개하기(feat. Next.js)

  Tip 2024. 10. 4. 19:01

  최근 웹 개발에서 스타일링을 위한 기술은 빠르게 발전하고 있으며, 그중에서도 Meta(Facebook)가 개발한 StyleX는 성능 최적화와 유지보수를 쉽게 하기 위한 정적 컴파일 기반 스타일링을 제공하는 흥미로운 접근 방식을 보여주고 있습니다.CSS-in-JS vs StyleX: 차이점은 무엇일까?기존 CSS-in-JS 솔루션들은 컴포넌트별 스타일을 쉽게 관리하고 동적인 스타일링을 가능하게 해주는 장점을 가지고 있습니다.대표적인 예로는 styled-components, Emotion 등이 있으며, 각기 다른 방식으로 컴포넌트의 스타일을 JavaScript 코드에 통합해 편리함을 제공해 왔습니다.그러나 CSS-in-JS는 런타임에서 스타일을 생성하고 주입하는 과정에서 성능 저하나 FOUC(Flash of..

  Read More
• 마이크로 서비스 아키텍처(Microservice Architecture) 소개

  Tip 2024. 10. 2. 17:43

  Microservice Architecture는 현대 소프트웨어 개발에서 주목받는 아키텍처 스타일입니다.전통적인 Monolithic Architecture와 비교하여 MSA가 제공하는 여러 이점을 살펴보겠습니다.Microservice Architecture란?Microservice Architecture는 애플리케이션을 작은 독립적인 서비스들로 분해하여 개발하는 접근 방식입니다.각 서비스는 자체적인 비즈니스 기능을 수행하며, 가볍고 표준화된 인터페이스(예: RESTful API)를 통해 다른 서비스와 통신합니다.이는 서비스별로 독립적인 배포와 확장을 가능하게 합니다.Monolithic Architecture란?Monolithic Architecture는 애플리케이션의 모든 구성 요소가 하나의 코드베이스와..

  Read More
• 웹 성능 최적화 기법

  Tip 2024. 7. 1. 15:10

  웹 성능 최적화(Web Performance Optimization, WPO)는 빠르고 원활한 사용자 경험을 보장하기 위해 필수적입니다.이는 사용자 유지와 SEO에 매우 중요합니다.웹 성능을 향상하기 위한 주요 기법과 모범 사례를 소개합니다.웹 성능 최적화를 위한 주요 기법1. HTTP 요청 최소화페이지에서 HTTP 요청을 요구하는 요소의 수를 줄이면 로드 시간을 크게 단축할 수 있습니다.CSS와 JavaScript 파일을 결합하고, 이미지에는 CSS 스프라이트를 사용합니다.2. 이미지 최적화이미지를 품질 손실 없이 압축하고 크기를 조정하여 로드 시간을 줄입니다.TinyPNG나 ImageOptim과 같은 도구를 사용하고, WebP와 같은 최신 형식을 채택합니다.3. 브라우저 캐싱 활용웹사이트의 일부를 캐..

  Read More
• Webview를 위한 핀치 줌(pinch zoom) 구현하기

  Tip 2024. 2. 24. 12:53

  핀치 줌은 모바일 웹 또는 앱에서 자주 사용되는 기능 중 하나입니다. 사용자는 두 손가락을 화면에 대고 벌리거나 모으는 동작을 통해 화면을 확대하거나 축소할 수 있습니다. 이러한 인터랙션은 보다 세밀한 화면 조작을 가능하게 하며, 사용자 경험을 크게 향상합니다. 해당 기능은 일반적인 앱의 경우 구현하기 간단하지만 웹기반 웹뷰에서는 특정 영역(주로 이미지)을 확대 시 다른 부분들도 같이 확대되며 다른 페이지 이동 시 화면 비율이 이상해지는 등의 문제가 발생할 수 있습니다. 기본 핀치 줌 구현 핀치 줌 기능을 구현하기 위해서는 먼저 터치 이벤트를 적절히 처리할 수 있어야 합니다. 기본적인 구현 방법은 다음과 같습니다. 사용자가 화면을 터치하는 순간부터 터치가 끝나는 순간까지의 이벤트를 감지합니다. 두 손가락..

  Read More
• Cypress vs Playwright E2E 테스트 프레임워크 비교

  React 2024. 2. 13. 14:07

  웹 애플리케이션 테스팅은 개발 과정에서 중요한 부분입니다. Cypress와 Playwright는 모두 자동화된 브라우저 테스팅을 위한 현대적인 프레임워크입니다. 이 글에서는 Cypress와 Playwright를 비교하고, 어느 상황에서 각각을 사용하는 것이 더 적합한지 비교해 보겠습니다. Cypress Cypress는 개발자와 QA 엔지니어 사이에서 인기 있는 엔드투엔드 테스팅 프레임워크입니다. 사용의 용이성과 설정의 단순함으로 많은 사랑을 받고 있습니다. 장점 쉬운 설치 및 설정: Cypress는 설정이 매우 간단하며, 사용하기 쉽습니다. 실시간 리로딩: 테스트 코드를 변경하면 자동으로 테스트가 재실행됩니다. 디버깅 용이: 실패한 테스트에 대해 자세한 오류 로그와 스크린샷, 비디오 녹화 기능을 제공합니..

  Read More
• Javascript ES10 문법정리

  JS & TS 2023. 11. 8. 16:48

  ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다. IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다. 1. Array.flat() 및 Array.flatMap() 이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다. 이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다. // 이전 const nestedArray = [1, [2, [3, 4], 5]]; const flattenedArray = [].concat.apply([], nestedArray); // flattenedArray..

  Read More