PR 링크: https://github.com/reactjs/reactjs.org/pull/5487

웹에 접근할 수 있는 수많은 종류의 디바이스에 이미지를 저렴한 비용으로 제공하는 방법을 알아봅시다.

이 글에서는 2023년의 시점에서 새로운 리액트 프로젝트를 시작할 때 고려할만한 몇 가지 스타터 키트를 소개하고 있습니다. 각각의 장단점과, 적정한 기술 수준을 제시하고 있으니 새 리액트 프로젝트를 어떻게 만들지 고민하고 계시다면 도움이 되실 것 같습니다 :)

합성 컴포넌트를 사용해 재사용성이 높은 컴포넌트를 만드는 방식을 소개합니다.

개발자에게 필요한 능력인 “문제를 해결하는 능력”이 무엇인지 정의하고, 이 능력을 키우려면 어떻게 해야 하는지 알아보겠습니다.

지난 3월 22일, 리액트 실험실은 2022년 6월 업데이트 이후 내부적으로 진행 중인 작업들에 대해서 새롭게 공유했습니다. 리액트 서버 컴포넌트, Forget 컴파일러 등 리액트 덕후라면 흥미로울 이야기들을 담고 있답니다. 👀

나는 지난 몇 년간 개발자를 코칭 하며 ‘프론트냐 백엔드냐’를 고민하는 당신에게 , 개발자를 코칭하며 배운 7 가지 , 장애는 우리의 문제다 등의 글을 썼다. 코칭 과정에서 개발자들이 성장에 대해 관심이 많다는 것을 알 수 있었다. 관심이 많은 만큼이나 스스로 성장이 정체된다고 느꼈을 때 고민이 크다. 하지만 안타까운 점은 자신이 왜 정체되는지 원인을 잘 찾지 못한다는 것이다. 나는 연차가 많아도 실력이 3~4년 차 정도의 사람들을 자주 본다. 이분들의 공통적인 특징은 학습을 하려 하지 않고 변화를 좋아하지 않는다는 것이다. 왜 그렇게 되었을까? 내 나름대로 추정해 보면 성장이 정체되었다고 느꼈을 때 원인을 찾지 못하고(않고) 성장이 멈춘 체 시간이 흐르면서 처음에는 성장을 하지 못하는다는 불안감이 점점 익숙함으로 바뀌고 그러한 익숙함은 현실에 안주를 불러 결국 경력이 늘어나도 성장이 멈춰 있게 된 것은 아닐까? 그렇다면

프론트엔드 프로젝트를 시작할 때마다 매번 정해야 하는 것들이 있습니다. 개발 환경과 개발 스택을 정하고 대부분 Git이겠지만 형상관리 도구도 정하고 브랜치를 어떻게 관리할지도 정해야 하고 버저닝은 어떻게 해야 할지 등등 프로젝트를 새로 시작할 때면 매번 점검하거나 새롭게 정해야 할 것들이 많았어요. 물론 이미 오랜 기간 숙련된 팀의 경우 기존의 방식을 활용할 수 있겠지만 매번 기존 프로젝트 진행했던 문제가 됐던 것들은 항상 있었기 때문에 같은 방법과 도구들을 그대로 사용하는 경우는 없었던 것 같아요. 조금이라도 달랐어요. 프로젝트…

Node.js 환경에서는 다수의 비동기 작업을 처리하기에 적합하다. 예를 들어, 다음과 같은 상황이 있다고 가정해보자. ID 별로 조회만 가능한 외부 서비스에서 대량의 건수를 API로 조회해야하는 경우 join, subquery 로 조회시 성능과 DB의 부하가 심하여, id 별로 쿼리를 나눠서 조회해야하는 경우 대량으로 이벤트 메세지를 발행해야하는 경우 등등 다량의 Promise 작업들은 백엔드 애플리케이션 작업에서는 언제든지 발생할 수 있다. 이럴때 Node.js 환경에서는 Promise.all 을 통해 쉽게 해결할 수 있다. 여기서 Promise.all 보다 좀 더 성능을 개선할 수 있는 방법을 보자. 개요 수백개 이상의 Promise 작업들은 보통 한번에 Promise.all을 수행하지 않는다. 예..

DataGrip을 포함한 GUI 도구로 운영 DB에 쿼리를 수행하는건 항상 조심해야한다. 하지만, 매번 모든 쿼리를 사람이 주의해서 수행하는건 불가능하며, 사람이라면 무조건 실수를 할 수 있다. 사람인 이상 잘못된 쿼리를 실행할 수 있지만, 이게 최대한 치명적인 실수가 발생하지 않도록 장치를 둘 순 있다. 그래서 가능한 실수를 할 수 없는 환경을 조성해서 진행하는게 필요하다. 1. Reader DB 활용 보통 클라우드 서비스를 사용하거나, 어느정도 정비가 되어있는 상황이라면 Reader DB (Replica DB) 가 존재한다. GUI 도구를 사용하다보면 의도치 않게 UI 상에서 데이터 수정을 일으킬 수 있다. 그래서 단순 조회가 필요한 경우 조회 기능 밖에 지원하지 않는 DB (Reader)를 사용한다..

원문: https://www.sitepoint.com/javascript-chatgpt-plugin/

TypeScript 타입과 JSDoc을 기반으로 API 문서화를 자동화해주는 라이브러리 Tspec. TypeScript 타입을 기반으로 API 문서화를 자동화해주는 라이브러리 Tspec의 개발 배경, 사용방법을 소개합니다.

서문 안녕하세요. 비즈FE 파트의 도비입니다. 저는 현재, 카카오의 배달서비스 주문하기와 입점을 위한 사장님 센터의 Frontend를 담당하고 있습니다.올해 2023년, 비즈FE 파트가 속한 FE플랫폼 팀에서는 성능 개선을 팀 내 모든 서비스의 공동 목표로 선정하여 진행 중에 있습니다.이번 연재에서는 이 과정에서 개선했던 서비스인 주문하기와 비즈니스폼의 성능 개선 내용을 전체 2회에 걸쳐 차차 소개하려고 합니다. 성능 측정 도구 - Pharus 성능 개선 진행 후, 실제로 성능이 개선되었는지에 대한 여부는 어

ReactQuery를 openapi-typescript를 활용해서 typesafe하게 활용해본 경험을 작성했습니다.

React의 Virtual DOM replacement인 Million.js의 코어 로직을 탐구하며 소개합니다.

실제 일하면서 느낀 과정 등을 통해서 내가 성장하는 데에 도움이 됐던 노력에 대해서 언급해 보고자 한다.

Introduction React context and useContext are very handy. You would have no problem using it while developing a small app. If the size of your app became non-trivial, you might experience some performance issues with regard to useContext. This is because useContext will trigger rerender whenever the context value is changed. This happens even if the part of the value is not used in render. This is by design. If useContext were to conditionally trigger rerenders, the hook would become non-composable.

React Query Maintainer인 Tkdodo가 알려주는 리액트 쿼리적으로 사고할 수 있는 3가지 요소들을 다루어봅니다.

이전 글 > 테스트에 대한 오해와 사실 Table of contents 프론트엔드 테스트는 왜 어려울까? 의존성 프론트엔드 앱에서의 의존성 들어가며 테스트 코드를 작성하기도 전에 테스트 환경을 구축하다가 지친 경험은 누구나 한번쯤 있지 않을까. TypeScript…

또다른 JSX 기술 라이브러리, Solid.js가 있다. solidjs / solid ...

이번 글에서는 저희 팀에서 messaging queue로 AWS SQS를 도입하기까지의 과정과, 실제 운영하면서 있었던 일들에 대해 다뤄보겠습니다.

Engineering Blog by Dale Seo

객체 ID는 객체 지향 프로그래밍, 데이터베이스 관리, 네트워킹 등 다양한 컴퓨팅 환경에서 사용되는데요. 이 포스트에서는 좋은 객체 ID를 만들어야 하는 이유와 방법을 고유성과 식별 가능성을 중심으로 알아볼게요.UUID의 구조\*객체 ID를 만들 때 사용하는 UUID의

Engineering Blog by Dale Seo

선언적 패러다임을 기반으로 설계되고 있는 프론트엔드 생태계에서 ts-pattern을 통해 살아남는 방법을 소개합니다.