xtring.dev

새로운 프로젝트 중 React UI 패키지를 세 개의 앱에서 사용할 수 있도록 하는 경험을 하게 되었습니다. 하나의 UI 컴포넌트 패키지를 배포하고 세 개의 앱에서 설치 사용하기 위해서 했던 경험들에 대해서 설명해보겠습니다. 중요도에 따라 ⭐️ 이모지를 달아주었습니다 :)  1. 기술 스펙 정의하기 ⭐️⭐️⭐️  React UI 패키지를 각각 다른 스팩을 가진 앱들에서 사용하기 위해서는 기술 스택과 스팩에 대해서 면밀한 고려가 필요합니다. 저의 경우엔 UI 패키지는 최신 React를 사용하고 싶었고, 해당 패키지를 사용하는 앱들의 React 버전은 모두 상이했습니다.✅ 기술 스택  UI 패키지는 Vite 번들러와 최신 React 18 버전을 선택하여 개발하고 싶었으며, TypeScript 사용 가능한 높..

리액트 팀에서 React 18 릴리즈를 통해 리액트 서버 컴포넌트(React Server Components, RSC)를 소개했습니다. RSC는 서버와 클라이언트 간의 경계를 명확히 하고, DX(Developer Experience)와 성능을 끌어올리기 위해서 도입되었다고 합니다. RSC는 기존 클라이언트 전용 컴포넌트와는 '다른' 렌더링 전략을 통해 서버측에서 컴포넌트를 build-time에 실행해두고 필요할때 클라이언트로 전달하는 방식으로 자바스크립트 객체를 전달하여 컴포넌트를 렌더링합니다.    RSC의 동작 방식  리액트 서버 컴포넌트(React Server Components, RSC)는 컴포넌트를 클라이언트가 아닌 서버에서 렌더링하는 방식입니다. 클라이언트에서 컴포넌트를 생성하는 것이 아닌 서..

'전문가를 위한 리액트' 4장 재조정(reconciliation)을 읽으며 알게된 내용을 정리합니다.   React의 ReconciliationReact는 UI 업데이트를 효율적으로 처리하기 위해 Reconciliation라는 과정을 사용합니다. 간단하게 설명하자면, 이 과정은 React의 Virtual DOM과 실제 브라우저의 DOM의 차이를 계산하고, 최소한의 DOM 조작으로 UI를 업데이트하기 위한 목적을 가지고 만들어졌습니다. 종종 'React의 장점이 뭐에요?'라는 질문을 받곤하면 업데이트할 내용을 한번에 계산하고 Virtual DOM과 실제 DOM 간의 비교를 통해 렌더링을 최소화하는 과정을 통해 UI의 업데이트가 사용자에게 자연스럽게 보인다고 설명했습니다. 여기서 이 과정이 Reconcili..

Cypress 👾 Ref. Testing | Next.js Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Jest, and React Testing Library. nextjs.org https://docs.cypress.io/guides/overview/why-cypress Why Cypress? | Cypress Documentation What you'll learn What Cypress is and why you should use it Our mission, and what we believe in Key Cypress features Types of tests Cypr..

Ref. 📗 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 최근 React 와 함께 사용하는 스타일 라이브러리/프레임워크가 정말 다양해졌습니다. 대표적으로 styled-components, emotion, Tailwind css 등이 있는데 오늘은 Tailwind 에 대해서 알아보려고 합니다! 먼저, Tailwind 의 장점은 tailwind 홈페이지에서 볼 수 있듯이 Rapidly build modern websites without ever leaving your HTML. "HTML을 떠나지 않고도 ..

요즘은 큰 문제가 없다면 React 프로젝트를 CRA 진행하곤 합니다. eject를 하게 되면 해당 프로젝트에 숨겨져 있는 모든 설정을 밖으로 추출할 수 있으며 이를 통해서 webpack과 babel의 자유로운 세팅이 가능합니다. 🍭 제 경우 외부 모듈을 추가하는데 있어 eject이 필수였기 때문에 사용하게 되었습니다. 사용방법 사용방법은 간단합니다. $ npm run eject 명령어 실행 후 ? Are you sure you want to eject? This action is permanent.(y/N) 라는 물음이 나오면 y를 누르고 Enter를 쳐줍니다. 만약, eject 실행 전 git을 통해 변경사항을 저장하지 않으면 This git repository has untracked files o..

React에서 Redux를 통해 전역적인 state 관리를 하는 것은 특히 대형 어플리케이션에서는 필수요소로 사용됩니다. 최근 Context API의 많은 사용으로 hooks를 통해 Redux의 사용이 급격히 줄어들고 있다고 하지만 아직도 많이 도입되고 아직도 많이 사용중인 Redux의 궁금점 15가지를 정리해봅니다.   * 이글은 devinterview.hashnode.dev/redux-coding-interview-questions-for-react-developers-in-2021 를 참고하여 작성했습니다.    먼저 Redux는 어플리케이션 state 관리를 위한 open-source JavaScript 라이브러리입니다. 최근 Redux는 React와 Angular와 같은 라이브러리와 함께 가장 ..

styled-components를 사용하며 Ant Design를 사용해야하면 아래와 같이 사용해보세요. 기존의 기본 Tag들과 styled-components를 함께 사용하는 방식과 같습니다! 필요에 의해서 사용할 수도 있겠지만 이렇게 사용하는 경우는 크게 없을 것 같네요 🤓 Antd의 class에 일일히 접근해서 모든 스타일을 바꾸는 것 보다 root의 index.css에서 전역으로 Antd 클래스의 스타일을 Tune 해놓은 다음에 사용하는 것이 좋을 것 같습니다! 😎 (저만의 생각입니다..ㅎㅎ)