react

원문: https://mobileappcircular.com/where-is-the-virtual-dom-stored-in-react-41724bc09f4f 글을 읽다가 너무 좋은 글이 있어 번역 및 정리를 해보려고 한다. React를 공부하다 보면 Virtual DOM에 대한 얘기를 지겹도록 듣는다. jquery가 중심인 프론트엔드 판에서 React가 파이를 가져갈 수 있었던 건 Virtual DOM 덕분이다. 그렇기 때문에 React를 공부하거나 사용할 때 기술에 대한 언급을 자주 듣는 건 어찌 보면 당연하다. Why Virtual DOM? 기존에는 직접 DOM에 접근했기 때문에 수정할 때마다 리렌더링 되었다. 하지만 Virtual DOM을 사용해 수정사항을 모아서 최소한의 리렌더링으로 프론트엔드를..

농담반 진담반으로 리액트로 프론트엔드를 구성할 때 다른 스택은 양보해도 React-Query는 절대 양보하지 않는다.. 그래서 React-Query 소개와 함께 내가 사용하는 노하우를 공유하려고 한다. 개요 대부분의 프론트엔드는 비동기 상태 관리가 필요하다. 각자 다양한 방식으로 구성하겠지만 현재 가장 많이 사용되는 방식은 Redux일 것이라고 생각이 든다. 분명 Redux도 좋은 상태 관리 툴이지만 나는 비동기 상태 관리 스택으로 채택하지 않는다. 두 가지 정도 이유가 있는데 이유를 간단히 설명하자면 우선 Redux는 비동기에 특화된 스택이 아니기 때문에 비동기 처리에 도움을 크게 주지 못한다. 예를 들어 비동기 요청을 일정한 텀마다 보내야 한다면 Redux에서는 직접 구현해야 하지만 React-Que..

React에서 css in js를 다루는 여러 가지 방법이 있다. 그중 가장 선호되는 스택 두 개는 Tailwind CSS와 Styled-components이다. 항상 프로젝트를 시작할 때면 이 두 개를 고민하고는 한다. 각 스택의 장단점을 먼저 소개해보자면 Tailwind CSS Tailwind CSS는 클래스를 활용해 css를 적용시키는 방식으로 아래와 같이 코드를 짤 수 있다. // made by tailwind css 안녕하세요 // made by vanilla 안녕하세요 처음 보는 사람은 스타일 인라이닝보다 조금 간결하다는 점을 제외하면 장점을 잘 못 느낄 수도 있다. 하지만 :hover, @media와 같은 요소들은 인라이닝이 안되고 스타일시트를 따로 작성해야 한다. 이 경우 장점이 드러나게 ..

회고가 필요하다고 생각이 들어 이를 올릴 매개체인 기술블로그를 시작하기로 마음을 먹었다.. 이런 글이 처음이라... 어색하긴 하지만..... 앞으로 공부하는 내용을 기록 및 공유할 생각이다. 흠.. 개인 회고는 올릴지 말지 고민 중이다. 게임 클라이언트 개발에서 프론트엔드 개발로 전향한 후 처음으로 맞는 해이며, 개발자로서 2년 차를 맞는 해였다. 개발자라는 직업에 대한 확신을 가졌던 시간이 됐던 것 같다. 프론트엔드 기술은 물론이고 개발문화에 대한 고민을 계속했던 것 같다. 애자일을 경험해보고 싶었지만 회사에서는 사용하기가 힘들었고 사이드 프로젝트에서는 한다고 해봤지만 잘되진 않은 것 같다. 2022 시작 연초에는 게임 회사에서 백오피스 프론트엔드 개발을 했었다. 지금도 엄청 잘하는 건 아니지만 올해 ..