본문 바로가기

React

(22)

[ React 18+ ] RSC(React Server Componen) 파헤치기. RSC는 React Server Components의 약자로, React18 버전부터 등장한 개념이다.서버에서 컴포넌트를 렌더링 하고 클라이언트에서 이를 효율적으로 활용할 수 있게 해주는 기능으로, 서버와 클라이언트의 역할을 분리하여 사용자 경험 향상을 위해 등장한 기능이다. RSC는 React의 자체적인 기능이기 때문에 꼭 Next.js를 사용하지 않고도 구현할 수 있지만, RSC는 서버-클라이언트의 상호작용이 필요하기 때문에 Node.js기반의 서버 환경이 필요하다. 그래서 Next.js를 사용하지 않는다면 Express.js 같은 라이브러리를 사용하여 HTTP 서버를 만들고, 서버-클라이언트 스트리밍, Webpack 번들링(서버 / 클라이언트), 데이터 통신, 성능 최적화(캐싱) 등의 추가적인 설..

[ Next.js ] Next15에 대해 알아보기. 2024년 10월 21일 Next15 버전이 공식 블로그에 업데이트되었다.공식적으로 안정화되어 프로덕션에서 사용할 준비가 완료되었다고 한다. 이번 릴리즈는 RC1과 RC2의 업데이트를 기반으로 하며, 안정성에 중점을 두면서도 흥미로운 업데이트를 추가하였다고 한다.10월 24일에 열린 Next.js Conf가 있었는데, 사전 신청하고 못 들어서 녹화본을 보고 다음에 그 내용에 대한 포스팅도 할 예정이다. Next15의 사용 방법은 아래와 같다.# 새로운 자동 업그레이드 CLI 사용npx @next/codemod@canary upgrade latest# ...또는 수동으로 업그레이드npm install next@latest react@rc react-dom@rc Next.js 15의 새로운 기능..

React 18 변경점 정리 오늘은 React19 release version이 나오기 전에 React 18의 큰 변경점에 대해 살펴보려고 한다.현재 기준 React 가장 최신 버전은 18.3.1 이다.(2024년 4월 26일) 그리고 React18은 2022년 3월 29일에 정식 릴리즈 되었다. 1. 동시 렌더링(Concurrent Rendering) 동시 렌더링(Concurrent Rendering)은 사용자 인터페이스(UI)를 더 유연하고 효율적으로 렌더링할 수 있게 해주는 기능으로, 전통적인 렌더링 방식에서는 컴포넌트 트리가 변경될 때, 변경 사항이 한 번에 렌더링되면서 오랜 시간이 소요되며 UI가 멈추는 것처럼 보이는 문제가 발생하였다. 동시 렌더링(Concurrent Rendering)은 이러한 문제를 해결하..

[ React ] React 19 RC에 대해서 알아보자 React19 RC(Release Candidate)는 현재 개발 중이며 2024년 9월 기준으로 아직 정식 출시되지 않았다. 가장 최신 정보(2024년 4월 기준, React Blog 참고)를 바탕으로 설명하자면 React 19는 이전 버전들과 비교해 몇 가지 주요 개선사항과 새로운 기능들을 포함할 것으로 예상된다. 성능 개선: 렌더링과 상태 업데이트 성능이 향상될 전망.서버 컴포넌트: 서버 사이드 렌더링을 더욱 효율적으로 만들어주는 서버 컴포넌트의 완전한 구현이 포함될 가능성이 높다.동시성 기능 개선: React 18에서 도입된 동시성 기능들이 더욱 안정화되고 발전될 것으로 예상.새로운 훅: 개발자들의 작업을 더욱 편리하게 만들어줄 새로운 훅들이 추가될 수 있다.타입스크립트 지원 강화: 타입스크립..

[ React ] React의 export와 export default 차이점 알아보기 SyntaxExport 구문, Import 구문 간단 정리표Defaultexport default function Button() {}import Button from './button.js';Namedexport function Button() {}import { Button } from './button.js'; 보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을 사용하고 여러 컴포넌트를 export 할 경우엔 named export 방식을 사용한다. React에서 `export`와 `export default`의 차이점은 다음과 같다.1. export - 여러 개의 값(함수, 객체, 원시 값 등)을 내보낼 수 있다. - 가져올 때 중괄호..

[ React ] Chart UI 구현을 위한 React 라이브러리 정리 Chart 관련 Libraries 정리 글 1.Recharts⭐ 20.3k 의 인기 있는 차트 라이브러리. (중국 회사)storybook을 통한 UI 명세가 있고, 굉장히 다양한 차트 컴포넌트 지원.https://recharts.org/en-US 2.nivo⭐ 11.4khttps://nivo.rocks/components/ 3.apexcharts⭐ 12.5k예쁘고 아기자기한 디자인, React 컴포넌트 예시(class 컴포넌트 기반), 커스터마이징 자유도 높음.https://apexcharts.com/ 4.react-chartjs-2⭐ 5.9kChart.js 용 React Component 라이브러리. Chart.js V3,V4를 서포트함. (가장 인기 많..

React의 상태관리 라이브러리, Zustand에 대한 간략 정리글. 독일어로 "상태"를 의미하는 Zustand는 React 애플리케이션에서 단순화된 Flux 패턴을 사용하는 작고 빠른 상태 관리 라이브러리이다.hook을 기반으로 사용하는 간편한 API를 제공하며, 최소한의 보일러플레이트 코드로 사용이 가능하며, 개발자가 상태 관리를 직관적이고 쉽게 처리할 수 있도록 도와준다. 주요 기능 및 특징 1. 심플한 API: Zustand의 API는 매우 간단하다. 보통 1~2개의 hook만 사용하여 상태를 정의하고, 이를 컴포넌트에서 사용할 수 있다. 주로 `create` 함수와 `useStore` 훅을 사용한다.2. 초경량: Zustand는 경량 라이브러리로, 크기가 작고 빠르다. React Context API 기반으로 작동하는 다른 상태 관리 라이브러리와 비..

[ Sentry ] F.E에서 Sentry를 활용하여 디버깅 하기. 프론트엔드에서 개발 및 운영을 하는 과정에서 발생하는 에러를 모니터링하는 방법은 다양하다. 현재 우리 회사는 프론트엔드의 디버깅 툴로 센트리를 사용하고 있어서 간단히 소개하려고 한다. 센트리는 웹, 모바일 앱, 게임등의 다양한 애플리케이션에서 발생하는 오류를 실시간으로 추적하고 분석하여 예측 가능한 오류와 예측 불가능한 오류들에 대해 탐지를 위한 툴이다. 처음에는 오픈 소스 프로젝트로 시작하였으나 현재는 클라우드 기반 서비스와 온프레미스 설치 버전을 모두 제공한다. 센트리를 잘 활용하여 고객들에게 더 나은 품질의 서비스를 제공할 수 있다. 센트리의 강력한 기능들 1. 에러 모니터링애플리케이션에서 발생하는 모든 에러를 자동으로 감지하고 기록하여 개발자가 어떤 에러가 발생했는지 바로 알 수 있도록 도와준다..

이전 1 2 3 다음

티스토리툴바