dayjs는 React 프로젝트에서 날짜 및 시간을 간편하게 처리할 수 있는 훌륭한 도구입니다. 아래 예제들을 통해 React 애플리케이션에서 dayjs를 사용하는 방법을 살펴보겠습니다. 1. dayjs 설치 및 가져오기 먼저, dayjs를 설치하고 React 컴포넌트에서 가져옵니다. 2. 날짜 파싱 및 형식 지정 3. 날짜 연산 4. 날짜 비교 5. 로케일 및 다국어 지원 React에서 dayjs를 사용하면 간편하게 날짜 및 … Read more
CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 출처(origin)로부터 리소스를 요청할 때 발생하는 보안 정책입니다. 이 정책은 브라우저에서 실행되며, 웹 애플리케이션이 다른 출처에서 데이터를 요청할 때 요청을 허용하거나 차단하는 역할을 합니다. 이 글에서는 Nest.js로 백엔드를 개발하고 Next.js로 프론트엔드를 개발하는 웹 애플리케이션에서 CORS 문제가 발생하는 원인과 해결 방법에 대해 알아보겠습니다. CORS 문제의 원인 CORS 문제는 주로 다음과 같은 … Read more
React 애플리케이션을 개발하면서 화면 초기화는 매우 중요한 단계입니다. 초기화는 화면이 로드되고 사용자에게 보여지기 전에 수행되며, 이 과정에서 컴포넌트의 초기 상태를 설정하고, 외부 데이터를 로드하며, 필요한 작업을 수행합니다. 이 블로그 포스팅에서는 React에서 화면 초기화를 어떻게 수행하는지 알아보겠습니다. 클래스 기반 컴포넌트에서의 초기화 1. 초기 상태 설정 React 클래스 기반 컴포넌트에서 초기화는 주로 constructor 메서드를 사용하여 초기 상태를 … Read more
React는 사용자 입력을 안전하게 처리하고 XSS(Cross-Site Scripting) 공격으로부터 보호하는 데 도움을 주는 강력한 도구입니다. 그러나 때로는 외부 데이터를 안전하게 렌더링해야 할 필요가 있을 때가 있습니다. 이때 dangerouslySetInnerHTML을 사용할 수 있습니다. 그러나 이 기능을 사용할 때는 주의해야 할 몇 가지 보안 사항이 있습니다. dangerouslySetInnerHTML란? dangerouslySetInnerHTML은 React 컴포넌트에서 사용되는 옵션 중 하나로, HTML 내용을 동적으로 렌더링하는 데 … Read more
React를 사용하여 웹 애플리케이션을 개발할 때 보안은 매우 중요한 고려 사항입니다. React 자체는 보안 라이브러리가 아니지만, 올바른 개발 패턴과 보안 관행을 따르면 React 애플리케이션을 안전하게 유지할 수 있습니다. 이 블로그 포스팅에서는 React 애플리케이션에서 고려해야 할 주요 보안 관련 사항을 살펴보겠습니다. 1. XSS(Cross-Site Scripting) 방어 2. CSRF(Cross-Site Request Forgery) 방어 3. 보안 헤더 사용 4. Route … Read more
React 함수형 컴포넌트는 부모 컴포넌트와 자식 컴포넌트 간에 데이터와 함수를 주고받는 일이 일반적입니다. 이러한 데이터와 함수 전달은 React의 핵심 원리 중 하나입니다. 그 중에서도 useImperativeHandle 훅은 자식 컴포넌트가 부모 컴포넌트로부터 함수나 메서드를 노출하고 커스터마이징할 때 사용됩니다. useImperativeHandle란? useImperativeHandle은 React에서 자식 컴포넌트에서 부모 컴포넌트로 함수나 메서드를 노출하거나 커스터마이징할 때 사용되는 특별한 훅입니다. 이를 통해 부모 컴포넌트는 … Read more
React 애플리케이션에서 라우팅을 처리하는 데 사용되는 React Router 라이브러리는 여러 가지 라우터 컴포넌트를 제공합니다. 그 중에서도 BrowserRouter와 HashRouter는 가장 많이 사용되며, 이들 간의 중요한 차이를 이해하는 것이 중요합니다. BrowserRouter 1. HTML5 History API 기반 BrowserRouter는 HTML5 History API를 기반으로 라우팅을 처리합니다. 이것은 가독성이 높고 예쁜 URL을 사용할 수 있는 장점을 제공합니다. 예를 들어, /about과 같은 … Read more
React는 웹 애플리케이션 개발을 위한 강력한 도구 중 하나로, 그러나 대규모 앱을 구축할 때 성능 문제가 발생할 수 있습니다. 이를 해결하려면 React의 성능을 최적화하는 전략을 알아야 합니다. 이 글에서는 React 애플리케이션의 성능을 향상시키기 위한 다양한 방법을 살펴보겠습니다. 1. PureComponent 또는 React.memo 사용하기 React 컴포넌트는 기본적으로 상태나 프롭스가 변경되면 리렌더링됩니다. 그러나 모든 업데이트가 필요하지 않을 수 … Read more
React는 현대 웹 개발에서 가장 널리 사용되는 JavaScript 라이브러리 중 하나로, 사용자 인터페이스를 구축하는 데 뛰어난 도구입니다. 그 중에서도 React의 핵심 기능 중 하나는 컴포넌트 리렌더링입니다. 컴포넌트 리렌더링은 React 애플리케이션의 성능과 효율성을 결정짓는 중요한 개념 중 하나입니다. 컴포넌트 리렌더링의 두 가지 유형 React 컴포넌트 리렌더링은 크게 두 가지 유형으로 나눌 수 있습니다. 1. 초기 렌더링 … Read more
React 애플리케이션 개발에서 데이터를 가져오는 것은 매우 중요한 부분입니다. 이를 위해 Next.js에서 제공하는 getServerSideProps, getStaticProps, getStaticPaths와 관련된 개념과 사용법을 알아보겠습니다. getServerSideProps 개요 getServerSideProps 함수는 서버 사이드 렌더링(SSR)을 지원하기 위해 사용됩니다. 이 함수는 페이지가 요청될 때마다 서버에서 실행되며, 해당 페이지에 필요한 데이터를 가져와서 페이지를 렌더링합니다. 동적 데이터를 페이지에 주입해야 하는 경우에 유용합니다. 사용법 getStaticProps 개요 getStaticProps … Read more