본문 바로가기

React16

[Next.js] Trans 컴포넌트의 shouldUnescape 개념과 활용 방법 개요웹 개발에서는 UI에서 다양한 텍스트 데이터를 안전하고 올바르게 표시하는 것이 중요합니다. 특히 다국어 지원이나 동적 콘텐츠 렌더링을 위해 텍스트를 처리할 때, 이스케이프된 특수 문자를 처리해야 하는 경우가 많습니다. 이 과정에서 유용하게 사용되는 것이 Trans 컴포넌트와 그 속성 중 하나인 shouldUnescape입니다.Trans 컴포넌트란?2024.08.28 - [React] - [Next.js] Trans 컴포넌트의 shouldUnescape 개념과 활용 방법shouldUnescape 속성이란?shouldUnescape는 주로 텍스트 데이터를 처리할 때 해당 데이터가 이스케이프된 상태에서 언이스케이프(Unescape)하여 원래 상태로 변환해야 하는지 여부를 결정하는 속성이나 함수입니다. 이 .. React 2024. 8. 28.
[React] 브라우저 크기 조정 성능 개선 개요브라우저 창 크기 조정 시 발생하는 끊김 현상을 해결하기 위해 뷰포트 너비 값을 사용하는 구성 요소의 성능을 향상시키는 과정을 함께해 봅니다.문제 인식브라우저 창 크기를 조정할 때 끊김 현상이 지속적으로 관찰되었습니다. 이는 사용자 경험을 향상시키기 위해 반드시 해결해야 할 중요한 문제였습니다.작업 요약뷰포트 너비 값을 사용하는 구성 요소의 성능을 개선하는 데 중점을 두었습니다. 다음은 작업 과정과 개선 사항에 대한 자세한 요약입니다.useWindowSize 훅을 사용하는 구성 요소문제useWindowSize 훅을 사용하는 각 구성 요소에 대해 이벤트 리스너가 등록되었습니다.영향이는 1픽셀 단위로 다시 렌더링이 발생하여 성능 문제가 발생했습니다.useMediaQuery 훅을 사용하는 구성 요소문제서버.. React 2024. 7. 28.
[React] 브레이크포인트를 활용한 반응형 웹 디자인 개요React를 사용하면 브레이크포인트(breakpoints)를 통해 반응형 디자인을 쉽게 구현 가능하다React에서 브레이크포인트를 활용하여 반응형 웹 디자인을 구현하는 방법을 알아보자반응형 웹 디자인(Responsive Web Design)다양한 기기와 화면 크기에서 최적의 사용자 경험을 제공하기 위해 웹 페이지의 레이아웃을 유연하게 조정하는 기술브레이크포인트란브레이크포인트는 CSS 미디어 쿼리에서 특정 스타일을 적용하는 조건을 정의 하는 지점이다브레이크포인트를 사용하면 화면 크기에 따라 다른 스타일을 적용할 수 있어서 다양한 기기에서 최적의 레이아웃을 제공할 수 있다일반적인 브레이크포인트는 다음과 같다모바일0px ~ 599px태블릿600px ~ 1199px데스크탑1200px 이상React에서 브레이.. React 2024. 6. 1.
[Typescript] 타입스크립트에서 interface와 type의 차이점 개요최근 이직한 회사에서는 모든 타입 정의 코드에서 type을 사용하고 있었다.항상 interface만 써오던 나로서는 type과 interface의 차이점이 궁금했다.Interfaceinterface는 객체의 형태를 정의하는 데 사용된다.예를 들어, 사용자 객체를 정의한다고 할 때, interface를 사용하여 이렇게 작성할 수 있다interface User { name: string; age: number;}특징1. 확장interface는 extends 키워드를 사용하여 다른 인터페이스를 확장할 수 있다.이를 통해 코드의 재사용성을 높일 수 있다.interface Admin extends User { adminSince: Date;}2. 병합동일한 이름의 인터페이스가 여러 개 정의되면, 타입스크.. Typescript 2024. 5. 17.
[React] Next.js 관련 면접 질문 및 답변 가이드 개요Next.js 관련 기술 면접 질문과 모범 답변에 대한 정리 글입니다. 면접 준비에 활용하세요.질문 리스트Next.js 정의Next.js의 주요 기능SSR과 CSR의 차이getInitialProps 기능Next.js의 라우팅 방식API 경로 생성 방법면접 질문1. Next.js는 무엇입니까?Next.js는 React.js, Node.js 및 JavaScript 위에 구축된 오픈 소스 개발 프레임워크입니다. Vercel에서 개발했으며 create-react-app에서 사용할 수 없는 서버 측 렌더링 및 정적 사이트 생성과 같은 기능을 활성화합니다.2. Next.js의 주요 기능은 무엇입니까?SSR(Server Side Rendering): 더 나은 SEO와 더 빠른 페이지 로드 시간을 보장합니다.SSG.. React 2023. 7. 13.

티스토리툴바