Front-end(18)
-
React Query 라이브러리의 사용법 및 특징: 서버 상태 관리
React Query React 프로젝트에서 부모-자식 관계 이외의 여러 컴포넌트간에 상태가 공유되어야 할 때가 있습니다. 이 문제를 해결하기 위해 React에 기본 내장된 전역 상태 공유 기능인 Context API부터 외부의 상태 관리 라이브러리인 Redux, Recoil, Zustand까지 종류가 다양합니다. 그러나 이는 클라이언트의 상태 관리에만 초점을 맞춘 경향이 있으며 서버에 데이터를 fetch하고 데이터를 캐싱하는 등 서버 상태까지 관리하기에는 적합하지 않을 수 있습니다. Redux의 경우에는 미들웨어인 Redux-thunk 등을 활용하여 서버 상태를 관리하기도 하지만 상대적으로 복잡하다는 단점이 있습니다. React Query는 서버 상태, 즉 서버에서 불러운 데이터를 관리하기에 적합한 상..
2024.01.18 -
React.js에서 Typescript + Redux-toolkit로 상태관리하기
Background React 공식 문서에 따르면 상태(state)를 단일 컴포넌트에서 사용하는 정도로 앱이 단순할때는 굳이 상태관리 라이브러리를 사용하지 않아도 됩니다. 그러나 부모와 자식 컴포넌트 등의 여러 컴포넌트에서 동일한 상태에 접근하고 업데이트하고 동시에 여러 UI에 보여줘야 한다면 상태관리 라이브러리를 사용해야 합니다. 그렇지 않으면 props drilling등으로 상태를 계속 하위 컴포넌트로 전달해주는 등 비효율적이기 때문입니다. Redux 상태관리 라이브러리에는 Redux, Recoil, Zustand, React Query 등이 있습니다. 라이브러리의 우열을 따지기보다는 각자의 프로젝트에 맞는 라이브러리를 사용하는게 좋습니다. 이 글에서 설명하는 Redux는 다음과 같은 특징이 있습니다..
2024.01.04 -
React를 프로젝트와 컴포넌트 단위에서 설계하기
Background React로 앱을 개발하다보면 점차 프로젝트의 디렉토리와 파일 구조, 그리고 컴포넌트가 복잡해집니다. 여러가지 기능을 구현하고 수정하면서 코드도 복잡해지는데 이를 해결할 수 있는 방법이 있을까요? 이 문제를 해결하고자 수십개의 글을 읽어봤지만 내린 결론은 '정답이 없다'입니다. 그 대신 방향성은 어느정도 정해져 있습니다. React 공식홈페이지에서 소개하는 React 설계방법은 다음과 같습니다. 1. 확장성있고 재사용성 있는 코드를 작성하기 2. 관심사에 따라서 코드를 분리하고 단일 책임을 가지는 컴포넌트를 만들기 3. 외부에 제어를 위임시키는 것을 고려하기 이는 작성된 코드를 유지보수하기 쉽고 기능 추가나 변경에 쉽게 대응할 수 있도록 최대한 객체지향을 추구하라는 의미로 들립니다. ..
2023.12.28 -
[React] 컴포넌트 내부에서 CSS를 쉽게 스타일링 하기: Emotion
Css-in-JS 기존에는 CSS파일을 따로 작성하여 불러오는 방식을 사용했습니다. HTML+CSS+HTML의 3개의 축으로 웹페이지를 작성하는 것이 기본이었습니다. 하지만 최근에는 React등이 대세가 되고 컴포넌트라는 개념이 대두되면서, 컴포넌트 안에서 CSS까지 작성하는 것이 트렌드가 되었습니다. 이러한 스타일링 방식을 CSS-in-JS라고 부르며 대표적으로는 'Styled-components', 'Emotion' 등이 있습니다. Emotion이란? 여기서 소개할 Emotion은 다음과 같은 특징이 있습니다. 컴포넌트가 렌더링 될 때에만 적용한 스타일의 태그를 생성합니다. state에 따라 스타일이 변경되게 적용할 수 있습니다. 스타일의 요소들은 자동으로 class 이름이 부여되어 중복되지 않습니다..
2023.05.12 -
[Next.js] Next.js에 대해 알아보기 및 설치하기
Next.js란? Next.js는 React의 개발을 조금 더 쉽게 도와주는 프레임워크이며 React가 기본적으로 사용됩니다. Next.js는 다음과 같은 특징이 있습니다. 서버 사이드 렌더링(SSR) 기존에는 서버에서 받은 정보를 토대로 클라이언트에서 HTML 코드를 렌더링했으나 Next.js는 서버에서 미리 HTML 코드를 렌더링하여 클라이언트에 전달합니다. 따라서 로딩속도가 빠르다는 점 및 SEO(검색 엔진 최적화)에 유리하다는 점이 장점입니다. 또한 페이지가 빈번하게 변경되는 경우에는 클라이언트 사이드 렌더링(CSR)에 비해 유리하기 때문에 웹 어플리케이션을 구성할 때 특정 부분은 SSR로, 다른 부분은 CSR로 구성하는 편이 좋습니다. 파일 시스템 기반의 라우팅 pages 폴더에 있는 파일의 이..
2023.05.03 -
[React] React 앱을 배포하기: Netlify
서론 개발한 앱을 PC에서 작동시킬수도 있지만, 만약 이 앱이 24시간 365일 작동해야 한다면 컴퓨터의 전원이 절대로 꺼지면 안될 것입니다. 또한 앱의 이용자가 기하급수적으로 늘어나면 컴퓨터의 CPU, 램, 저장장치 등을 추가해야 할 수도 있습니다. 이러한 환경을 개인이 구축하기에는 다소 힘들기 때문에, 앱을 제 3자에게 제공하여 사람들이 언제든지 자유롭게 앱을 사용할 수 있도록 배포할 수도 있습니다. React 앱을 배포하는 방법은 다음과 같습니다. 1. Github pages Github에서 기본으로 제공하는 서비스입니다. 2. Netlify 정적 웹사이트를 배포하는 서비스입니다. 3. Firebase 정적 웹사이트를 배포하는 서비스입니다. 이 문서에서는 Netlify로 React 앱을 배포하는 방..
2023.01.31