react
-
pnpm으로 갈아타기Tip 2024. 10. 25. 15:35
프론트엔드 개발을 하다 보면 다양한 패키지 매니저를 접하게 되는데, npm, Yarn 외에도 요즘 각광받고 있는 또 다른 선택지가 있습니다. "Performant npm"의 약자인 pnpm은 설치 속도와 디스크 공간 활용 면에서 탁월한 성능을 자랑합니다.pnpm의 장점1. 빠른 설치 속도pnpm은 패키지를 중앙 캐시에서 관리하고, 하드 링크를 통해 설치하기 때문에 일반적인 npm이나 Yarn보다 훨씬 빠릅니다.하드 링크 : 파일 시스템에서 동일한 파일을 여러 경로에서 접근할 수 있게 해주는 방식으로, 실제 파일은 하나만 저장되며 여러 위치에서 공유됩니다. 이를 통해 중복 저장을 피하고 디스크 공간을 절약하면서도 빠르게 설치가 가능합니다.2. 디스크 사용 효율성동일한 패키지를 여러 프로젝트에서 사용할 때,..
-
TypeScript 유틸리티 타입 소개JS & TS 2024. 10. 11. 14:38
TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..
-
모노레포(Monorepo) 소개 (feat. 터보레포(Turborepo))Tip 2024. 10. 7. 17:00
최근 소프트웨어 개발 환경에서는 모노레포(Monorepo)를 채택하는 팀이 늘어나고 있습니다.모노레포는 여러 프로젝트나 패키지를 하나의 저장소(repository)에 담는 방식을 의미합니다.모노레포의 장점코드 재사용성 증가공통된 코드나 라이브러리를 여러 프로젝트에서 쉽게 공유할 수 있어, 중복 코드를 줄이고 유지보수가 용이합니다.일관된 개발 환경모든 팀원이 동일한 저장소와 설정을 사용하여 의존성 버전이나 코드 스타일의 일관성을 유지할 수 있어 버그 발생을 줄이고 개발 효율성을 높입니다.변경 사항 추적 용이하나의 저장소에서 모든 변경 사항을 관리하므로 전체 시스템에 어떤 영향을 미치는지 쉽게 파악할 수 있으며, 디버깅과 코드 리뷰가 수월해집니다.협업 향상팀원들이 동일한 코드베이스에서 작업하므로 협업이 원활..
-
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..
-
마이크로 서비스 아키텍처(Microservice Architecture) 소개Tip 2024. 10. 2. 17:43
Microservice Architecture는 현대 소프트웨어 개발에서 주목받는 아키텍처 스타일입니다.전통적인 Monolithic Architecture와 비교하여 MSA가 제공하는 여러 이점을 살펴보겠습니다.Microservice Architecture란?Microservice Architecture는 애플리케이션을 작은 독립적인 서비스들로 분해하여 개발하는 접근 방식입니다.각 서비스는 자체적인 비즈니스 기능을 수행하며, 가볍고 표준화된 인터페이스(예: RESTful API)를 통해 다른 서비스와 통신합니다.이는 서비스별로 독립적인 배포와 확장을 가능하게 합니다.Monolithic Architecture란?Monolithic Architecture는 애플리케이션의 모든 구성 요소가 하나의 코드베이스와..
-
WebRTC, WebSocket, Socket.io 비교(feat. Next.js)Next.js 2024. 9. 27. 13:43
실시간 통신은 현대 웹 애플리케이션에서 중요한 요소입니다.비디오 컨퍼런싱, 실시간 채팅, 온라인 게임 등 다양한 분야에서 사용되고 있습니다.이러한 기능을 구현하기 위해서는 적절한 기술 선택이 필요합니다.이번 글에서는 WebRTC, WebSocket, Socket.io의 차이점을 비교하고, Next.js에서 WebRTC를 구현하는 방법을 알아보겠습니다.1. WebRTC, WebSocket, Socket.io란1. WebRTCWebRTC(Web Real-Time Communication)는 브라우저 간에 직접 실시간 미디어 스트림(오디오, 비디오)과 데이터 전송을 가능하게 하는 표준입니다.별도의 플러그인 없이 P2P(peer-to-peer) 통신을 지원하여 지연 시간을 최소화합니다.2. WebSocketWe..
-
Compound Component 패턴 (feat. React, Next.js)React 2024. 9. 21. 13:55
Compound components는 React에서 더 표현력 있고 사용자 정의가 가능한 컴포넌트 API를 만들 수 있게 해주는 강력하고 유연한 패턴입니다.이 패턴은 특히 여러 관련 부분을 가진 복잡한 UI 컴포넌트를 구축할 때 유용합니다.이 개념에 대해 자세히 알아보고 Next.js에서 어떻게 구현할 수 있는지 살펴보겠습니다.Compound Components란 무엇인가?Compound components는 함께 작동하여 일관된 기능 단위를 형성하는 컴포넌트 그룹입니다.주요 아이디어는 공유 상태와 동작을 관리하는 부모 컴포넌트를 만들고, 자식 컴포넌트가 특정 부분의 렌더링을 처리하도록 하는 것입니다.Compound components 사용 시 주요 이점향상된 유연성과 사용자 정의 가능성관심사의 더 나은..
-
구조분해 사용 팁 4가지JS & TS 2024. 9. 14. 13:36
자바스크립트의 구조분해 할당(Destructuring)을 더 효율적으로 사용하는 4가지 실전 팁을 소개합니다.1. 기본값 할당하기구조분해를 사용할 때, 배열이나 객체에서 값이 없을 경우 undefined가 할당됩니다.이를 방지하기 위해 기본값을 설정할 수 있습니다.예를 들어, 배열이나 객체에서 값이 없는 경우 기본값을 할당할 수 있습니다.이 방법은 백엔드에서 불완전한 데이터를 받을 때 특히 유용합니다.const [a, b, c = 3] = [1, 2];console.log(c); // 3 (기본값)const {d, e, f = 6} = {d: 4, e: 5};console.log(f); // 6 (기본값)2. 나머지 연산자 사용배열이나 객체에서 필요한 부분만 추출하고, 나머지 값을 하나의 변수에 담을 ..