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..

배경이커머스 프로덕트는 상품을 전시하고 전시된 상품을 사용자들에게 자세한 설명을 전달하는 '상품 상세 페이지'가 있습니다. 상품의 콘텐츠를 만들기 위해서는 상품의 메타 정보 뿐만 아니라 상품에 대한 자세한 설명, 판매자의 의도가 담긴 글과 이미지를 잘 정리해서 설명해야합니다. 상품상세 페이지는 국내외 이커머스 서비스에서 10년 이상 대부분 비슷한 형상을 유지하고 있습니다. 상품 판매를 위한 설명 콘텐츠를 좀 더 쉽고 효율적으로 만들어내고 일관성있게 제공하는 것을 위해 업계는 많은 시도를 하고 있습니다. 저는 현재 회사에서 입사부터 지금까지 상품상세를 개발하고 고도화하는 작업을 해왔습니다. 수 많은 작업을 해왔지만 그 중 쉽게 고치거나 대체하기 어려운 부분 중 타사 에디터 기반의 상품 디스크립션 작성 서..

안녕하세요! 저는 컬리에서 웹 프론트엔드 개발을 하고있습니다.기존의 전통적인 이커머스 서비스의 상품 탐색과 구매 여정을 새로운 방식으로 풀어가기 위한 TF에 참여한 경험을 소개시켜드립니다. 또 새로운 서비스 쇼케이스를 만들어가게되는 과정 속 백엔드 개발자 없이 제품을 출시하는 이야기도 함께하려고 합니다. *이 아티클에서는 개발 구현 사항에 아주 구체적인 이야기를 하지 않습니다. 보통 기획-디자인-개발-QA의 프로세스를 이터레이션하며 하나의 제품을 개발하곤 합니다. 이 글에서는 한번의 이터레이션 경험을 기획 시작부터 출시까지 2~3주간의 여정 이야기를 들려드리려고 합니다. 아이디어 수립은 여러가지 방법이 있습니다. 흔히 알고 있는 브레인 스토밍 기법 부터 단순히 생각나는 아이디어를 꺼내 이야기해보는 방법까..

node 기반 프로젝트 개발시 npm을 통해 여러 패키지를 설치하곤 한다. npm에 배포된 수많은 패키지를 사용할때 주의할 점 중 하나로 node에 대한 호환성과 타 패키지와의 의존성을 고려해해야 한다. 보통 NPM이 이런 문제들을 해결해주곤하지만 때때로 의존성 충돌로 인해 골머리를 쓰게 될때도 있다.혹은 협업을 하며 하나의 프로젝트에서 npm를 통해 패키지를 다운로드하고 개발할때 서로 다른 버전의 패키지를 사용하면 개발중 문제가 발생할 수 있다. npm install 시 우리는 npm install 하곤하는데 이는 다시 npm 패키지를 설치할때 틸드(~)나 캐럿(^)에 의해 특정 범위의 서로 다른 패키지를 다운로드할 수 있게 된다. 짧은 기간 내에 패키지의 코어한 기능이 수정되지 않는 경우 문..

🕺 원문 https://blog.logrocket.com/understanding-javascript-currying/ Understanding JavaScript currying - LogRocket Blog Learn what currying is in Javascript, why and where you should use currying, and how to implement it with code examples blog.logrocket.com Currying은 람다 계산법 컨셉이지만 걱정할 필요없습니다.(간단합니다!) Currying은 한번에 하나의 인자(argument)를 가지고 다음 인자를 함께 새로운 함수에 반환하는 함수입니다. 함수를 f(a, b, c)로 호출할 수 있는 함수에서 f(..

Home Postman Network Browse APIs, workspaces, and collections inside Postman. Explore Postman → learning.postman.com 개발자라면 누구나 한번쯤 들어보고 사용해보았을 만한 Postman의 Mock Server을 이용하여 팀과 협업 시 프론트 개발을 우선적으로 할 수 있도록 Mock API를 만들어 봅시다. Postman을 통해 개발한 API를 테스트하고, 결과를 공유하여 API 개발의 생산성을 높여주는 툴입니다. 주로 개발된 API를 테스트하기 위해 많이들 사용해보셨을 텐데요. 이 포스트은 Postman의 Mock Server을 통해 실 API가 나오기 전 Mock API를 만들고 프론트 개발을 먼저 시작하기 위해서..