본문 바로가기

REACT

 (187)
개발자 관점에서 Next13 간단히 살펴보기 파이어십 형닙의 유투브 영상을 보고 정리한 내용입니다 : https://www.youtube.com/watch?v=_w0Ikk4JY7U 10월 26일에 NEXTj.js 13 버전이 발표되었는데요, 말 그대로 기존 튜토리얼들을 쓸모없게 만들 정도의 완벽한 멘탈 모델의 전환입니다. 우리는 새로운 패러다임을 받아들일 시간이 되었습니다. ... JS와 프레임워크 악몽만 빼고요. Turbopack 웹팩 개발자가 vercel에서 러스트로 작성했으며 중복 연산을 방지해주는 터보레포 솔루션과 결합하여 웹팩보다 700배, vite보다 10배 빠르답니다. 에반 유는 어느정도 패배를 승복하는 느낌입니다. vite를 많이 써본건 아니지만 HMR이 씹히는건 꽤 느껴졌는데, 이는 에반유도 인지하는 부분이더라구요. HMR 면에선 ..
리액트의 의존성 주입 [NestJs의 모듈로 살펴보는] NestJS의 모듈 모듈은 고수준 모듈(코드)가 런타임에 제공받을 실제 구현을 지정할 수 있는 빌딩 블록입니다 React의 Context API 정의는 Props Drilling을 피하기 위한 도구이지만, IOC 컨테이너와 같이 해당 컨텍스트에 의존성(실제 구현)을 지정해주는 역할을 합니다. NestJS와 리액트 컴포넌트의 대응관계 NestJS의 IOC 컨테이너 : 리액트 런타임 NestJs의 Module : 리액트의 Context API NestJS의 Provider : 리액트의 Context Provider NestJS의 Interface : 컨텍스트 타입 시그니처 T 참고 https://itchallenger.tistory.com/766 Dependency Inversion Principle wit..
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. 컴포넌트 트리, 돔 트리 둘 중 한곳이 부모자식 관계면 이벤트 버블링을 이용할 수 있습니다. 아래와 같은 코드를 생각해 볼 수 있습니다. 포털 아..

티스토리툴바