스럽 공식 블로그

2차 MVP 개발을 시작하며 프론트엔드 파트에서 가장 고민한 부분은 서버 상태(Server State) 관리였습니다. 본 포스팅에서는 왜 스럽이 서버 상태 관리를 위해 React Query를 선택했으며, React-Query를 어떻게 사용하고 있는지에 대해 공유해보려 합니다. React-Query란? React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다. React-Query를 사용하면 애플리케이션에서 서버 데이터를 가져오는 데 필요한 로직을 분리할 수 있으므로, 코드가 더 간결하고 유지 보수가 용이해집니다. 또한, 캐싱을 사용하면, 동일한 데이터를 반복해서 가져와야 할 경우, 서버에 불필요한 요청을 보내지 않고 빠르게..

Frontend 2023. 4. 30. 12:32

앞선 글에서는 React 컴포넌트의 생성에 있어 Typescript의 중요성과 이의 장점에 대해 정리했습니다. 이번 글에서는 Styled-components 와 Typescript를 활용하여 컴포넌트의 재사용성을 높이는 방법을 알아보겠습니다. Styled Component 란? 우선 Styled Coponent에 대해 설명하는 걸로 시작하겠습니다. styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com Styled Component는 React에서 스타일을 작성하는 방식 중 하나입니다. 기존에..

Frontend 2023. 4. 29. 15:42

애플리케이션에는 수많은 컴포넌트가 존재하고, 이러한 컴포넌트들은 다양한 페이지, 또 다른 컴포넌트 내에서도 활용될 수 있습니다. 다음은 현재 스럽의 디자인 내용입니다. 그림을 보면, 버튼만 하더라도 수많은 케이스가 존재합니다. 버튼의 사이즈부터 배경색상, 글자 색상, 버튼 테두리, 아이콘의 유무, 심지어 같은 사이즈의 버튼 내에서도 서로 다른 디자인을 갖고 있습니다. 제일 처음에 나온 Button/Medium의 경우를 잠시 살펴보면, 4가지의 케이스가 존재합니다. 하지만 이렇게 많은 컴포넌트들을 하나하나씩 매번 생성하게 된다면, 코드의 가독성이 떨어지게 되고, 동일한 내용의 코드가 반복되기 때문에 코드의 양이 늘어나는 등 퍼포먼스 측면에서도 다양한 문제점이 존재합니다. 따라서, 모든 React 컴포넌트 ..

Frontend 2023. 4. 29. 14:14