본문 바로가기

분류 전체보기

 (989)
의존성 역전 원칙과 NestJS(Dependency Inversion Principle with NestJS) 최근에 Remix를 써보면세 백엔드를 복습하기로 했습니다. 그 일환으로 NestJS를 공부하고 있는데요, NestJS 창시자가 속해있으면서 풀스택 컨설팅(이라고 하고 SI라 읽는) 회사의 공식 블로그에 양질의 글이 많은걸 발견했습니다. 해당 글의 번역입니다. https://trilon.io/blog/dependency-inversion-principle Dependency Inversion Principle This principle from SOLID is the most dependent on our Dependency Injection system. Let's look at how it works with NestJS! trilon.io 의존성 역전 원칙(DIP)은 다음과 같이 명시합니다. 고수준 ..
타입스크립트 데코레이터 완벽 가이드[A Complete Guide to TypeScript Decorators] 공식 문서에서 추천하는 커뮤니티 가이드의 번역입니다. https://saul-mirone.github.io/a-complete-guide-to-typescript-decorator/ A Complete Guide to TypeScript Decorators Decorators make your code leaner. saul-mirone.github.io 데코레이터는 TypeScript의 세계를 더 멋지게 만듭니다. 사람들은 Angular 및 Nestjs와 같이 이 멋진 기능을 기반으로 구축된 많은 라이브러리를 사용합니다. 이 블로그에서 나는 많은 세부 사항을 가진 데코레이터를 탐색할 것입니다. 이 블로그를 읽은 후 이 강력한 기능을 언제, 어떻게 사용해야 하는지 알 수 있기를 바랍니다. TLDR 데코레..
Remix로 알아보는 전역 상태 관리와 프론트엔드 개발의 미래 프론트앤드 애플리케이션의 미래, PESPA 아키텍처에는 전역 상태 관리 솔루션이 필요 없을 것입니다. js가 없어도 기본 기능이 동작해야 하기 때문이죠. 그런데 로그인 정보, 테마 정보 같은건 전역 상태로 어디선가 가져와야 하지 않을까요? 그런 정보는 어디서 가져오나요? PESPA의 구현체인 remix를 통해 해답을 찾아봅니다. PESPA의 상태 관리 솔루션 1. 웹 표준 : Form 리액트 라우터 6.4 이후 리액트 라우터에 Remix의 철학이 많이 녹아들어왔습니다. React 자체의 여러 상태관리 솔루션(useState 등)의 사용보다, 바닐라 JS와 브라우저 API, 웹 표준의 사용을 지향합니다.(#useThePlatform) 아래는 SPA에서 사용하는 솔루션인 리액트 라우터 코드지만, Remix와..
리액트를 위한 이벤트 버스🚌 [Event Bus for React] 리액트를 이용하여 이벤트 버스를 만들어 봅시다. 원문 링크입니다 : https://dawchihliou.github.io/articles/event-bus-for-react TL;DR 🚌 단 60줄로 이벤트 버스를 구현해 봅니다. 🌱 React에서 Event Bus를 활용하는 방법을 배웁니다. 🏋️‍♀️ 데모에 Google Maps API와 Event Bus를 적용해 봅니다. 저는 최근에 직장에서 Event Bus의 흥미로운 사용 사례를 발견했습니다. 글로벌 규모의 웹 애플리케이션에서 분석을 위한 로깅을 구현하는 매우 간단한 모듈입니다. 큰 코드 베이스에서 매우 유용헌 이 디자인 패턴에 대한 연구사례를 공유하고자 합니다. 이벤트 버스가 뭐죠? 이벤트 버스는 컴포넌트 간 느슨한 결합을 유지하면서, 컴포넌트..
리액트 use, 새로 등장한 훅을 알아보자 (React use) 최근 다수 유명 리액트 라이브러리 메인테이너들을 흥분시킨 RFC가 발표되었습니다. https://github.com/reactjs/rfcs/pull/229 RFC: First class support for promises and async/await by acdlite · Pull Request #229 · reactjs/rfcs Adds first class support for reading the result of a JavaScript Promise using Suspense: Introduces support for async/await in Server Components. Write Server Components using standard JavaScript a... github.com ..
리액트 디자인 패턴 : uncontrolled compound components(제어없는 컴파운드 컴포넌트) 데이터가 서로 관련 있는 컴포넌트들 끼리의 colocation은 가독성과 유지보수성 향상, 최적화 효과를 가져옵니다. (이를 위해 Portal을 응용합니다.) compound component 패턴은 더 유연한 컴포넌트를 제공할 수 있게 해줍니다. uncontrolled component는 API 사용자의 상태관리 부담을 제거하여, 유지보수성과 가독성을 높여줍니다. 이 세가지를 효과적으로 사용해 봅시다. 먼저 아래 게시글을 읽어주세요 https://itchallenger.tistory.com/755 컴파운드 컴포넌트 잘만들기 3탄 : compound component + uncontrolled component + co-location 삼신기 사용하기 컴파운드 컴포넌트 + uncontrolled comp..
리액트와 가상돔(virtual dom) 리액트의 렌더 / 커밋과 virtual dom 사이의 관계를 알아봅시다. virtual Dom이라는 용어는 리액트 공식 문서의 단 한곳에서만 사용되며 설명도 길지 않습니다. (https://reactjs.org/docs/faq-internals.html) 즉, 리액트 사용자는 전혀 몰라도 되는 implementation Detail일 뿐입니다. 리액트는 렌더링 요청을 pulling한 후 적절한 시점에 렌더링을 대신해주는 UI 라이브러리일 뿐입니다. ... 일부 인기 있는 라이브러리는 새 데이터를 사용할 수 있을 때 계산이 수행되는 "푸시" 접근 방식을 구현합니다. React는 필요할 때까지 계산이 지연될 수 있는 "풀(pull)" 접근 방식을 고수합니다. ... React가 코드 제어를 가져오기 전에 실..
리액트 디자인 패턴 : React Portal[리액트 포털/리액트 포탈]과 이벤트 버블링 리액트 포털에는 재미있는 점이 몇 개 있습니다. 1. 컴포넌트 렌더링 위치와 돔 삽입 위치를 분리할 수 있습니다 리액트 트리 컴포넌트를 렌더링 위치와 실제 돔에 삽입되는 위치를 분리할 수 있습니다. 언뜻 보면 안티패턴 같아 보이지만, 데이터 관심사 중심으로 컴포넌트의 코로케이션(같이두기)가 가능해집니다. 데이터 중심 프로그래밍 관점에선 베리 굿입니다. 2. 렌더링 순서대로 컴포넌트가 자식으로 추가됩니다. 즉 portalNode의 1레벨 children으로 순서대로 추가됩니다. 주 : 개발환경에선 key를 지정해주지 않으면 자주 섞이는 것을 볼 수 있습니다 3. 컴포넌트 트리, 돔 트리 둘 중 한곳이 부모자식 관계면 이벤트 버블링을 이용할 수 있습니다. 아래와 같은 코드를 생각해 볼 수 있습니다. 포털 아..

티스토리툴바