본문 바로가기

전체 글66

[Next.js] Trans 컴포넌트의 shouldUnescape 개념과 활용 방법 개요웹 개발에서는 UI에서 다양한 텍스트 데이터를 안전하고 올바르게 표시하는 것이 중요합니다. 특히 다국어 지원이나 동적 콘텐츠 렌더링을 위해 텍스트를 처리할 때, 이스케이프된 특수 문자를 처리해야 하는 경우가 많습니다. 이 과정에서 유용하게 사용되는 것이 Trans 컴포넌트와 그 속성 중 하나인 shouldUnescape입니다.Trans 컴포넌트란?2024.08.28 - [React] - [Next.js] Trans 컴포넌트의 shouldUnescape 개념과 활용 방법shouldUnescape 속성이란?shouldUnescape는 주로 텍스트 데이터를 처리할 때 해당 데이터가 이스케이프된 상태에서 언이스케이프(Unescape)하여 원래 상태로 변환해야 하는지 여부를 결정하는 속성이나 함수입니다. 이 .. React 2024. 8. 28.
[Next.js] 다국어 지원과 동적 텍스트 렌더링에 필요한 Trans 컴포넌트 개요웹 애플리케이션을 개발할 때, 다국어 지원은 UX에 있어 중요한 요소 중 하나입니다. 특히 글로벌 사용자층을 타겟으로 하는 경우, 다양한 언어로 인터페이스를 제공하는 것은 필수적입니다. 이때 매우 유용하게 사용되는 것이 Trans 컴포넌트입니다. 이 글에서는 Trans 컴포넌트가 무엇인지, 그리고 이를 어떻게 활용할 수 있는지에 대해 알아보겠습니다.Trans 컴포넌트란?Trans 컴포넌트는 주로 국제화(i18n)와 다국어 지원을 위해 사용되는 UI 컴포넌트입니다. 다양한 언어로 텍스트를 렌더링하거나, 동적 콘텐츠를 텍스트에 삽입할 때 매우 유용합니다. 특히 다국어 지원을 위해 널리 사용되는 react-i18next 같은 라이브러리와 함께 사용되는 경우가 많습니다.주요 기능다국어 지원Trans 컴포넌트.. React 2024. 8. 28.
[React] 브라우저 크기 조정 성능 개선 개요브라우저 창 크기 조정 시 발생하는 끊김 현상을 해결하기 위해 뷰포트 너비 값을 사용하는 구성 요소의 성능을 향상시키는 과정을 함께해 봅니다.문제 인식브라우저 창 크기를 조정할 때 끊김 현상이 지속적으로 관찰되었습니다. 이는 사용자 경험을 향상시키기 위해 반드시 해결해야 할 중요한 문제였습니다.작업 요약뷰포트 너비 값을 사용하는 구성 요소의 성능을 개선하는 데 중점을 두었습니다. 다음은 작업 과정과 개선 사항에 대한 자세한 요약입니다.useWindowSize 훅을 사용하는 구성 요소문제useWindowSize 훅을 사용하는 각 구성 요소에 대해 이벤트 리스너가 등록되었습니다.영향이는 1픽셀 단위로 다시 렌더링이 발생하여 성능 문제가 발생했습니다.useMediaQuery 훅을 사용하는 구성 요소문제서버.. React 2024. 7. 28.
[Next.js] CSR에서 SSR로 마이그레이션 하기 개요Next.js 에서 애플리케이션의 성능과 SEO를 개선하기 위해 클라이언트 사이드 렌더링(CSR)에서 서버 사이드 렌더링(SSR)으로 전환한 경험을 공유합니다.왜 SSR인가?성능: SSR은 서버에서 콘텐츠를 미리 렌더링하여 첫 번째 바이트 시간(TTFB)을 크게 줄일 수 있습니다.SEO: 검색 엔진이 미리 렌더링된 페이지를 쉽게 인덱싱할 수 있어 애플리케이션의 검색 엔진 순위가 향상됩니다.사용자 경험: SSR은 초기 로드 시간을 단축하여 전반적인 사용자 경험을 향상시킵니다.도전 과제데이터 페칭: 서버에서 데이터를 페칭하고 클라이언트에 전달하는 것이 주요 과제 중 하나였습니다.상태 관리: 서버 렌더링된 상태와 클라이언트 렌더링된 상태 간의 일관성을 유지하는 것이 중요했습니다.조건부 렌더링: 특정 컴포넌.. React 2024. 7. 11.
[Linux] HTTPS SSH 인증서 발급 이유 개요이번 게시물에서는 HTTPS 및 SSH 인증서를 발급하는 이유와 안전한 온라인 환경을 유지하는 데 있어서의 중요성에 대해 살펴보겠습니다.참고인증서 발급 방법은 여기서 확인하세요.2021.07.19 - [Linux] - [Linux] Standalone으로 Let's Encrypt SSL 인증서 발급 받아 nginx에 적용하기HTTPS란 무엇인가요?HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장으로, 'S'는 'Secure'를 의미합니다. SSL/TLS 프로토콜을 사용하여 웹 서버와 클라이언트(일반적으로 웹 브라우저) 간에 교환되는 데이터를 암호화합니다. 이 암호화는 로그인 자격 증명, 결제 세부 정보, 개인 데이터와 같은 민감한 정보를 악의적인 행위자가 가.. Linux 2024. 6. 30.

티스토리툴바